如何用 JavaScript 建立 Pong 遊戲？

Pong 遊戲是一款雙人乒乓球遊戲，每個玩家的任務都是防止球撞到牆上。當玩家 1 將球擊打到對手的牆上時，玩家 1 將獲得一分，同樣，如果玩家 2 將球擊打到對手的牆上，則玩家 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 鍵使其向上和向下移動，右側玩家應使用向上和向下鍵。

更新於: 2022-10-18

2K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告