Pong vs a Competent Bot

// Pong vs a competent bot. Mouse moves the right paddle; bot tracks ball
// y with a small lag + noise so it's beatable but not stupid. Ball bounce
// angle depends on where it hits the paddle (off-center = steeper).
let W = 0, H = 0;
let bx, by, bvx, bvy;       // ball
let pyL, pyR;                // paddle centers (y)
let scoreL = 0, scoreR = 0;
let serveTimer = 0;          // >0 means freeze + countdown to serve
let shake = 0;               // screen-shake magnitude
let particles;               // {x,y,vx,vy,life}
let pCount = 0;
const PMAX = 80;
const PADW = 10;
const PADH = 64;
const BALLR = 6;
const SPEED0 = 280;          // initial ball speed (px/s)
const SPEED_MAX = 620;
const BOT_LAG = 0.18;        // seconds — bot's prediction lag
const BOT_NOISE = 22;        // px of jitter in bot's target
const BOT_VMAX = 360;        // px/s — bot's max paddle speed
let botTarget = 0;
let botTargetTimer = 0;

function reseed(dir) {
  bx = W / 2; by = H / 2;
  const angle = (Math.random() - 0.5) * 0.6; // -0.3..0.3 rad
  bvx = Math.cos(angle) * SPEED0 * (dir || (Math.random() < 0.5 ? -1 : 1));
  bvy = Math.sin(angle) * SPEED0;
  serveTimer = 0.7;
}

function init({ canvas, ctx, width, height, input }) {
  W = width; H = height;
  pyL = H / 2; pyR = H / 2;
  scoreL = 0; scoreR = 0;
  shake = 0;
  particles = new Float32Array(PMAX * 5); // x,y,vx,vy,life
  pCount = 0;
  botTarget = H / 2;
  botTargetTimer = 0;
  reseed(0);
}

function burst(x, y, n) {
  for (let k = 0; k < n; k++) {
    if (pCount >= PMAX) break;
    const a = Math.random() * Math.PI * 2;
    const s = 80 + Math.random() * 180;
    const i = pCount * 5;
    particles[i] = x; particles[i + 1] = y;
    particles[i + 2] = Math.cos(a) * s;
    particles[i + 3] = Math.sin(a) * s;
    particles[i + 4] = 0.45 + Math.random() * 0.25;
    pCount++;
  }
}

function bouncePaddle(side) {
  // side: -1 left paddle, +1 right paddle. Bounce angle from hit offset.
  const py = side < 0 ? pyL : pyR;
  const angle = Math.max(-1, Math.min(1, (by - py) / (PADH / 2))); // ~57 deg
  const speed = Math.min(SPEED_MAX, Math.hypot(bvx, bvy) * 1.04 + 6);
  bvx = -side * Math.cos(angle) * speed;
  bvy = Math.sin(angle) * speed;
  bx = side < 0 ? PADW + BALLR + 0.5 : W - PADW - BALLR - 0.5;
  burst(bx, by, 10);
}

