script.js

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

const WIDTH = canvas.width;
const HEIGHT = canvas.height;

// Paddle settings
const PADDLE_WIDTH = 12;
const PADDLE_HEIGHT = 100;
const PADDLE_MARGIN = 30;
const PLAYER_X = PADDLE_MARGIN;
const AI_X = WIDTH - PADDLE_MARGIN - PADDLE_WIDTH;
const PADDLE_RADIUS = 8;

// Ball settings
const BALL_SIZE = 16;
const BALL_SPEED = 7;

// Game objects
let player = {
  x: PLAYER_X,
  y: HEIGHT / 2 - PADDLE_HEIGHT / 2,
  width: PADDLE_WIDTH,
  height: PADDLE_HEIGHT,
  targetY: HEIGHT / 2 - PADDLE_HEIGHT / 2,
};

let ai = {
  x: AI_X,
  y: HEIGHT / 2 - PADDLE_HEIGHT / 2,
  width: PADDLE_WIDTH,
  height: PADDLE_HEIGHT,
  speed: 5.5,
};

let ball = {
  x: WIDTH / 2 - BALL_SIZE / 2,
  y: HEIGHT / 2 - BALL_SIZE / 2,
  size: BALL_SIZE,
  speed: BALL_SPEED,
  dx: 0,
  dy: 0,
};

let playerScore = 0, aiScore = 0;

// Utility: clamp value between min and max
function clamp(val, min, max) {
  return Math.max(min, Math.min(val, max));
}

// Initialize ball direction and speed
function resetBall(servingToLeft = Math.random() > 0.5) {
  ball.x = WIDTH / 2 - BALL_SIZE / 2;
  ball.y = HEIGHT / 2 - BALL_SIZE / 2;
  // Random angle between -45 and 45 degrees or 135 and 225 degrees
  let angle = (Math.random() * Math.PI / 2) - Math.PI / 4;
  if (!servingToLeft) angle += Math.PI;
  ball.dx = Math.cos(angle) * BALL_SPEED;
  ball.dy = Math.sin(angle) * BALL_SPEED;
}

// Mouse controls for player paddle
canvas.addEventListener('mousemove', e => {
  const rect = canvas.getBoundingClientRect();
  const mouseY = e.clientY - rect.top;
  player.targetY = clamp(mouseY - player.height / 2, 0, HEIGHT - player.height);
});

// Draw everything
function draw() {
  // Clear
  ctx.clearRect(0, 0, WIDTH, HEIGHT);

  // Draw middle dashed line
  ctx.setLineDash([18, 16]);
  ctx.strokeStyle = "#fff6";
  ctx.beginPath();
  ctx.moveTo(WIDTH / 2, 0);
  ctx.lineTo(WIDTH / 2, HEIGHT);
  ctx.stroke();
  ctx.setLineDash([]);

  // Draw paddles (rounded)
  ctx.fillStyle = "#fff";
  roundRect(ctx, player.x, player.y, player.width, player.height, PADDLE_RADIUS);
  roundRect(ctx, ai.x, ai.y, ai.width, ai.height, PADDLE_RADIUS);

  // Draw ball (circle style)
  ctx.beginPath();
  ctx.arc(ball.x + ball.size/2, ball.y + ball.size/2, ball.size/2, 0, 2 * Math.PI);
  ctx.fillStyle = "#ffd700";
  ctx.shadowColor = "#ffd700";
  ctx.shadowBlur = 8;
  ctx.fill();
  ctx.shadowBlur = 0;

  // Draw scores
  ctx.font = "bold 38px Arial";
  ctx.fillStyle = "#fff";
  ctx.fillText(playerScore, WIDTH / 2 - 80, 46);
  ctx.fillText(aiScore, WIDTH / 2 + 54, 46);
}

// Rounded rectangle helper
function roundRect(ctx, x, y, w, h, r) {
  ctx.beginPath();
  ctx.moveTo(x+r, y);
  ctx.lineTo(x+w-r, y);
  ctx.quadraticCurveTo(x+w, y, x+w, y+r);
  ctx.lineTo(x+w, y+h-r);
  ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
  ctx.lineTo(x+r, y+h);
  ctx.quadraticCurveTo(x, y+h, x, y+h-r);
  ctx.lineTo(x, y+r);
  ctx.quadraticCurveTo(x, y, x+r, y);
  ctx.closePath();
  ctx.fill();
}

// Update game logic
function update() {
  // Smoothly move player paddle to mouse
  player.y += (player.targetY - player.y) * 0.28;
  player.y = clamp(player.y, 0, HEIGHT - player.height);

  // AI paddle follows ball with some smoothing
  let aiCenter = ai.y + ai.height/2;
  let ballCenter = ball.y + ball.size/2;
  if (Math.abs(aiCenter - ballCenter) > 12) {
    if (aiCenter < ballCenter) {
      ai.y += ai.speed;
    } else {
      ai.y -= ai.speed;
    }
    ai.y = clamp(ai.y, 0, HEIGHT - ai.height);
  }

  // Move ball
  ball.x += ball.dx;
  ball.y += ball.dy;

  // Ball collision with top & bottom
  if (ball.y < 0) {
    ball.y = 0;
    ball.dy *= -1;
  }
  if (ball.y + ball.size > HEIGHT) {
    ball.y = HEIGHT - ball.size;
    ball.dy *= -1;
  }

  // Ball collision with player
  if (
    ball.x < player.x + player.width &&
    ball.x + ball.size > player.x &&
    ball.y + ball.size > player.y &&
    ball.y < player.y + player.height
  ) {
    ball.x = player.x + player.width;
    reflectBall(player);
  }

  // Ball collision with AI
  if (
    ball.x + ball.size > ai.x &&
    ball.x < ai.x + ai.width &&
    ball.y + ball.size > ai.y &&
    ball.y < ai.y + ai.height
  ) {
    ball.x = ai.x - ball.size;
    reflectBall(ai);
  }

  // Ball out of bounds - score
  if (ball.x < 0) {
    aiScore++;
    resetBall(false);
  } else if (ball.x + ball.size > WIDTH) {
    playerScore++;
    resetBall(true);
  }
}

// Ball reflection with angle based on where it hit the paddle
function reflectBall(paddle) {
  // Calculate hit position on paddle (-1 to 1)
  const relativeIntersectY = (ball.y + ball.size/2) - (paddle.y + paddle.height/2);
  const normalized = relativeIntersectY / (paddle.height/2);
  // Max bounce angle: 50 deg
  const maxBounceAngle = Math.PI / 2.7;
  const bounceAngle = normalized * maxBounceAngle;
  // Determine direction: left or right
  const direction = (paddle === player) ? 1 : -1;
  ball.dx = direction * BALL_SPEED * Math.cos(bounceAngle);
  ball.dy = BALL_SPEED * Math.sin(bounceAngle);
}

function gameLoop() {
  update();
  draw();
  requestAnimationFrame(gameLoop);
}

// Start
resetBall();
gameLoop();