如何使用 JavaScript 创建 Pong 游戏?

javascriptweb developmentfront end technology

Pong 游戏 是一种双人桨式游戏，每个玩家的任务是防止球撞到墙上。每当玩家 1 将球击向对手的墙壁时，玩家 1 将获得一分，同样，如果玩家 2 将球击向对手的墙壁，他将获得一分。在本教程中，我们将使用 JavaScript 创建 Pong 游戏。

方法

要使用 JavaScript 制作 Pong 游戏，我们需要使用 HTML、CSS 和 JavaScript 编写代码。我们已经用 JavaScript 编写了一些函数来构建 Pong 游戏，这些函数定义如下 -

downHandler() - 该函数用于处理按键以使球拍向下移动。
upHandler() - 该函数用于处理按键以使球拍向上移动。
ball() - 它用于构建球来玩游戏。
scores() - 该函数用于显示游戏得分。
collisionsWithLeftPaddle() - 如果球击中左球拍，该函数将控制游戏。
collisionsWithRightPaddle() - 如果球击中右球拍，该函数将控制游戏桨。
computeCollisionsWithWallsAndPaddle() − 此函数将控制与画布墙壁的碰撞。
drawLeftPaddle() − 此函数用于制作左桨。
drawRightPaddle() − 此函数用于制作右桨。
scene() − 此函数用于制作场景。
draw() − 在这里我们调用所有其他函数使它们作为一个函数运行。

示例

在下面的示例中，我们使用上面讨论的函数在 JavaScript 中实现了 Pong 游戏。


<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Tutorials Point Pong Game</title>
   <style>
      canvas {
         background: yellow;
         display: block;
         margin: auto;
      }
   </style>
</head>
<body>
   <canvas id="board" width="650"height="350"</canvas>
   <script>
      var canvas = document.getElementById("board");
      var ctx = canvas.getContext("2d");
      var x = canvas.width/2;
      var y = canvas.height-30;
      var dx = 4;
      var dy = -4;
      var ballRadius = 10;

      // varibles declared to handle the movement of paddles
      var leftUpPressed = false;
      var leftDownPressed = false;
      var rightUpPressed = false;
      var rightDownPressed = false;

      function DownHandler(e) {
         if(e.keyCode == 90) {
            leftUpPressed = true;
         }
         else if (e.keyCode == 83) {
            leftDownPressed = true;
         }
         if (e.keyCode == 38) {
            rightUpPressed = true;
         }
         else if (e.keyCode == 40) {
            rightDownPressed = true;
         }
      }
      
      function UpHandler(e) {
         if (e.keyCode == 90) {
            leftUpPressed = false;
         }
         else if (e.keyCode == 83) {
            leftDownPressed = false;
         }
         if (e.keyCode == 38) {
            rightUpPressed = false;
         }
         else if (e.keyCode == 40) {
            rightDownPressed = false;
         }
      }

      function Ball() {
         ctx.beginPath();
         ctx.arc(x, y, ballRadius, 0, Math.PI*2);
         ctx.fillStyle = "red";
         ctx.fill();
         ctx.closePath();
      }
      var leftScore = 0;
      var rightScore = 0;

      function Scores() {
         ctx.font = "80px Arial";
         ctx.fillStyle = "blue";
         ctx.fillText(leftScore, (canvas.width / 2) - 80, 70);
         ctx.fillText(rightScore, (canvas.width / 2) + 40, 70);
      }

      function collisionsWithLeftPaddle() {
         if ((x - ballRadius) <= 5 + l_PaddleWidth) {
            if (y > l_PaddleY && y < l_PaddleY + l_PaddleHeight)
               dx = -dx;
            else if ((x - ballRadius) <= 0) {
               rightScore++;
            
               //alert("Game Over");
               x = canvas.width / 2;
               y = canvas.height / 2;
               dx = -dx;
               dy = -dy;
         
               //document.location.reload();
            }
         }
      }

      function collisionsWithRightPaddle() {
         if ((x + ballRadius) >= canvas.width - (r_PaddleWidth + 5)) {
            if (y > r_PaddleY && y < r_PaddleY + r_PaddleHeight)
               dx = -dx;
            else if (x + ballRadius >= canvas.width) {
               leftScore++;
               
               //alert("Game Over");
               x = canvas.width / 2;
               y = canvas.height / 2;
               dx = -dx;
               dy = -dy;
            
               //document.location.reload();
            }
         }
      }

      function computeCollisionsWithWallsAndPaddle() {
         collisionsWithLeftPaddle();
         collisionsWithRightPaddle();
         if (((y - ballRadius) <= 0) || ((y + ballRadius) >= canvas.height)) {
            dy = -dy;
         }
      }

      // For left-hand side player 
      var l_PaddleHeight = 80
      var l_PaddleWidth = 10
      var l_PaddleX = 5;
      var l_PaddleY = canvas.height / 2 - l_PaddleHeight / 2;
      function drawLeftPaddle() {
         ctx.beginPath();
         ctx.rect(l_PaddleX, l_PaddleY, l_PaddleWidth, l_PaddleHeight);
         ctx.fillStyle = "green";
         ctx.fill();
         ctx.closePath();
         if (leftDownPressed && l_PaddleY < canvas.height - l_PaddleHeight) {
            l_PaddleY += 7;
         }
         else if (leftUpPressed && l_PaddleY > 0) {
            l_PaddleY -= 7;
         }
      }

      // For Right-hand side player 
      var r_PaddleHeight = 80
      var r_PaddleWidth = 10
      var r_PaddleX = canvas.width - (r_PaddleWidth + 5);
      var r_PaddleY = canvas.height / 2 - r_PaddleHeight / 2;
      function drawRightPaddle() {
         ctx.beginPath();
         ctx.rect(r_PaddleX, r_PaddleY, r_PaddleWidth, r_PaddleHeight);
         ctx.fillStyle = "green";
         ctx.fill();
         ctx.closePath();
         if (rightDownPressed && r_PaddleY < canvas.height - r_PaddleHeight) {
            r_PaddleY += 7;
         }
         else if (rightUpPressed && r_PaddleY > 0) {
            r_PaddleY -= 7;
         }
      }

      function Scene() {
         ctx.beginPath();
         ctx.rect(canvas.width / 2 - 1, 0, 3, canvas.height);
         ctx.fillStyle = "white";
         ctx.fill();
         ctx.closePath();
      }
      
      function draw() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         Scores();
         Scene();
         drawLeftPaddle();
         drawRightPaddle();
         Ball();
         computeCollisionsWithWallsAndPaddle();
         x += dx;
         y += dy;
      }

      setInterval(draw, 10);
      document.addEventListener("keydown", DownHandler, false);
      document.addEventListener("keyup", UpHandler, false);
   </script>
</body>
</html>

注意

要重新开始游戏，应按"重新开始"按钮。
要玩游戏，左侧玩家应使用 S 和 Z 键使其上下移动，右侧玩家应使用向上和向下键。

技术文章和资源

热门类别

如何使用 JavaScript 创建 Pong 游戏?

方法

示例

相关文章

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！