function tick({ dt, time, ctx, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; }
  if (dt > 0.05) dt = 0.05; // clamp huge dt (tab switch)

  // Reset on click or Escape
  const clicks = input.consumeClicks ? input.consumeClicks() : [];
  if (clicks.length || (input.justPressed && input.justPressed("Escape"))) {
    scoreL = 0; scoreR = 0; shake = 0; pCount = 0;
    reseed(0);
  }

  // Player paddle follows mouseY directly (snappy is good for Pong)
  if (typeof input.mouseY === "number") {
    pyR = Math.max(PADH / 2, Math.min(H - PADH / 2, input.mouseY));
  }

  // Bot AI: predict ball y at left wall (with wall reflections), then add
  // lag + noise so the bot is competent but beatable.
  botTargetTimer -= dt;
  if (botTargetTimer <= 0) {
    if (bvx < 0) {
      const t = (PADW - bx) / bvx;
      const span = H - 2 * BALLR;
      const raw = ((by + bvy * t) - BALLR);
      let ny = ((raw % (2 * span)) + 2 * span) % (2 * span);
      if (ny > span) ny = 2 * span - ny;
      botTarget = ny + BALLR + (Math.random() * 2 - 1) * BOT_NOISE;
    } else {
      botTarget = H / 2 + (Math.random() * 2 - 1) * BOT_NOISE * 0.5;
    }
    botTargetTimer = BOT_LAG;
  }
  const dy = botTarget - pyL;
  const step = Math.sign(dy) * Math.min(Math.abs(dy), BOT_VMAX * dt);
  pyL = Math.max(PADH / 2, Math.min(H - PADH / 2, pyL + step));

  // Serve pause
  if (serveTimer > 0) {
    serveTimer -= dt;
  } else {
    bx += bvx * dt;
    by += bvy * dt;

    // Walls (top/bottom)
    if (by < BALLR) { by = BALLR; bvy = -bvy; burst(bx, by, 4); }
    else if (by > H - BALLR) { by = H - BALLR; bvy = -bvy; burst(bx, by, 4); }

    // Left paddle
    if (bx - BALLR < PADW && bvx < 0) {
      if (Math.abs(by - pyL) < PADH / 2 + BALLR) bouncePaddle(-1);
    }
    // Right paddle
    if (bx + BALLR > W - PADW && bvx > 0) {
      if (Math.abs(by - pyR) < PADH / 2 + BALLR) bouncePaddle(1);
    }

    // Goals
    if (bx < -BALLR) {
      scoreR++;
      shake = 14;
      burst(0, by, 16);
      reseed(1);
    } else if (bx > W + BALLR) {
      scoreL++;
      shake = 14;
      burst(W, by, 16);
      reseed(-1);
    }
  }

  // Update particles (swap-and-pop on expire)
  for (let i = 0; i < pCount; i++) {
    const o = i * 5;
    particles[o + 4] -= dt;
    if (particles[o + 4] <= 0) {
      const lo = (pCount - 1) * 5;
      for (let k = 0; k < 5; k++) particles[o + k] = particles[lo + k];
      pCount--; i--; continue;
    }
    particles[o] += particles[o + 2] * dt;
    particles[o + 1] += particles[o + 3] * dt;
    particles[o + 3] += 220 * dt;
  }

  // Shake decay
  shake *= Math.pow(0.001, dt); // exp decay; ~half-life ~0.1s
  if (shake < 0.05) shake = 0;
  const sx = (Math.random() - 0.5) * shake;
  const sy = (Math.random() - 0.5) * shake;

  // ---- Render ----
  // Background fade (trails)
  ctx.fillStyle = "rgba(8, 10, 14, 0.55)";
  ctx.fillRect(0, 0, W, H);

  ctx.save();
  ctx.translate(sx, sy);

  // Mid dashed line
  ctx.strokeStyle = "rgba(180, 200, 255, 0.18)";
  ctx.lineWidth = 2;
  ctx.setLineDash([8, 10]);
  ctx.beginPath();
  ctx.moveTo(W / 2, 0); ctx.lineTo(W / 2, H);
  ctx.stroke();
  ctx.setLineDash([]);

  // Score
  ctx.fillStyle = "rgba(220, 230, 255, 0.55)";
  ctx.font = "bold 42px ui-sans-serif, system-ui, sans-serif";
  ctx.textAlign = "center";
  ctx.fillText(String(scoreL), W / 2 - 50, 50);
  ctx.fillText(String(scoreR), W / 2 + 50, 50);

  // Paddles
  ctx.fillStyle = "#e7f0ff";
  ctx.fillRect(0, pyL - PADH / 2, PADW, PADH);
  ctx.fillRect(W - PADW, pyR - PADH / 2, PADW, PADH);

  // Ball (with glow)
  ctx.fillStyle = "rgba(255, 220, 120, 0.18)";
  ctx.beginPath(); ctx.arc(bx, by, BALLR * 2.6, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = "#fff3c4";
  ctx.beginPath(); ctx.arc(bx, by, BALLR, 0, Math.PI * 2); ctx.fill();

  // Particles
  for (let i = 0; i < pCount; i++) {
    const o = i * 5;
    const life = particles[o + 4];
    const a = Math.max(0, Math.min(1, life / 0.6));
    ctx.fillStyle = `rgba(255, ${180 + ((time * 80) | 0) % 60}, 120, ${a})`;
    ctx.fillRect(particles[o] - 1.5, particles[o + 1] - 1.5, 3, 3);
  }

  // Footer hint
  ctx.font = "11px ui-sans-serif, system-ui, sans-serif";
  ctx.textAlign = "center";
  ctx.fillStyle = "rgba(180, 200, 255, 0.45)";
  ctx.fillText("move mouse to play  ·  click or Esc to reset", W / 2, H - 10);

  ctx.restore();
}