Snake

const GRID = 20;
let snake, dir, nextDir, apple, score, best, dead;
let stepAcc, stepInterval;
let W = 0, H = 0;
let flashT = 0;

function placeApple() {
  const occ = new Uint8Array(GRID * GRID);
  for (let i = 0; i < snake.length; i++) occ[snake[i].y * GRID + snake[i].x] = 1;
  const free = [];
  for (let i = 0; i < GRID * GRID; i++) if (!occ[i]) free.push(i);
  if (!free.length) { apple = null; return; }
  const k = free[(Math.random() * free.length) | 0];
  apple = { x: k % GRID, y: (k / GRID) | 0 };
}

function reset() {
  snake = [
    { x: 10, y: 10 },
    { x: 9, y: 10 },
    { x: 8, y: 10 },
  ];
  dir = { x: 1, y: 0 };
  nextDir = { x: 1, y: 0 };
  score = 0;
  dead = false;
  stepAcc = 0;
  stepInterval = 0.16;
  flashT = 0;
  placeApple();
}

function init({ canvas, ctx, width, height }) {
  W = width; H = height;
  best = 0;
  reset();
}

function tryTurn(nx, ny) {
  if (nx === -dir.x && ny === -dir.y) return;
  nextDir = { x: nx, y: ny };
}

function handleInput(input) {
  if (dead) return;
  if (input.justPressed("ArrowUp") || input.justPressed("w")) tryTurn(0, -1);
  else if (input.justPressed("ArrowDown") || input.justPressed("s")) tryTurn(0, 1);
  else if (input.justPressed("ArrowLeft") || input.justPressed("a")) tryTurn(-1, 0);
  else if (input.justPressed("ArrowRight") || input.justPressed("d")) tryTurn(1, 0);
}

function handleClicks(input) {
  const clicks = input.consumeClicks();
  if (!clicks || !clicks.length) return;
  if (dead) {
    reset();
    return;
  }
  const c = clicks[clicks.length - 1];
  const cx = W / 2, cy = H / 2;
  const dx = c.x - cx, dy = c.y - cy;
  if (Math.abs(dx) > Math.abs(dy)) {
    tryTurn(dx > 0 ? 1 : -1, 0);
  } else {
    tryTurn(0, dy > 0 ? 1 : -1);
  }
}

function stepGame() {
  dir = nextDir;
  const head = snake[0];
  const nh = { x: head.x + dir.x, y: head.y + dir.y };
  if (nh.x < 0 || nh.x >= GRID || nh.y < 0 || nh.y >= GRID) {
    dead = true;
    if (score > best) best = score;
    flashT = 1;
    return;
  }
  for (let i = 0; i < snake.length - 1; i++) {
    if (snake[i].x === nh.x && snake[i].y === nh.y) {
      dead = true;
      if (score > best) best = score;
      flashT = 1;
      return;
    }
  }
  snake.unshift(nh);
  if (apple && nh.x === apple.x && nh.y === apple.y) {
    score++;
    stepInterval = Math.max(0.05, stepInterval * 0.95);
    placeApple();
  } else {
    snake.pop();
  }
}

function tick({ dt, ctx, width, height, input }) {
  W = width; H = height;
  handleInput(input);
  handleClicks(input);

  if (!dead) {
    stepAcc += dt;
    while (stepAcc >= stepInterval) {
      stepAcc -= stepInterval;
      stepGame();
      if (dead) break;
    }
  }

  // playfield: centered square
  const size = Math.min(W, H) - 24;
  const ox = (W - size) / 2;
  const oy = (H - size) / 2;
  const cell = size / GRID;

  // background
  ctx.fillStyle = "#0a0e14";
  ctx.fillRect(0, 0, W, H);

  // board
  ctx.fillStyle = "#10151c";
  ctx.fillRect(ox, oy, size, size);

  // subtle grid
  ctx.strokeStyle = "rgba(255,255,255,0.04)";
  ctx.lineWidth = 1;
  for (let i = 1; i < GRID; i++) {
    const p = i * cell;
    ctx.beginPath(); ctx.moveTo(ox + p, oy); ctx.lineTo(ox + p, oy + size); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(ox, oy + p); ctx.lineTo(ox + size, oy + p); ctx.stroke();
  }

  // apple
  if (apple) {
    ctx.fillStyle = "#ef4444";
    const ax = ox + apple.x * cell;
    const ay = oy + apple.y * cell;
    ctx.beginPath();
    ctx.arc(ax + cell / 2, ay + cell / 2, cell * 0.38, 0, Math.PI * 2);
    ctx.fill();
  }

  // snake
  for (let i = snake.length - 1; i >= 0; i--) {
    const s = snake[i];
    const t = i / Math.max(1, snake.length - 1);
    const hue = 140 - t * 30;
    const light = i === 0 ? 60 : 45 - t * 15;
    ctx.fillStyle = `hsl(${hue},70%,${light}%)`;
    const pad = i === 0 ? 1 : 2;
    ctx.fillRect(ox + s.x * cell + pad, oy + s.y * cell + pad, cell - pad * 2, cell - pad * 2);
  }

  // border
  ctx.strokeStyle = "rgba(255,255,255,0.15)";
  ctx.lineWidth = 2;
  ctx.strokeRect(ox, oy, size, size);

  // HUD
  ctx.fillStyle = "#e6edf3";
  ctx.font = "bold 16px sans-serif";
  ctx.textBaseline = "top";
  ctx.textAlign = "left";
  ctx.fillText(`Score ${score}`, 10, 8);
  ctx.textAlign = "right";
  ctx.fillText(`Best ${best}`, W - 10, 8);
  ctx.textAlign = "left";

  // death overlay
  if (dead) {
    if (flashT > 0) flashT = Math.max(0, flashT - dt * 2);
    ctx.fillStyle = `rgba(239,68,68,${0.15 + flashT * 0.25})`;
    ctx.fillRect(ox, oy, size, size);
    ctx.fillStyle = "#e6edf3";
    ctx.textAlign = "center";
    ctx.font = "bold 28px sans-serif";
    ctx.fillText("Game Over", W / 2, H / 2 - 20);
    ctx.font = "14px sans-serif";
    ctx.fillText(`Score ${score} — Click or tap to restart`, W / 2, H / 2 + 14);
    ctx.textAlign = "left";
  }
}