script.js

const canvas = document.getElementById("pongCanvas");
const ctx = canvas.getContext("2d");

canvas.width = 800;
canvas.height = 500;

// Paddle
const paddle = {
  x: 30,
  y: canvas.height / 2 - 50,
  width: 10,
  height: 100,
  dy: 5
};

// Ball
const ball = {
  x: canvas.width / 2,
  y: canvas.height / 2,
  radius: 8,
  speed: 4,
  dx: 4,
  dy: 4
};

// Score
let score = 0;

// Draw paddle
function drawPaddle() {
  ctx.fillStyle = "white";
  ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
}

// Draw ball
function drawBall() {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
  ctx.fillStyle = "white";
  ctx.fill();
  ctx.closePath();
}

// Draw score
function drawScore() {
  ctx.fillStyle = "white";
  ctx.font = "20px Arial";
  ctx.fillText("Score: " + score, 20, 30);
}

// Move paddle
document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowUp" && paddle.y > 0) {
    paddle.y -= paddle.dy;
  } else if (e.key === "ArrowDown" && paddle.y + paddle.height < canvas.height) {
    paddle.y += paddle.dy;
  }
});

// Move ball
function moveBall() {
  ball.x += ball.dx;
  ball.y += ball.dy;

  // Bounce off top/bottom
  if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
    ball.dy *= -1;
  }

  // Bounce off paddle
  if (
    ball.x - ball.radius < paddle.x + paddle.width &&
    ball.y > paddle.y &&
    ball.y < paddle.y + paddle.height
  ) {
    ball.dx *= -1;
    score++; // <-- Add score when ball hits paddle
  }

  // Reset if ball goes off screen (missed paddle)
  if (ball.x - ball.radius < 0) {
    ball.x = canvas.width / 2;
    ball.y = canvas.height / 2;
    ball.dx = 4;
    ball.dy = 4;
    score = 0; // Reset score when you lose
  }

  // Bounce off right wall
  if (ball.x + ball.radius > canvas.width) {
    ball.dx *= -1;
  }
}

// Draw everything
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawPaddle();
  drawBall();
  drawScore();
}

// Update game
function update() {
  moveBall();
}

// Game loop
function loop() {
  update();
  draw();
  requestAnimationFrame(loop);
}

loop();