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 09 / 68
tests.jschange 1/1
/* Headless-friendly tests for the Breakout physics/collision core.
 * Run with `node tests.js`, or open tests.html in a browser.
 */
'use strict';
 
(function () {
  const isBrowser = typeof window !== 'undefined';
  const B = isBrowser ? window.Breakout : require('./game.js');
 
  const results = [];
 
  function test(name, fn) {
    try {
      fn();
      results.push({ name, pass: true });
    } catch (e) {
      results.push({ name, pass: false, error: e && e.message ? e.message : String(e) });
    }
  }
 
  function assert(cond, msg) {
    if (!cond) throw new Error(msg || 'expected truthy');
  }
 
  function assertEqual(actual, expected, msg) {
    if (actual !== expected) {
      throw new Error(`${msg || 'assertEqual'}: expected ${expected}, got ${actual}`);
    }
  }
 
  function assertClose(actual, expected, eps, msg) {
    eps = eps == null ? 1e-6 : eps;
    if (Math.abs(actual - expected) > eps) {
      throw new Error(`${msg || 'assertClose'}: expected ~${expected}, got ${actual}`);
    }
  }
 
  /* ---------------- clamp ---------------- */
 
  test('clamp keeps in-range values', () => {
    assertEqual(B.clamp(5, 0, 10), 5);
  });
 
  test('clamp clamps below and above', () => {
    assertEqual(B.clamp(-3, 0, 10), 0);
    assertEqual(B.clamp(42, 0, 10), 10);
  });
 
  /* ---------------- stepBall ---------------- */
 
  test('stepBall advances position by velocity * dt', () => {
    const ball = { x: 100, y: 200, r: 8, vx: 50, vy: -80 };
    B.stepBall(ball, 0.5);
    assertClose(ball.x, 125);
    assertClose(ball.y, 160);
  });
 
  /* ---------------- collideWalls ---------------- */
 
  test('left wall reflects vx and repositions', () => {
    const ball = { x: 4, y: 300, r: 8, vx: -100, vy: 50 };
    const events = B.collideWalls(ball, 800, 600);
    assert(events.includes('left'), 'expected left event');
    assertEqual(ball.x, 8, 'ball moved to r');
    assert(ball.vx > 0, 'vx now positive');
  });
 
  test('right wall reflects vx and repositions', () => {
    const ball = { x: 797, y: 300, r: 8, vx: 100, vy: 50 };
    const events = B.collideWalls(ball, 800, 600);
    assert(events.includes('right'), 'expected right event');
    assertEqual(ball.x, 792, 'ball moved to width - r');
    assert(ball.vx < 0, 'vx now negative');
  });
 
  test('top wall reflects vy and repositions', () => {
    const ball = { x: 400, y: 3, r: 8, vx: 20, vy: -120 };
    const events = B.collideWalls(ball, 800, 600);
    assert(events.includes('top'), 'expected top event');
    assertEqual(ball.y, 8, 'ball moved to r');
    assert(ball.vy > 0, 'vy now positive');
  });
 
  test('falling past the bottom reports bottom without reflecting', () => {
    const ball = { x: 400, y: 620, r: 8, vx: 20, vy: 120 };
    const events = B.collideWalls(ball, 800, 600);
    assert(events.includes('bottom'), 'expected bottom event');
    assert(ball.vy > 0, 'vy unchanged (ball is lost, not bounced)');
  });
 
  test('open space produces no wall events', () => {
    const ball = { x: 400, y: 300, r: 8, vx: 100, vy: 100 };
    assertEqual(B.collideWalls(ball, 800, 600).length, 0);
  });
 
  test('corner hit reports both walls', () => {
    const ball = { x: 4, y: 4, r: 8, vx: -50, vy: -50 };
    const events = B.collideWalls(ball, 800, 600);
    assert(events.includes('left') && events.includes('top'), 'expected left + top');
  });
 
  /* ---------------- circleRectOverlap ---------------- */
 
  test('circleRectOverlap detects edge contact', () => {
    const rect = { x: 100, y: 100, w: 60, h: 20 };
    assert(B.circleRectOverlap(95, 110, 6, rect), 'circle touching left edge');
  });
 
  test('circleRectOverlap rejects distant circle', () => {
    const rect = { x: 100, y: 100, w: 60, h: 20 };
    assert(!B.circleRectOverlap(50, 50, 6, rect), 'far circle should not overlap');
  });
 
  test('circleRectOverlap handles corners correctly', () => {
    const rect = { x: 100, y: 100, w: 60, h: 20 };
    // 4px diagonal from the corner: within r=6
    assert(B.circleRectOverlap(97.2, 97.2, 6, rect), 'near corner within radius');
    // ~7.07px diagonal from the corner: outside r=6
    assert(!B.circleRectOverlap(95, 95, 6, rect), 'corner distance beyond radius');
  });
 
  /* ---------------- collidePaddle ---------------- */
 
  function makePaddle() {
    return { x: 350, y: 560, w: 100, h: 14 };
  }
 
  test('center paddle hit bounces straight up', () => {
    const paddle = makePaddle();
    const ball = { x: 400, y: 558, r: 8, vx: 60, vy: 180 };
    assert(B.collidePaddle(ball, paddle), 'should collide');
    assertClose(ball.vx, 0, 1e-9, 'vx should be ~0');
    assert(ball.vy < 0, 'vy should point up');
  });
 
  test('right-side paddle hit deflects right', () => {
    const paddle = makePaddle();
    const ball = { x: 425, y: 558, r: 8, vx: 0, vy: 200 }; // hit = +0.5
    assert(B.collidePaddle(ball, paddle), 'should collide');
    assert(ball.vx > 0, 'vx should be positive');
    assertClose(ball.vx, 200 * Math.sin(B.MAX_BOUNCE_ANGLE * 0.5), 1e-9);
  });
 
  test('left-side paddle hit deflects left', () => {
    const paddle = makePaddle();
    const ball = { x: 375, y: 558, r: 8, vx: 0, vy: 200 };
    assert(B.collidePaddle(ball, paddle), 'should collide');
    assert(ball.vx < 0, 'vx should be negative');
  });
 
  test('paddle bounce preserves ball speed', () => {
    const paddle = makePaddle();
    const ball = { x: 430, y: 558, r: 8, vx: 90, vy: 160 };
    const before = Math.hypot(ball.vx, ball.vy);
    B.collidePaddle(ball, paddle);
    assertClose(Math.hypot(ball.vx, ball.vy), before, 1e-9, 'speed preserved');
  });
 
  test('paddle ignores a ball moving upward', () => {
    const paddle = makePaddle();
    const ball = { x: 400, y: 558, r: 8, vx: 0, vy: -200 };
    assert(!B.collidePaddle(ball, paddle), 'no bounce while moving up');
  });
 
  test('paddle repositions ball above itself', () => {
    const paddle = makePaddle();
    const ball = { x: 400, y: 565, r: 8, vx: 0, vy: 200 };
    B.collidePaddle(ball, paddle);
    assertEqual(ball.y, paddle.y - ball.r, 'ball sits on top of paddle');
  });
 
  test('paddle misses a ball outside its bounds', () => {
    const paddle = makePaddle();
    const ball = { x: 200, y: 558, r: 8, vx: 0, vy: 200 };
    assert(!B.collidePaddle(ball, paddle), 'no collision far away');
  });
 
  /* ---------------- collideBrick ---------------- */
 
  function makeBrick(extra) {
    return Object.assign(
      { x: 100, y: 100, w: 60, h: 20, row: 0, col: 0, hp: 1, maxHp: 1, points: 40, alive: true },
      extra
    );
  }
 
  test('side impact reflects vx', () => {
    const brick = makeBrick();
    const ball = { x: 98, y: 110, r: 6, vx: 100, vy: 0 };
    assert(B.collideBrick(ball, brick), 'should collide');
    assert(ball.vx < 0, 'vx reflected');
    assertClose(ball.vy, 0, 1e-9, 'vy untouched');
  });
 
  test('top impact reflects vy', () => {
    const brick = makeBrick();
    const ball = { x: 130, y: 98, r: 6, vx: 0, vy: 100 };
    assert(B.collideBrick(ball, brick), 'should collide');
    assert(ball.vy < 0, 'vy reflected upward');
    assertClose(ball.vx, 0, 1e-9, 'vx untouched');
  });
 
  test('bottom impact reflects vy downward', () => {
    const brick = makeBrick();
    const ball = { x: 130, y: 122, r: 6, vx: 0, vy: -100 };
    assert(B.collideBrick(ball, brick), 'should collide');
    assert(ball.vy > 0, 'vy reflected downward');
  });
 
  test('dead bricks are ignored', () => {
    const brick = makeBrick({ alive: false });
    const ball = { x: 130, y: 110, r: 6, vx: 0, vy: 100 };
    assert(!B.collideBrick(ball, brick), 'dead brick should not collide');
  });
 
  test('distant ball misses the brick', () => {
    const brick = makeBrick();
    const ball = { x: 400, y: 400, r: 6, vx: 0, vy: 100 };
    assert(!B.collideBrick(ball, brick), 'no collision');
  });
 
  /* ---------------- hitBrick ---------------- */
 
  test('hitBrick destroys a 1hp brick and awards its points', () => {
    const brick = makeBrick();
    const res = B.hitBrick(brick);
    assert(res.destroyed, 'destroyed');
    assertEqual(res.points, 40);
    assert(!brick.alive, 'brick dead');
  });
 
  test('hitBrick chips a 2hp brick, then destroys it', () => {
    const brick = makeBrick({ hp: 2, maxHp: 2 });
    const first = B.hitBrick(brick);
    assert(!first.destroyed, 'first hit only chips');
    assertEqual(first.points, 0);
    assert(brick.alive, 'still alive');
    const second = B.hitBrick(brick);
    assert(second.destroyed, 'second hit destroys');
    assertEqual(second.points, 40);
    assert(!brick.alive, 'now dead');
  });
 
  /* ---------------- movePaddle ---------------- */
 
  test('movePaddle moves by dir * speed * dt', () => {
    assertClose(B.movePaddle(100, 1, 500, 0.1, 800, 110), 150);
    assertClose(B.movePaddle(100, -1, 500, 0.1, 800, 110), 50);
  });
 
  test('movePaddle clamps to canvas bounds', () => {
    assertEqual(B.movePaddle(5, -1, 500, 1, 800, 110), 0);
    assertEqual(B.movePaddle(650, 1, 500, 1, 800, 110), 690);
  });
 
  /* ---------------- levels & speed ---------------- */
 
  test('ballSpeedForLevel starts at base and increases monotonically', () => {
    assertClose(B.ballSpeedForLevel(300, 1), 300);
    let prev = 0;
    for (let level = 1; level <= 8; level++) {
      const s = B.ballSpeedForLevel(300, level);
      assert(s > prev, `level ${level} faster than ${level - 1}`);
      prev = s;
    }
  });
 
  test('levelRows grows with level and caps at max', () => {
    assertEqual(B.levelRows(1), 4);
    assertEqual(B.levelRows(2), 5);
    assertEqual(B.levelRows(20), 8);
  });
 
  test('buildLevel produces rows * cols live bricks', () => {
    const bricks = B.buildLevel(1, { width: 800 });
    assertEqual(bricks.length, B.levelRows(1) * 10);
    assert(bricks.every((b) => b.alive), 'all alive');
    assert(bricks.every((b) => b.points > 0), 'all worth points');
  });
 
  test('buildLevel bricks stay inside the side margins', () => {
    const bricks = B.buildLevel(1, { width: 800, margin: 40 });
    for (const b of bricks) {
      assert(b.x >= 40 - 1e-9, 'left of brick inside margin');
      assert(b.x + b.w <= 800 - 40 + 1e-9, 'right of brick inside margin');
    }
  });
 
  test('buildLevel leaves the configured gap between columns', () => {
    const bricks = B.buildLevel(1, { width: 800, gap: 6 });
    const row0 = bricks.filter((b) => b.row === 0).sort((a, b2) => a.x - b2.x);
    for (let i = 1; i < row0.length; i++) {
      assertClose(row0[i].x - (row0[i - 1].x + row0[i - 1].w), 6, 1e-9, 'column gap');
    }
  });
 
  test('buildLevel awards more points for higher rows', () => {
    const bricks = B.buildLevel(1);
    const top = bricks.find((b) => b.row === 0);
    const bottom = bricks.find((b) => b.row === B.levelRows(1) - 1);
    assert(top.points > bottom.points, 'top row worth more');
  });
 
  test('buildLevel hardens the top row from level 3', () => {
    const early = B.buildLevel(1);
    assert(early.every((b) => b.hp === 1), 'level 1 bricks are all 1hp');
    const late = B.buildLevel(3);
    assert(late.filter((b) => b.row === 0).every((b) => b.hp === 2), 'level 3 top row is 2hp');
    assert(late.filter((b) => b.row > 0).every((b) => b.hp === 1), 'other rows stay 1hp');
  });
 
  /* ---------------- launch ---------------- */
 
  test('launchVelocity always serves upward at the requested speed', () => {
    for (const r of [0, 0.25, 0.5, 0.75, 0.999]) {
      const v = B.launchVelocity(340, () => r);
      assert(v.vy < 0, `vy negative for rand=${r}`);
      assertClose(Math.hypot(v.vx, v.vy), 340, 1e-9, `speed preserved for rand=${r}`);
    }
  });
 
  test('launchVelocity is straight up for a centered rand', () => {
    const v = B.launchVelocity(340, () => 0.5);
    assertClose(v.vx, 0, 1e-9);
    assertClose(v.vy, -340, 1e-9);
  });
 
  /* ---------------- particles ---------------- */
 
  test('spawnParticles creates the requested count with the given color', () => {
    const parts = B.spawnParticles(100, 100, '#ff2d95', 10, () => 0.5);
    assertEqual(parts.length, 10);
    assert(parts.every((p) => p.color === '#ff2d95'), 'color applied');
    assert(parts.every((p) => p.life > 0 && p.life === p.maxLife), 'fresh lifetimes');
  });
 
  test('spawnParticles is deterministic with an injected rand', () => {
    const parts = B.spawnParticles(0, 0, '#fff', 1, () => 0.5);
    // rand=0.5 → angle=π, speed=180 → vx = cos(π)*180 = -180
    assertClose(parts[0].vx, -180, 1e-9);
  });
 
  test('updateParticles integrates position and applies gravity', () => {
    const parts = [{ x: 0, y: 0, vx: 100, vy: 0, life: 1, maxLife: 1, size: 2, color: '#fff' }];
    const out = B.updateParticles(parts, 0.1, 500);
    assertEqual(out.length, 1);
    assertClose(out[0].x, 10);
    assertClose(out[0].vy, 50, 1e-9, 'gravity applied');
    assertClose(out[0].life, 0.9);
  });
 
  test('updateParticles drops expired particles', () => {
    const parts = [
      { x: 0, y: 0, vx: 0, vy: 0, life: 0.05, maxLife: 1, size: 2, color: '#fff' },
      { x: 0, y: 0, vx: 0, vy: 0, life: 1, maxLife: 1, size: 2, color: '#fff' },
    ];
    assertEqual(B.updateParticles(parts, 0.1).length, 1);
  });
 
  /* ---------------- integration: a full rally ---------------- */
 
  test('simulated serve clears a brick and returns to the paddle', () => {
    const W = 800;
    const H = 600;
    const paddle = { x: 350, y: 560, w: 100, h: 14 };
    const bricks = B.buildLevel(1, { width: W });
    const ball = { x: 400, y: 550, r: 8, vx: 0, vy: 0 };
    const v = B.launchVelocity(340, () => 0.5); // straight up
    ball.vx = v.vx;
    ball.vy = v.vy;
 
    let destroyed = 0;
    let paddleBounces = 0;
    const dt = 1 / 240;
    for (let i = 0; i < 240 * 10 && paddleBounces === 0; i++) {
      B.stepBall(ball, dt);
      const walls = B.collideWalls(ball, W, H);
      assert(!walls.includes('bottom'), 'ball should never drain in this rally');
      if (B.collidePaddle(ball, paddle)) paddleBounces++;
      for (const brick of bricks) {
        if (brick.alive && B.collideBrick(ball, brick)) {
          if (B.hitBrick(brick).destroyed) destroyed++;
          break;
        }
      }
    }
    assert(destroyed >= 1, 'at least one brick destroyed');
    assertEqual(paddleBounces, 1, 'ball came back to the paddle');
  });
 
  /* ---------------- report ---------------- */
 
  const failed = results.filter((r) => !r.pass);
  const summary = `${results.length - failed.length}/${results.length} tests passed`;
 
  if (isBrowser) {
    const list = document.getElementById('results');
    for (const r of results) {
      const li = document.createElement('li');
      li.className = r.pass ? 'pass' : 'fail';
      li.textContent = r.pass ? `✔ ${r.name}` : `✘ ${r.name} — ${r.error}`;
      list.appendChild(li);
    }
    const summaryEl = document.getElementById('summary');
    summaryEl.textContent = summary;
    summaryEl.className = failed.length ? 'fail' : 'pass';
  } else {
    for (const r of results) {
      console.log(r.pass ? `PASS ${r.name}` : `FAIL ${r.name} — ${r.error}`);
    }
    console.log(`\n${summary}`);
    if (failed.length) process.exitCode = 1;
  }
})();
 
415 linesjs
Writes …/tests.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