How to Create Pong Game in JavaScript?

A Pong game is a two-player paddle game where each player’s task is to save the ball from hitting the wall. Whenever player 1 hits the ball at the opponent’s wall then player one will receive a point, and similarly, player 2 will get a point if he/she hits the ball at the opponent’s wall. In this tutorial, we will create a Pong Game in JavaScript.

Approach

To make the pong game using JavaScript we need to write code in HTML, CSS, and JavaScript. We have written certain functions in JavaScript to build the Pong game which is defined below −

  • downHandler() − This function is used to handle the keys to make the paddle move in downward direction.

  • upHandler() −This function is used to handle the keys to make the paddle move in upward direction.

  • ball() − It is used to build the ball to play the game.

  • scores() − This function is used to show the scores of game.

  • collisionsWithLeftPaddle() − This function will control the game if ball hits the left paddle.

  • collisionsWithRightPaddle() − This function will control the game if ball hits the right paddle.

  • computeCollisionsWithWallsAndPaddle() − This function will control the collisions with the walls of canvas.

  • drawLeftPaddle() − This function is used to make the left paddle.

  • drawRightPaddle() − This function is used to make the right paddle.

  • scene() − This function is used to make the scene.

  • draw() − Here we are calling all the other functions to make them run as one.

Example

In the below example, we have implemented the Pong game in JavaScript using the above discussed functions.

<!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>

Note

  • To restart the game one should press the Restart button.

  • To play the game the left hand side player should use the S and Z keys to make it move upwards and downwards, and the right-hand side player should use the up and down keys.

Updated on: 18-Oct-2022

2K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements