Untitled

// Set up the canvas and context
const canvas = document.getElementById('pong');
const context = canvas.getContext('2d');

// Set up the game state
const ball = {
  x: canvas.width / 2,
  y: canvas.height / 2,
  radius: 10,
  velocityX: 5,
  velocityY: 5
};

const player1 = {
  x: 0,
  y: canvas.height / 2 - 50,
  width: 10,
  height: 100,
  score: 0
};

const player2 = {
  x: canvas.width - 10,
  y: canvas.height / 2 - 50,
  width: 10,
  height: 100,
  score: 0
};

// Draw the game elements
function draw() {
  // Clear the canvas
  context.clearRect(0, 0, canvas.width, canvas.height);

  // Draw the ball
  context.beginPath();
  context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
  context.fillStyle = '#ffffff';
  context.fill();
  context.closePath();

  // Draw the players
  context.fillStyle = '#ffffff';
  context.fillRect(player1.x, player1.y, player1.width, player1.height);
  context.fillRect(player2.x, player2.y, player2.width, player2.height);

  // Draw the scores
  context.font = '32px Arial';
  context.fillText(player1.score, canvas.width / 4, 40);
  context.fillText(player2.score, canvas.width * 3 / 4, 40);
}

// Update the game state
function update() {
  // Move the ball
  ball.x += ball.velocityX;
  ball.y += ball.velocityY;

  // Bounce the ball off the walls
  if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
    ball.velocityY = -ball.velocityY;
  }

  // Check for a point scored by player 1
  if (ball.x - ball.radius < 0) {
    player2.score++;
    reset();
  }

  // Check for a point scored by player 2
  if (ball.x + ball.radius > canvas.width) {
    player1.score++;
    reset();
  }

  // Bounce the ball off player 1
  if (ball.x - ball.radius < player1.x + player1.width &&
      ball.y > player1.y &&
      ball.y < player1.y + player1.height) {
    ball.velocityX = -ball.velocityX;
  }

  // Bounce the ball off player 2
  if (ball.x + ball.radius > player2.x &&
      ball.y > player2.y &&
      ball.y < player2.y + player2.height) {
    ball.velocityX = -ball.velocityX;
  }
}

// Reset the ball to the center of the screen
function reset() {
  ball.x = canvas.width / 2;
  ball.y = canvas.height / 2;
  ball.velocityX = -ball.velocityX;
}

// Handle player input
function handleInput() {
  // Move player 1 up
  if (keys[87]) {
    player1.y -= 5;
  }

  // Move player 1 down
  if (keys[83]) {
    player1.y += 5;
  }

  // Move player 2 up
  if (keys[38]) {
    player2.y -= 5;
  }

  // Move player