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

pigpt-5.5 · 24 steps · 2m 21s · 5 filessession 534065f1-d41@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 15 / 24

tests.jschange 1/1

const assert = require('assert');
const core = require('./game.js');
 
function test(name, fn) {
  try { fn(); console.log('✓', name); }
  catch (err) { console.error('✗', name); throw err; }
}
 
test('clamp bounds values', () => {
  assert.strictEqual(core.clamp(5, 0, 10), 5);
  assert.strictEqual(core.clamp(-1, 0, 10), 0);
  assert.strictEqual(core.clamp(11, 0, 10), 10);
});
 
test('circle/rect collision detects overlap and misses', () => {
  const rect = { x: 10, y: 10, w: 40, h: 20 };
  assert.strictEqual(core.circleRectCollision({ x: 20, y: 20, r: 5 }, rect), true);
  assert.strictEqual(core.circleRectCollision({ x: 0, y: 0, r: 5 }, rect), false);
  assert.strictEqual(core.circleRectCollision({ x: 8, y: 20, r: 3 }, rect), true);
});
 
test('paddle reflection sends ball upward and changes horizontal velocity', () => {
  const state = core.createState();
  const b = state.ball, p = state.paddle;
  b.vx = 0; b.vy = 300; b.x = p.x + p.w; b.y = p.y - b.r;
  core.reflectFromPaddle(b, p);
  assert(b.vy < 0, 'ball should travel upward');
  assert(b.vx > 0, 'right edge hit should push right');
});
 
test('wall collision reverses horizontal velocity', () => {
  const state = core.createState();
  state.paused = false; state.ball.stuck = false;
  state.ball.x = 3; state.ball.y = 300; state.ball.vx = -200; state.ball.vy = 0;
  core.step(state, 0.016, { move: 0 });
  assert(state.ball.vx > 0);
  assert.strictEqual(state.ball.x, state.ball.r);
});
 
test('brick collision kills brick, scores, and reflects', () => {
  const state = core.createState();
  state.paused = false; state.ball.stuck = false;
  const brick = state.bricks[0];
  const aliveBefore = state.bricks.filter(b => b.alive).length;
  state.ball.x = brick.x + brick.w / 2;
  state.ball.y = brick.y - state.ball.r + 1;
  state.ball.vx = 0; state.ball.vy = 200;
  core.step(state, 0.016, { move: 0 });
  assert.strictEqual(brick.alive, false);
  assert(state.score > 0);
  assert(state.ball.vy < 0);
  assert.strictEqual(state.bricks.filter(b => b.alive).length, aliveBefore - 1);
});
 
test('missing the paddle costs a life and resets stuck ball', () => {
  const state = core.createState();
  state.paused = false; state.ball.stuck = false;
  state.ball.x = 100; state.ball.y = state.height + 20; state.ball.vy = 300;
  core.step(state, 0.016, { move: 0 });
  assert.strictEqual(state.lives, 2);
  assert.strictEqual(state.ball.stuck, true);
});
 
test('clearing all bricks advances level and increases speed', () => {
  const state = core.createState();
  state.paused = false; state.ball.stuck = false;
  const oldSpeed = state.ball.speed;
  for (const br of state.bricks) br.alive = false;
  core.step(state, 0.016, { move: 0 });
  assert.strictEqual(state.level, 2);
  assert(state.ball.speed > oldSpeed);
  assert.strictEqual(state.paused, true);
});
 
console.log('All core physics tests passed.');
 

76 linesjs

Writes tests.html

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.

#css #game #gpt #gpt-5.5 #graphics #html #javascript #pi #quick #testing #ui

a4-pi

← all sessions