制作一个球从屏幕一侧反弹但没有反弹的游戏

Question

我正在使用 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>

提前致谢。

Answer 1

尝试改变这个：

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

至

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

我认为您正在设置正确的 ballspeedx 值，然后立即进入下一个 if 并覆盖它。

Answer 2

问题出在块

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

如果球在最右边 (800)，它仍然大于零。所以即使你翻转速度（这是你应该做的），它也会自动设置它继续向右移动。我将您的 moveEverything() 函数更改为此，它工作正常：

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

此外，您不应该在 drawEverything() 中移动球，那只是糟糕的设计。

制作一个球从屏幕一侧反弹但没有反弹的游戏

making a game where a ball bounces of side of screen and doesen't

html

javascript

2d-games