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 08 / 24

index.htmlchange 1/1

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Neon Breakout</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="cabinet">
    <header class="marquee">
      <h1>NEON BREAKOUT</h1>
      <div class="hud">
        <span>Score <b id="score">0</b></span>
        <span>High <b id="highScore">0</b></span>
        <span>Lives <b id="lives">3</b></span>
        <span>Level <b id="level">1</b></span>
      </div>
    </header>
 
    <section class="screen-wrap">
      <canvas id="game" width="900" height="600" aria-label="Breakout game canvas"></canvas>
      <div id="overlay" class="overlay">
        <h2>READY?</h2>
        <p>Move: ← → / A D / mouse &nbsp; · &nbsp; Launch: Space &nbsp; · &nbsp; Pause: P</p>
        <button id="startBtn">INSERT COIN</button>
      </div>
    </section>
 
    <footer class="controls">
      <button id="pauseBtn">Pause</button>
      <button id="muteBtn" aria-pressed="false">Sound On</button>
      <span class="hint">Clear all bricks to advance. Speed rises each level.</span>
    </footer>
  </main>
 
  <script src="game.js"></script>
</body>
</html>
 

40 lineshtml

Writes style.css

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