Ping Pong Game

Ping Pong is a two-player game in which players use paddles to hit a ball back and forth across a net. The objective of the game is to score points by making the ball go past the opponent's paddle.

Code

<!DOCTYPE html>
<html>
  <head>
    <title>Ping Pong Game</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      
      canvas {
        background-color: #eee;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  
  <body>
    <canvas id='gameCanvas' width='600' height='400'></canvas>
    <script src='ping-pong.js'></script>
  </body>
</html>

// JavaScript code for Ping Pong Game

var canvas;
var canvasContext;
var ballX = 300;
var ballY = 200;
var ballSpeedX = 5;
var ballSpeedY = 5;

var paddle1Y = 250;
var paddle2Y = 250;
const PADDLE_HEIGHT = 100;
const PADDLE_THICKNESS = 10;

function calculateMousePos(evt) {
  var rect = canvas.getBoundingClientRect();
  var root = document.documentElement;
  var mouseX = evt.clientX - rect.left - root.scrollLeft;
  var mouseY = evt.clientY - rect.top - root.scrollTop;
  return {
    x: mouseX,
    y: mouseY
  };
}

function handleMouseClick(evt) {
  if (showingWinScreen) {
    player1Score = 0;
    player2Score = 0;
    showingWinScreen = false;
  }
}

window.onload = function() {
  canvas = document.getElementById('gameCanvas');
  canvasContext = canvas.getContext('2d');

  var framesPerSecond = 30;
  setInterval(function() {
    moveEverything();
    drawEverything();
  }, 1000/framesPerSecond);

  canvas.addEventListener('mousedown', handleMouseClick);

  canvas.addEventListener('mousemove', function(evt) {
    var mousePos = calculateMousePos(evt);
    paddle1Y = mousePos.y - (PADDLE_HEIGHT/2);
  });
}

function ballReset() {
  if (player1Score >= 11 || player2Score >= 11) {
    showingWinScreen = true;
  }

  ballSpeedX = -ballSpeedX;
  ballX = canvas.width/2;
  ballY = canvas.height/2;
}

function computerMovement() {
  var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
  if (paddle2YCenter < ballY - 35) {
    paddle2Y += 6;
  } else if (paddle2YCenter > ballY + 35) {
    paddle2Y -= 6;
  }
}

function moveEverything() {
  if (showingWinScreen) {
    return;
  }

  computerMovement();

  ballX += ballSpeedX;
  ballY += ballSpeedY;

  if (ballX < 0) {
    if (ballY > paddle1Y && ballY < paddle1Y+PADDLE_HEIGHT) {
      ballSpeedX = -ballSpeedX;

      var deltaY = ballY - (paddle1Y+PADDLE_HEIGHT/2);
      ballSpeedY = deltaY * 0.35;
    } else {
      player2Score++;
      ballReset();
    }
  }

  if (ballX > canvas.width) {
    if (ballY > paddle2Y && ballY < paddle2Y+PADDLE_HEIGHT) {
      ballSpeedX = -ballSpeedX;

      var deltaY = ballY - (paddle2Y+PADDLE_HEIGHT/2);
      ballSpeedY = deltaY * 0.35;
    } else {
      player1Score++;
      ballReset();
    }
  }

  if (ballY < 0) {
    ballSpeedY = -ballSpeedY;
  }
  if (ballY > canvas.height) {
    ballSpeedY = -ballSpeedY;
  }
}

function drawNet() {
  for (var i = 0; i < canvas.height; i+=40) {
    colorRect(canvas.width/2-1, i, 2, 20, 'white');
  }
}

function drawEverything() {
  // canvas
  colorRect(0,0,canvas.width,canvas.height,'black');

  if (showingWinScreen) {
    canvasContext.fillStyle = 'white';

    if (player1Score >= 11) {
      canvasContext.fillText('Left Player Won!', 350, 200);
    } else if (player2Score >= 11) {
      canvasContext.fillText('Right Player Won!', 350, 200);
    }

    canvasContext.fillText('Click to continue', 350, 500);
    return;
  }

  drawNet();

  // left paddle
  colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');

  // right paddle
  colorRect(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');

  // ball
  colorCircle(ballX, ballY, 10, 'white');

  // scores
  canvasContext.fillText(player1Score, 100, 100);
  canvasContext.fillText(player2Score, canvas.width-100, 100);
}

function colorCircle(centerX, centerY, radius, drawColor) {
  canvasContext.fillStyle = drawColor;
  canvasContext.beginPath();
  canvasContext.arc(centerX, centerY, radius, 0, Math.PI*2, true);
  canvasContext.fill();
}

function colorRect(leftX, topY, width, height, drawColor) {
  canvasContext.fillStyle = drawColor;
  canvasContext.fillRect(leftX,topY,width,height);
}

Conclusion

This is the basic code for a simple Ping Pong game. This code can be further modified and improved to create a more interactive and engaging game.

Simple HTML Ping Pong Game: No Instructions Needed

Simple HTML Ping Pong Game: No Instructions Needed

Ping Pong Game

Code

Conclusion