Build a retro arcade Breakout game as a static page in this directory: index.html, styl…

claude-codeclaude-fable-5 · 68 steps · 14m 38s · 6 filessession 1b89d383-8f9@patrick-toulme
Build a retro arcade Breakout game as a static page in this directory: index.html, style.css, game.js. Canvas gameplay with paddle, ball, brick rows, lives, score, levels with increasing speed, particle effects on brick hits, WebAudio sound with a mute toggle, pause overlay, high score in localStorage, dark neon theme. Also create tests.html + tests.js exercising the core physics/collision logic. Run the tests headless with node and fix what fails.
same matchclaude-code · 68 steps codex · 74 steps opencode · 36 steps pi · 24 steps antigravity · 22 steps
compare in arena
step 66 / 68
game.jschange 2/2
/* NEON BREAKOUT
 *
 * The Breakout namespace below holds all pure physics/collision/level logic
 * and has no DOM or browser dependencies, so it can be required and unit
 * tested headlessly under Node (see tests.js / tests.html). The canvas game
 * only boots when a #game element exists in the page.
 */
'use strict';
 
const Breakout = (() => {
  const NEON_COLORS = ['#ff2d95', '#ff7a00', '#ffe600', '#39ff14', '#00e5ff', '#b026ff'];
 
  // Max deflection from vertical when the ball strikes a paddle edge.
  const MAX_BOUNCE_ANGLE = Math.PI / 3;
 
  function clamp(v, lo, hi) {
    return Math.max(lo, Math.min(hi, v));
  }
 
  function rowColor(row) {
    return NEON_COLORS[row % NEON_COLORS.length];
  }
 
  // ball: {x, y, r, vx, vy} — velocities in px/s, dt in seconds.
  function stepBall(ball, dt) {
    ball.x += ball.vx * dt;
    ball.y += ball.vy * dt;
    return ball;
  }
 
  // Reflects the ball off the side/top walls in place. Returns the walls
  // touched this step; 'bottom' means the ball fell out (no reflection).
  function collideWalls(ball, width, height) {
    const events = [];
    if (ball.x - ball.r < 0) {
      ball.x = ball.r;
      ball.vx = Math.abs(ball.vx);
      events.push('left');
    } else if (ball.x + ball.r > width) {
      ball.x = width - ball.r;
      ball.vx = -Math.abs(ball.vx);
      events.push('right');
    }
    if (ball.y - ball.r < 0) {
      ball.y = ball.r;
      ball.vy = Math.abs(ball.vy);
      events.push('top');
    } else if (ball.y - ball.r > height) {
      events.push('bottom');
    }
    return events;
  }
 
  function circleRectOverlap(cx, cy, r, rect) {
    const nx = clamp(cx, rect.x, rect.x + rect.w);
    const ny = clamp(cy, rect.y, rect.y + rect.h);
    const dx = cx - nx;
    const dy = cy - ny;
    return dx * dx + dy * dy <= r * r;
  }
 
  // Bounce angle depends on where the ball strikes the paddle: center goes
  // straight up, edges deflect up to MAX_BOUNCE_ANGLE. Speed is preserved.
  // Only balls moving downward can be hit. Returns true if bounced.
  function collidePaddle(ball, paddle) {
    if (ball.vy <= 0) return false;
    if (!circleRectOverlap(ball.x, ball.y, ball.r, paddle)) return false;
    const speed = Math.hypot(ball.vx, ball.vy);
    const hit = clamp((ball.x - (paddle.x + paddle.w / 2)) / (paddle.w / 2), -1, 1);
    const angle = hit * MAX_BOUNCE_ANGLE;
    ball.vx = speed * Math.sin(angle);
    ball.vy = -speed * Math.cos(angle);
    ball.y = paddle.y - ball.r;
    return true;
  }
 
  // Reflects the ball off a live brick along the axis of least penetration.
  // Returns true on contact (does not damage the brick — see hitBrick).
  function collideBrick(ball, brick) {
    if (!brick.alive) return false;
    if (!circleRectOverlap(ball.x, ball.y, ball.r, brick)) return false;
    const overlapLeft = ball.x + ball.r - brick.x;
    const overlapRight = brick.x + brick.w - (ball.x - ball.r);
    const overlapTop = ball.y + ball.r - brick.y;
    const overlapBottom = brick.y + brick.h - (ball.y - ball.r);
    if (Math.min(overlapLeft, overlapRight) < Math.min(overlapTop, overlapBottom)) {
      ball.vx = overlapLeft < overlapRight ? -Math.abs(ball.vx) : Math.abs(ball.vx);
    } else {
      ball.vy = overlapTop < overlapBottom ? -Math.abs(ball.vy) : Math.abs(ball.vy);
    }
    return true;
  }
 
  function hitBrick(brick) {
    if (!brick.alive) return { destroyed: false, points: 0 };
    brick.hp -= 1;
    if (brick.hp <= 0) {
      brick.alive = false;
      return { destroyed: true, points: brick.points };
    }
    return { destroyed: false, points: 0 };
  }
 
  function movePaddle(x, dir, speed, dt, width, paddleW) {
    return clamp(x + dir * speed * dt, 0, width - paddleW);
  }
 
  function ballSpeedForLevel(base, level, perLevel = 0.14) {
    return base * (1 + (level - 1) * perLevel);
  }
 
  function levelRows(level, maxRows = 8) {
    return Math.min(3 + level, maxRows);
  }
 
  function buildLevel(level, opts = {}) {
    const width = opts.width !== undefined ? opts.width : 800;
    const cols = opts.cols !== undefined ? opts.cols : 10;
    const rows = opts.rows !== undefined ? opts.rows : levelRows(level);
    const gap = opts.gap !== undefined ? opts.gap : 6;
    const margin = opts.margin !== undefined ? opts.margin : 40;
    const top = opts.top !== undefined ? opts.top : 70;
    const brickH = opts.brickH !== undefined ? opts.brickH : 22;
    const brickW = (width - margin * 2 - gap * (cols - 1)) / cols;
    const bricks = [];
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        // From level 3 on, the top row takes two hits.
        const hp = r === 0 && level >= 3 ? 2 : 1;
        bricks.push({
          x: margin + c * (brickW + gap),
          y: top + r * (brickH + gap),
          w: brickW,
          h: brickH,
          row: r,
          col: c,
          hp,
          maxHp: hp,
          points: (rows - r) * 10,
          alive: true,
        });
      }
    }
    return bricks;
  }
 
  // Serve within ±30° of straight up. rand is injectable for tests.
  function launchVelocity(speed, rand = Math.random) {
    const angle = -Math.PI / 2 + (rand() - 0.5) * (Math.PI / 3);
    return { vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed };
  }
 
  function spawnParticles(x, y, color, count = 14, rand = Math.random) {
    const parts = [];
    for (let i = 0; i < count; i++) {
      const angle = rand() * Math.PI * 2;
      const speed = 60 + rand() * 240;
      const life = 0.35 + rand() * 0.45;
      parts.push({
        x,
        y,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed - 50,
        life,
        maxLife: life,
        size: 1.5 + rand() * 2.5,
        color,
      });
    }
    return parts;
  }
 
  // Returns a new array holding only the still-living particles.
  function updateParticles(parts, dt, gravity = 520) {
    const alive = [];
    for (const p of parts) {
      p.life -= dt;
      if (p.life <= 0) continue;
      p.x += p.vx * dt;
      p.y += p.vy * dt;
      p.vy += gravity * dt;
      p.vx *= Math.max(0, 1 - 1.2 * dt);
      alive.push(p);
    }
    return alive;
  }
 
  return {
    NEON_COLORS,
    MAX_BOUNCE_ANGLE,
    clamp,
    rowColor,
    stepBall,
    collideWalls,
    circleRectOverlap,
    collidePaddle,
    collideBrick,
    hitBrick,
    movePaddle,
    ballSpeedForLevel,
    levelRows,
    buildLevel,
    launchVelocity,
    spawnParticles,
    updateParticles,
  };
})();
 
