Build a Snake game as a polished single-page web app in this directory: index.html, sty…

claude-codeclaude-fable-5 · 55 steps · 10m 16s · 3 filessession 0c9ba00c-6f2@agentsage
Build a Snake game as a polished single-page web app in this directory: index.html, style.css, game.js (vanilla JS, no deps). Canvas grid; snake grows on eating food; dies on wall or self collision; live score and a high score persisted in localStorage; speed ramps up as the score climbs; arrow keys AND wasd; spacebar to pause; a game-over overlay with a restart button; and a sharp dark neon theme. Make it genuinely nice.
same matchpi · 18 steps codex · 73 steps claude-code · 55 steps antigravity · 22 steps
compare in arena
step 08 / 55
game.jschange 1/2
"use strict";
 
(() => {
  // ---------- constants ----------
  const COLS = 21;
  const ROWS = 21;
  const CELL = 24;
  const W = COLS * CELL;
  const H = ROWS * CELL;
 
  const START_MS = 150; // tick length at score 0
  const MIN_MS = 68; // fastest tick
  const MS_PER_FOOD = 3; // speed-up per orb eaten
  const POINTS = 10;
  const DEATH_MS = 750; // dying animation before the overlay
  const BEST_KEY = "neon-snake-best";
 
  const State = Object.freeze({
    READY: 0,
    RUNNING: 1,
    PAUSED: 2,
    DYING: 3,
    OVER: 4,
  });
 
  const RIGHT = { x: 1, y: 0 };
  const DIRS = {
    ArrowUp: { x: 0, y: -1 },
    ArrowDown: { x: 0, y: 1 },
    ArrowLeft: { x: -1, y: 0 },
    ArrowRight: { x: 1, y: 0 },
    w: { x: 0, y: -1 },
    s: { x: 0, y: 1 },
    a: { x: -1, y: 0 },
    d: { x: 1, y: 0 },
  };
 
  // ---------- elements ----------
  const canvas = document.getElementById("game");
  const ctx = canvas.getContext("2d");
 
  const elScore = document.getElementById("score");
  const elBest = document.getElementById("best");
  const elSpeed = document.getElementById("speed");
  const elMute = document.getElementById("mute-state");
 
  const overlay = document.getElementById("overlay");
  const panels = {
    start: document.getElementById("panel-start"),
    pause: document.getElementById("panel-pause"),
    over: document.getElementById("panel-over"),
  };
  const elOverTitle = document.getElementById("over-title");
  const elFinalScore = document.getElementById("final-score");
  const elBadge = document.getElementById("badge-best");
 
  // crisp rendering on hi-dpi screens
  const dpr = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
  canvas.width = W * dpr;
  canvas.height = H * dpr;
  ctx.scale(dpr, dpr);
 
  // ---------- state ----------
  let state = State.READY;
  let snake, dir, queue, food, eaten, score;
  let best = 0;
  let newBest = false;
  let won = false;
  let diedAt = 0;
  let particles = [];
  let floaters = [];
 
  try {
    best = Number(localStorage.getItem(BEST_KEY)) || 0;
  } catch (_) {
    /* storage unavailable — play without a persistent best */
  }
 
  function resetRun() {
    const cy = Math.floor(ROWS / 2);
    snake = [
      { x: 9, y: cy },
      { x: 8, y: cy },
      { x: 7, y: cy },
      { x: 6, y: cy },
    ];
    dir = { ...RIGHT };
    queue = [];
    eaten = 0;
    score = 0;
    newBest = false;
    won = false;
    particles = [];
    floaters = [];
    spawnFood();
    updateHud();
  }
 
  function tickMs() {
    return Math.max(MIN_MS, START_MS - eaten * MS_PER_FOOD);
  }
 
  function spawnFood() {
    const taken = new Set(snake.map((s) => s.x + s.y * COLS));
    const free = [];
    for (let i = 0; i < COLS * ROWS; i++) {
      if (!taken.has(i)) free.push(i);
    }
    const i = free[Math.floor(Math.random() * free.length)];
    food = { x: i % COLS, y: Math.floor(i / COLS) };
  }
 
  // ---------- game flow ----------
  function startGame(initialDir) {
    resetRun();
    if (initialDir && initialDir.x !== -RIGHT.x) dir = { ...initialDir };
    state = State.RUNNING;
    hideOverlay();
  }
 
  function pauseGame() {
    state = State.PAUSED;
    showPanel("pause");
    beep(300, 0.06, "sine", 0.035);
  }
 
  function resumeGame() {
    state = State.RUNNING;
    hideOverlay();
    beep(420, 0.06, "sine", 0.035);
  }
 
  function die() {
    state = State.DYING;
    diedAt = performance.now();
    burst(snake[0], ["#ffffff", "#22ffd3", "#ff2e88"], 26);
    beep(220, 0.4, "sawtooth", 0.06, 60);
  }
 
  function win() {
    won = true;
    food = null;
    state = State.DYING; // reuse the delay, minus the crash flicker
    diedAt = performance.now();
    burst(snake[0], ["#ffffff", "#22ffd3", "#ffd6e8"], 40);
    beep(660, 0.5, "triangle", 0.05, 1320);
  }
 
  function finishRun() {
    state = State.OVER;
    if (score > best) {
      best = score;
      newBest = true;
      saveBest();
    }
    updateHud();
    elOverTitle.textContent = won ? "PERFECT!" : "GAME OVER";
    elFinalScore.textContent = score;
    elBadge.hidden = !newBest;
    showPanel("over");
  }
 
  function saveBest() {
    try {
      localStorage.setItem(BEST_KEY, String(best));
    } catch (_) {
      /* ignore */
    }
  }
 
  function step() {
    if (queue.length) {
      const next = queue.shift();
      if (next.x !== -dir.x || next.y !== -dir.y) dir = next;
    }
 
    const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
 
    if (head.x < 0 || head.x >= COLS || head.y < 0 || head.y >= ROWS) {
      return die();
    }
    // The tail cell is safe to enter: it moves away this same tick
    // (entering it while eating is impossible — food never sits on the snake).
    for (let i = 0; i < snake.length - 1; i++) {
      if (snake[i].x === head.x && snake[i].y === head.y) return die();
    }
 
    snake.unshift(head);
    if (food && head.x === food.x && head.y === food.y) {
      eat();
    } else {
      snake.pop();
    }
  }
 
  function eat() {
    score += POINTS;
    eaten++;
    if (score > best) {
      best = score;
      newBest = true;
      saveBest();
    }
    addFloater(food, `+${POINTS}`);
    burst(food, ["#ff2e88", "#ffd6e8", "#ff7ab3"], 12);
    beep(440 + Math.min(eaten * 8, 320), 0.09, "square", 0.05, 880);
    updateHud();
    bumpStat(elScore);
 
    if (snake.length === COLS * ROWS) {
      win();
    } else {
      spawnFood();
    }
  }
 
  // ---------- input ----------
  function enqueue(d) {
    const last = queue.length ? queue[queue.length - 1] : dir;
    const same = d.x === last.x && d.y === last.y;
    const reverse = d.x === -last.x && d.y === -last.y;
    if (same || reverse) return;
    if (queue.length < 3) queue.push(d);
  }
 
  function onSpace() {
    if (state === State.READY) startGame();
    else if (state === State.RUNNING) pauseGame();
    else if (state === State.PAUSED) resumeGame();
    else if (state === State.OVER) startGame();
  }
 
  document.addEventListener("keydown", (e) => {
    if (e.metaKey || e.ctrlKey || e.altKey) return;
    const key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
 
    if (key === " ") {
      e.preventDefault();
      if (!e.repeat) onSpace();
      return;
    }
    if (key === "enter") {
      if (state === State.READY || state === State.OVER) startGame();
      return;
    }
    if (key === "m") {
      muted = !muted;
      elMute.textContent = muted ? "off" : "on";
      return;
    }
 
    const d = DIRS[key] || DIRS[e.key];
    if (!d) return;
    e.preventDefault();
    if (e.repeat) return;
 
    if (state === State.READY) startGame(d);
    else if (state === State.RUNNING) enqueue(d);
  });
 
  for (const [id, fn] of [
    ["btn-play", () => startGame()],
    ["btn-resume", resumeGame],
    ["btn-restart", () => startGame()],
  ]) {
    const btn = document.getElementById(id);
    btn.addEventListener("click", () => {
      btn.blur();
      fn();
    });
  }
 
  // stepping away shouldn't cost a run
  window.addEventListener("blur", () => {
    if (state === State.RUNNING) pauseGame();
  });
  document.addEventListener("visibilitychange", () => {
    if (document.hidden && state === State.RUNNING) pauseGame();
  });
 
  // ---------- sound (tiny synth blips, lazy-init on first use) ----------
  let audioCtx = null;
  let muted = false;
 
  function beep(freq, dur = 0.08, type = "square", vol = 0.04, slideTo = 0) {
    if (muted) return;
    try {
      audioCtx =
        audioCtx || new (window.AudioContext || window.webkitAudioContext)();
      if (audioCtx.state === "suspended") audioCtx.resume();
      const t0 = audioCtx.currentTime;
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      osc.type = type;
      osc.frequency.setValueAtTime(freq, t0);
      if (slideTo) osc.frequency.exponentialRampToValueAtTime(slideTo, t0 + dur);
      gain.gain.setValueAtTime(vol, t0);
      gain.gain.exponentialRampToValueAtTime(0.0001, t0 + dur);
      osc.connect(gain).connect(audioCtx.destination);
      osc.start(t0);
      osc.stop(t0 + dur + 0.02);
    } catch (_) {
      /* no audio — the game plays fine silent */
    }
  }
 
  // ---------- HUD / overlay ----------
  function updateHud() {
    elScore.textContent = score;
    elBest.textContent = best;
    elSpeed.textContent = (START_MS / tickMs()).toFixed(1) + "×";
  }
 
  function bumpStat(el) {
    el.classList.remove("bump");
    void el.offsetWidth; // restart the animation
    el.classList.add("bump");
  }
 
  function showPanel(name) {
    for (const [key, panel] of Object.entries(panels)) {
      panel.hidden = key !== name;
    }
    overlay.classList.add("show");
  }
 
  function hideOverlay() {
    overlay.classList.remove("show");
  }
 
  // ---------- effects ----------
  function cellCenter(cell) {
    return { x: cell.x * CELL + CELL / 2, y: cell.y * CELL + CELL / 2 };
  }
 
  function burst(cell, colors, count) {
    const c = cellCenter(cell);
    for (let i = 0; i < count; i++) {
      const angle = Math.random() * Math.PI * 2;
      const speed = 0.04 + Math.random() * 0.14;
      particles.push({
        x: c.x,
        y: c.y,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed,
        life: 450 + Math.random() * 350,
        maxLife: 800,
        color: colors[i % colors.length],
      });
    }
  }
 
  function addFloater(cell, text) {
    const c = cellCenter(cell);
    floaters.push({ x: c.x, y: c.y - 6, text, life: 900, maxLife: 900 });
  }
 
  function updateFx(dt) {
    for (const p of particles) {
      p.x += p.vx * dt;
      p.y += p.vy * dt;
      p.vx *= 0.985;
      p.vy *= 0.985;
      p.life -= dt;
    }
    particles = particles.filter((p) => p.life > 0);
 
    for (const f of floaters) {
      f.y -= 0.028 * dt;
      f.life -= dt;
    }
    floaters = floaters.filter((f) => f.life > 0);
  }
 
  // ---------- drawing ----------
  function draw(now) {
    ctx.save();
 
    // screen shake on impact
    if (state === State.DYING && !won) {
      const elapsed = now - diedAt;
      if (elapsed < 400) {
        const mag = 6 * (1 - elapsed / 400);
        ctx.translate((Math.random() * 2 - 1) * mag, (Math.random() * 2 - 1) * mag);
      }
    }
 
    drawBoard();
    if (food) drawFood(now);
    drawSnake(now);
    drawParticles();
    drawFloaters();
 
    ctx.restore();
  }
 
  function drawBoard() {
    ctx.fillStyle = "#070a14";
    ctx.fillRect(-8, -8, W + 16, H + 16);
 
    ctx.strokeStyle = "rgba(34, 255, 211, 0.05)";
    ctx.lineWidth = 1;
    ctx.beginPath();
    for (let i = 1; i < COLS; i++) {
      ctx.moveTo(i * CELL + 0.5, 0);
      ctx.lineTo(i * CELL + 0.5, H);
    }
    for (let j = 1; j < ROWS; j++) {
      ctx.moveTo(0, j * CELL + 0.5);
      ctx.lineTo(W, j * CELL + 0.5);
    }
    ctx.stroke();
  }
 
  function drawFood(now) {
    const c = cellCenter(food);
    const pulse = 1 + Math.sin(now / 170) * 0.12;
    const r = CELL * 0.3 * pulse;
 
    ctx.save();
    // halo ring
    ctx.strokeStyle = `rgba(255, 46, 136, ${0.1 + 0.08 * pulse})`;
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.arc(c.x, c.y, r * 1.9, 0, Math.PI * 2);
    ctx.stroke();
    // glowing orb
    ctx.shadowColor = "#ff2e88";
    ctx.shadowBlur = 18;
    ctx.fillStyle = "#ff2e88";
    ctx.beginPath();
    ctx.arc(c.x, c.y, r, 0, Math.PI * 2);
    ctx.fill();
    // hot core
    ctx.shadowBlur = 0;
    ctx.fillStyle = "#ffd6e8";
    ctx.beginPath();
    ctx.arc(c.x, c.y, r * 0.42, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  }
 
  function roundedCell(cell, inset, radius) {
    const x = cell.x * CELL + inset;
    const y = cell.y * CELL + inset;
    const s = CELL - inset * 2;
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.arcTo(x + s, y, x + s, y + s, radius);
    ctx.arcTo(x + s, y + s, x, y + s, radius);
    ctx.arcTo(x, y + s, x, y, radius);
    ctx.arcTo(x, y, x + s, y, radius);
    ctx.closePath();
  }
 
  function drawSnake(now) {
    const len = snake.length;
    const crashing = state === State.DYING && !won;
    const flash = crashing && Math.floor((now - diedAt) / 70) % 2 === 0;
 
    ctx.save();
    for (let i = len - 1; i >= 0; i--) {
      const t = len > 1 ? i / (len - 1) : 0;
      let fill = `hsl(${168 + t * 24}, 100%, ${62 - t * 20}%)`;
      let glow = "rgba(34, 255, 211, 0.9)";
      if (crashing) {
        fill = flash ? "#ffffff" : "#ff4d6d";
        glow = "#ff2e88";
      }
      ctx.shadowColor = glow;
      ctx.shadowBlur = i === 0 ? 16 : 9;
      ctx.fillStyle = fill;
      roundedCell(snake[i], 1.5, 6);
      ctx.fill();
    }
    ctx.restore();
 
    if (!crashing) drawEyes();
  }
 
  function drawEyes() {
    const c = cellCenter(snake[0]);
    // forward along the travel direction, offset to either side of it
    const fx = dir.x * 4.5;
    const fy = dir.y * 4.5;
    const px = -dir.y * 4;
    const py = dir.x * 4;
    ctx.fillStyle = "#04131c";
    for (const side of [1, -1]) {
      ctx.beginPath();
      ctx.arc(c.x + fx + px * side, c.y + fy + py * side, 2.2, 0, Math.PI * 2);
      ctx.fill();
    }
  }
 
  function drawParticles() {
    ctx.save();
    for (const p of particles) {
      ctx.globalAlpha = Math.max(0, p.life / p.maxLife);
      ctx.shadowColor = p.color;
      ctx.shadowBlur = 8;
      ctx.fillStyle = p.color;
      ctx.fillRect(p.x - 1.5, p.y - 1.5, 3, 3);
    }
    ctx.restore();
  }
 
  function drawFloaters() {
    ctx.save();
    ctx.font = `700 13px ${getComputedStyle(document.body).fontFamily}`;
    ctx.textAlign = "center";
    for (const f of floaters) {
      ctx.globalAlpha = Math.max(0, f.life / f.maxLife);
      ctx.shadowColor = "#22ffd3";
      ctx.shadowBlur = 10;
      ctx.fillStyle = "#d7fff6";
      ctx.fillText(f.text, f.x, f.y);
    }
    ctx.restore();
  }
 
  // ---------- main loop ----------
  let lastFrame = 0;
  let acc = 0;
 
  function frame(now) {
    requestAnimationFrame(frame);
    const dt = Math.min(50, now - lastFrame);
    lastFrame = now;
 
    if (state === State.RUNNING) {
      acc += dt;
      while (acc >= tickMs()) {
        acc -= tickMs();
        step();
        if (state !== State.RUNNING) {
          acc = 0;
          break;
        }
      }
    } else if (state === State.DYING && now - diedAt >= DEATH_MS) {
      finishRun();
    }
 
    updateFx(dt);
    draw(now);
  }
 
  // ---------- boot ----------
  resetRun();
  showPanel("start");
  requestAnimationFrame(frame);
})();
 
554 linesjs
Writes …/game.js
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @agentsage.
#claude #claude-code #claude-fable-5 #css #game #graphics #html #javascript #medium #ui
snake
← all sessions