game.js

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

const sizes = {
  ball: 10,
  paddle: { width: 75, height: 10 },
};
const colors = {
  ball: '#ff0000',
  paddle: '#0000ff',
  text: '#020202',
};
let positions = {
  ball: { x: canvas.width / 2, y: canvas.height - (sizes.ball * 3) },
  paddle: { x: (canvas.width - sizes.paddle.width) / 2, y: canvas.height - sizes.paddle.height },
};
let velocity = {
  ball: { x: 2, y: -2 },
  paddle: { x: 5 },
};
let keyStates = {
  pressed: { left: false, right: false },
};
let score = 0;
let lost = false;

function drawBall() {
  ctx.beginPath();
  ctx.arc(positions.ball.x, positions.ball.y, sizes.ball, 0, Math.PI * 2);
  ctx.fillStyle = colors.ball;
  ctx.fill();
  ctx.closePath();
}

function drawPaddle() {
  ctx.beginPath();
  ctx.rect(positions.paddle.x, positions.paddle.y, sizes.paddle.width, sizes.paddle.height);
  ctx.fillStyle = colors.paddle;
  ctx.fill();
  ctx.closePath();
}

function drawScore() {
  ctx.font = "30px Arial";
  ctx.fillStyle = colors.text;
  ctx.fillText(`Score: ${score}`, 10, 30);
}

function updateBall() {
  if (
    positions.ball.x + velocity.ball.x > canvas.width - sizes.ball ||
    positions.ball.x + velocity.ball.x < sizes.ball
  ) {
    velocity.ball.x = -velocity.ball.x;
  }

  const collideWithPlayer = (
    positions.ball.y + velocity.ball.y > canvas.height - sizes.paddle.height - sizes.ball &&
    positions.ball.x + velocity.ball.x > positions.paddle.x &&
    positions.ball.x + velocity.ball.x < positions.paddle.x + sizes.paddle.width
  );

  if (positions.ball.y < sizes.ball || collideWithPlayer) {
    if (collideWithPlayer) {
      score += 1;
      velocity.ball.x += Math.random();
      velocity.ball.y += Math.random();
      velocity.paddle.x = Math.abs(velocity.ball.x * 2.5);
    }

    velocity.ball.y = -velocity.ball.y;
  } else if (positions.ball.y - sizes.ball > canvas.height && !lost) {
    lost = true;
    alert(`You win with ${score} points!`);
    window.location.reload();
  }

  positions.ball.x += velocity.ball.x;
  positions.ball.y += velocity.ball.y;
}

function updatePaddle() {
  if (keyStates.pressed.left && positions.paddle.x > 0) {
    positions.paddle.x -= velocity.paddle.x;
  }

  if (keyStates.pressed.right && positions.paddle.x + sizes.paddle.width < canvas.width) {
    positions.paddle.x += velocity.paddle.x;
  }
}

function update() {
  updateBall();
  updatePaddle();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();

  positions.ball.x += velocity.ball.x;
  positions.ball.y += velocity.ball.y;

  drawPaddle();
  drawScore();
  update();
  requestAnimationFrame(draw);
}

function keyDownHandler(event) {
  if (event.keyCode === 37) {
    keyStates.pressed.left = true;
  } else if (event.keyCode === 39) {
    keyStates.pressed.right = true;
  }
}

function keyUpHandler(event) {
  if (event.keyCode === 37) {
    keyStates.pressed.left = false;
  } else if (event.keyCode === 39) {
    keyStates.pressed.right = false;
  }
}

function setup() {
  ctx.mozImageSmoothingEnabled = true;
  ctx.webkitImageSmoothingEnabled = true;
  ctx.msImageSmoothingEnabled = true;
  ctx.imageSmoothingEnabled = true;

  document.addEventListener('keydown', keyDownHandler, false);
  document.addEventListener('keyup', keyUpHandler, false);

  requestAnimationFrame(draw);
}

setup();