/* ------------------------------------------------------------------ */
/* Browser game (skipped entirely under Node / on tests.html)          */
/* ------------------------------------------------------------------ */
 
function initGame() {
  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  const W = canvas.width;
  const H = canvas.height;
 
  const scoreEl = document.getElementById('score');
  const highEl = document.getElementById('high');
  const levelEl = document.getElementById('level');
  const livesEl = document.getElementById('lives');
  const overlay = document.getElementById('overlay');
  const overlayTitle = document.getElementById('overlayTitle');
  const overlayMsg = document.getElementById('overlayMsg');
  const pauseBtn = document.getElementById('pauseBtn');
  const muteBtn = document.getElementById('muteBtn');
 
  const HS_KEY = 'neon-breakout-highscore';
  const MUTE_KEY = 'neon-breakout-muted';
 
  const BASE_SPEED = 340;
  const PADDLE_SPEED = 540;
  const START_LIVES = 3;
 
  const paddle = { x: W / 2 - 55, y: H - 40, w: 110, h: 14 };
  const ball = { x: W / 2, y: paddle.y - 10, r: 8, vx: 0, vy: 0 };
 
  const state = {
    mode: 'ready', // ready | playing | paused | gameover
    score: 0,
    high: Number(localStorage.getItem(HS_KEY)) || 0,
    lives: START_LIVES,
    level: 1,
    bricks: [],
    particles: [],
    trail: [],
    keys: { left: false, right: false },
  };
 
  /* ---------------- audio ---------------- */
 
  const audio = { ctx: null, muted: localStorage.getItem(MUTE_KEY) === '1' };
 
  function ensureAudio() {
    if (!audio.ctx) {
      try {
        audio.ctx = new (window.AudioContext || window.webkitAudioContext)();
      } catch (e) {
        audio.ctx = null;
      }
    }
    if (audio.ctx && audio.ctx.state === 'suspended') audio.ctx.resume();
  }
 
  function beep(freq, dur = 0.07, type = 'square', vol = 0.12, slideTo = null) {
    if (audio.muted || !audio.ctx) return;
    const t = audio.ctx.currentTime;
    const osc = audio.ctx.createOscillator();
    const gain = audio.ctx.createGain();
    osc.type = type;
    osc.frequency.setValueAtTime(freq, t);
    if (slideTo) osc.frequency.exponentialRampToValueAtTime(slideTo, t + dur);
    gain.gain.setValueAtTime(vol, t);
    gain.gain.exponentialRampToValueAtTime(0.0001, t + dur);
    osc.connect(gain).connect(audio.ctx.destination);
    osc.start(t);
    osc.stop(t + dur + 0.02);
  }
 
  const sfx = {
    wall: () => beep(220, 0.05, 'triangle', 0.08),
    paddle: () => beep(330, 0.07, 'square', 0.12),
    brick: (row) => beep(460 + row * 70, 0.06, 'square', 0.12),
    loseLife: () => beep(280, 0.5, 'sawtooth', 0.15, 60),
    levelUp: () => {
      beep(523, 0.09);
      setTimeout(() => beep(659, 0.09), 90);
      setTimeout(() => beep(784, 0.14), 180);
    },
    gameOver: () => {
      beep(392, 0.15, 'sawtooth', 0.15);
      setTimeout(() => beep(311, 0.15, 'sawtooth', 0.15), 160);
      setTimeout(() => beep(233, 0.4, 'sawtooth', 0.15, 60), 320);
    },
  };
 
  function toggleMute() {
    audio.muted = !audio.muted;
    localStorage.setItem(MUTE_KEY, audio.muted ? '1' : '0');
    muteBtn.textContent = audio.muted ? '\u{1F507} Muted' : '\u{1F50A} Sound';
    muteBtn.classList.toggle('off', audio.muted);
  }
 
  /* ---------------- overlay / hud ---------------- */
 
  function showOverlay(title, msg) {
    overlayTitle.textContent = title;
    overlayMsg.textContent = msg;
    overlay.classList.remove('hidden');
  }
 
  function hideOverlay() {
    overlay.classList.add('hidden');
  }
 
  function updateHud() {
    scoreEl.textContent = state.score;
    highEl.textContent = state.high;
    levelEl.textContent = state.level;
    livesEl.textContent = '♥'.repeat(Math.max(0, state.lives));
    pauseBtn.textContent = state.mode === 'paused' ? '▶ Resume' : '❚❚ Pause';
  }
 
  /* ---------------- game flow ---------------- */
 
  function resetBall() {
    ball.x = paddle.x + paddle.w / 2;
    ball.y = paddle.y - ball.r - 2;
    ball.vx = 0;
    ball.vy = 0;
    state.trail.length = 0;
  }
 
  function startLevel(level) {
    state.level = level;
    paddle.w = Math.max(70, 110 - (level - 1) * 6);
    paddle.x = Breakout.clamp(paddle.x, 0, W - paddle.w);
    state.bricks = Breakout.buildLevel(level, { width: W });
    state.particles = [];
    state.trail = [];
    resetBall();
    state.mode = 'ready';
    updateHud();
  }
 
  function launch() {
    if (state.mode !== 'ready') return;
    ensureAudio();
    const speed = Breakout.ballSpeedForLevel(BASE_SPEED, state.level);
    const v = Breakout.launchVelocity(speed);
    ball.vx = v.vx;
    ball.vy = v.vy;
    state.mode = 'playing';
    hideOverlay();
    updateHud();
  }
 
  function togglePause() {
    if (state.mode === 'playing') {
      state.mode = 'paused';
      showOverlay('PAUSED', 'Press P to resume');
    } else if (state.mode === 'paused') {
      state.mode = 'playing';
      hideOverlay();
    }
    updateHud();
  }
 
  function saveHigh() {
    localStorage.setItem(HS_KEY, String(state.high));
  }
 
  function loseLife() {
    state.lives -= 1;
    state.particles.push(
      ...Breakout.spawnParticles(Breakout.clamp(ball.x, 0, W), H - 6, '#ff2d95', 24)
    );
    if (state.lives <= 0) {
      state.mode = 'gameover';
      sfx.gameOver();
      showOverlay('GAME OVER', `Score ${state.score} · Press SPACE to restart`);
    } else {
      sfx.loseLife();
      resetBall();
      state.mode = 'ready';
      showOverlay(
        'BALL LOST',
        `${state.lives} ${state.lives === 1 ? 'life' : 'lives'} left · Press SPACE to serve`
      );
    }
    updateHud();
  }
 
  function levelClear() {
    sfx.levelUp();
    const next = state.level + 1;
    startLevel(next);
    showOverlay(`LEVEL ${next}`, 'Speed up! Press SPACE to serve');
  }
 
  function restart() {
    state.score = 0;
    state.lives = START_LIVES;
    startLevel(1);
    showOverlay('NEON BREAKOUT', 'Press SPACE to launch');
  }
 
  /* ---------------- update ---------------- */
 
  function update(dt) {
    const dir = (state.keys.right ? 1 : 0) - (state.keys.left ? 1 : 0);
    paddle.x = Breakout.movePaddle(paddle.x, dir, PADDLE_SPEED, dt, W, paddle.w);
 
    if (state.mode === 'ready') {
      ball.x = paddle.x + paddle.w / 2;
      ball.y = paddle.y - ball.r - 2;
    }
 
    if (state.mode === 'playing') {
      // Sub-step integration so a fast ball can't tunnel through bricks.
      const speed = Math.hypot(ball.vx, ball.vy);
      const steps = Breakout.clamp(Math.ceil((speed * dt) / (ball.r * 0.6)), 1, 10);
      const sdt = dt / steps;
 
      for (let i = 0; i < steps; i++) {
        Breakout.stepBall(ball, sdt);
 
        const walls = Breakout.collideWalls(ball, W, H);
        if (walls.includes('bottom')) {
          state.particles = Breakout.updateParticles(state.particles, dt);
          loseLife();
          return;
        }
        if (walls.length) sfx.wall();
 
        if (Breakout.collidePaddle(ball, paddle)) {
          sfx.paddle();
          state.particles.push(...Breakout.spawnParticles(ball.x, paddle.y, '#00f0ff', 6));
        }
 
        for (const brick of state.bricks) {
          if (!brick.alive) continue;
          if (Breakout.collideBrick(ball, brick)) {
            const res = Breakout.hitBrick(brick);
            const color = Breakout.rowColor(brick.row);
            state.particles.push(
              ...Breakout.spawnParticles(ball.x, ball.y, color, res.destroyed ? 16 : 8)
            );
            sfx.brick(brick.row);
            if (res.destroyed) {
              state.score += res.points;
              if (state.score > state.high) {
                state.high = state.score;
                saveHigh();
              }
            }
            updateHud();
            break;
          }
        }
      }
 
      if (state.bricks.every((b) => !b.alive)) {
        state.particles = Breakout.updateParticles(state.particles, dt);
        levelClear();
        return;
      }
 
      state.trail.push({ x: ball.x, y: ball.y });
      if (state.trail.length > 10) state.trail.shift();
    }
 
    state.particles = Breakout.updateParticles(state.particles, dt);
  }
 
  /* ---------------- draw ---------------- */
 
  function drawGrid() {
    ctx.strokeStyle = 'rgba(0, 240, 255, 0.05)';
    ctx.lineWidth = 1;
    ctx.beginPath();
    for (let x = 40; x < W; x += 40) {
      ctx.moveTo(x, 0);
      ctx.lineTo(x, H);
    }
    for (let y = 40; y < H; y += 40) {
      ctx.moveTo(0, y);
      ctx.lineTo(W, y);
    }
    ctx.stroke();
  }
 
  function draw() {
    ctx.clearRect(0, 0, W, H);
    drawGrid();
 
    for (const brick of state.bricks) {
      if (!brick.alive) continue;
      const color = Breakout.rowColor(brick.row);
      ctx.save();
      ctx.shadowColor = color;
      ctx.shadowBlur = 14;
      ctx.globalAlpha = brick.hp < brick.maxHp ? 0.55 : 1;
      ctx.fillStyle = color;
      ctx.fillRect(brick.x, brick.y, brick.w, brick.h);
      ctx.shadowBlur = 0;
      ctx.fillStyle = 'rgba(255, 255, 255, 0.25)';
      ctx.fillRect(brick.x, brick.y, brick.w, 3);
      ctx.restore();
    }
 
    for (let i = 0; i < state.trail.length; i++) {
      const t = state.trail[i];
      const f = (i + 1) / state.trail.length;
      ctx.fillStyle = `rgba(0, 240, 255, ${f * 0.22})`;
      ctx.beginPath();
      ctx.arc(t.x, t.y, ball.r * (0.35 + 0.55 * f), 0, Math.PI * 2);
      ctx.fill();
    }
 
    ctx.save();
    ctx.shadowColor = '#00f0ff';
    ctx.shadowBlur = 18;
    ctx.fillStyle = '#eaffff';
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
 
    ctx.save();
    ctx.shadowColor = '#00f0ff';
    ctx.shadowBlur = 16;
    const grad = ctx.createLinearGradient(paddle.x, 0, paddle.x + paddle.w, 0);
    grad.addColorStop(0, '#b026ff');
    grad.addColorStop(0.5, '#00f0ff');
    grad.addColorStop(1, '#b026ff');
    ctx.fillStyle = grad;
    ctx.fillRect(paddle.x, paddle.y, paddle.w, paddle.h);
    ctx.restore();
 
    for (const p of state.particles) {
      ctx.globalAlpha = Math.max(0, p.life / p.maxLife);
      ctx.fillStyle = p.color;
      ctx.fillRect(p.x - p.size / 2, p.y - p.size / 2, p.size, p.size);
    }
    ctx.globalAlpha = 1;
  }
 
  /* ---------------- input ---------------- */
 
  window.addEventListener('keydown', (e) => {
    if (e.code === 'ArrowLeft' || e.code === 'KeyA') {
      state.keys.left = true;
      e.preventDefault();
    } else if (e.code === 'ArrowRight' || e.code === 'KeyD') {
      state.keys.right = true;
      e.preventDefault();
    } else if (e.code === 'Space') {
      e.preventDefault();
      ensureAudio();
      if (state.mode === 'gameover') restart();
      else if (state.mode === 'ready') launch();
      else if (state.mode === 'paused') togglePause();
    } else if (e.code === 'KeyP' || e.code === 'Escape') {
      togglePause();
    } else if (e.code === 'KeyM') {
      toggleMute();
    }
  });
 
  window.addEventListener('keyup', (e) => {
    if (e.code === 'ArrowLeft' || e.code === 'KeyA') state.keys.left = false;
    if (e.code === 'ArrowRight' || e.code === 'KeyD') state.keys.right = false;
  });
 
  function pointerX(clientX) {
    const rect = canvas.getBoundingClientRect();
    return (clientX - rect.left) * (canvas.width / rect.width);
  }
 
  canvas.addEventListener('mousemove', (e) => {
    if (state.mode === 'paused' || state.mode === 'gameover') return;
    paddle.x = Breakout.clamp(pointerX(e.clientX) - paddle.w / 2, 0, W - paddle.w);
  });
 
  canvas.addEventListener(
    'touchmove',
    (e) => {
      if (state.mode === 'paused' || state.mode === 'gameover') return;
      e.preventDefault();
      paddle.x = Breakout.clamp(pointerX(e.touches[0].clientX) - paddle.w / 2, 0, W - paddle.w);
    },
    { passive: false }
  );
 
  function primaryAction() {
    ensureAudio();
    if (state.mode === 'gameover') restart();
    else if (state.mode === 'ready') launch();
    else if (state.mode === 'paused') togglePause();
  }
 
  canvas.addEventListener('click', primaryAction);
  overlay.addEventListener('click', primaryAction);
 
  pauseBtn.addEventListener('click', (e) => {
    e.currentTarget.blur();
    togglePause();
  });
  muteBtn.addEventListener('click', (e) => {
    e.currentTarget.blur();
    toggleMute();
  });
 
  document.addEventListener('visibilitychange', () => {
    if (document.hidden && state.mode === 'playing') togglePause();
  });
 
  /* ---------------- boot ---------------- */
 
  muteBtn.textContent = audio.muted ? '\u{1F507} Muted' : '\u{1F50A} Sound';
  muteBtn.classList.toggle('off', audio.muted);
  startLevel(1);
  showOverlay('NEON BREAKOUT', 'Press SPACE to launch');
 
  let last = performance.now();
  function frame(now) {
    const dt = Math.min((now - last) / 1000, 0.033);
    last = now;
    if (state.mode === 'ready' || state.mode === 'playing') update(dt);
    draw();
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}
 
if (typeof window !== 'undefined') {
  window.Breakout = Breakout;
  if (document.getElementById('game')) initGame();
}
if (typeof module !== 'undefined' && module.exports) {
  module.exports = Breakout;
}
 
645 linesjs
Edits …/game.js
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#claude #claude-code #claude-fable-5 #css #game #graphics #html #javascript #medium #skills #subagents #testing
a1-claude
← all sessions