时间戳

首页 > 解决方案 > 制作一个球从屏幕一侧反弹而没有反弹的游戏

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

问题描述

我正在尝试制作 Pong 的 Udemy 教程中的代码。我处于早期阶段，只想让球从屏幕边缘反弹。但它没有。我认为问题可能出在我定义的地方

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>

提前致谢。

标签： javascripthtml2d-games

解决方案

问题出在区块中

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

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

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

另外，您不应该将球移入drawEverything()，那只是糟糕的设计。

推荐阅读