我正在从Udemy上的一个教程中研究此代码,在此我试图制作Pong。我还处于初期阶段,只想让球从屏幕边缘弹起。
虽然没有。
我认为问题可能出在我定义的地方

ballspeedx = -ballspeedx


这是我的代码:



<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <canvas id="gameCanvas" width="800" height="600">

      </canvas>
  <script type="text/javascript">
    var canvas;
    var canvasContext;
    var ballx = 50
    var ballspeedx = 12;

    window.onload = function() {
      var FPS = 80
      setInterval(function() {
        moveEverything();
        drawEverything();
      }, 10000 / FPS)

    }

    function moveEverything() {
      ballx = ballx + ballspeedx;
      if (ballx > 800) {
        console.log("GREATER THAT 800")
        ballspeedx = -ballspeedx
        ballspeedx = ballspeedx + ballspeedx

        console.log("Hello?")
      }
      if (ballx > 0) {
        ballspeedx = 5;
      }

    }

    function drawEverything() {
      ballx = ballx + 5;
      console.log(ballx)
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d')
      canvasContext.fillStyle = 'black';
      canvasContext.fillRect(0, 0, canvas.width, canvas.height);
      canvasContext.fillStyle = 'white';
      canvasContext.fillRect(0, 210, 20, 100);
      canvasContext.fillStyle = 'red';
      canvasContext.fillRect(ballx, 100, 10, 10);

    }
  </script>
</body>

</html>





提前致谢。

最佳答案

问题出在街区

if (ballx > 0) {
   ballspeedx = 5;
}


如果球在最右边(800),则它仍大于零。因此,即使您反转速度(这是您应该执行的操作),也会自动将其设置为继续向右移动。我将您的moveEverything()函数更改为此,并且工作正常:

function moveEverything() {
  ballx = ballx + ballspeedx;
  if (ballx > 800 || ballx < 0) {
    ballspeedx = -ballspeedx;
    ballx += ballspeedx;
  }
}


另外,您不应该在drawEverything()中移动球,这只是一个糟糕的设计。

关于javascript - 制作游戏,其中球从屏幕的一侧弹跳而没有,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56706027/

10-09 02:52