vramarcade

arcade / gamedev

Breakout

The canonical brick-breaker, fully specified. Everyone builds the same game, so the difference is entirely in feel, polish and whether the collisions actually work.

desktopgamecreatecanvasphysicsgame-loopjuice
The prompt every model was given
Build a complete, playable Breakout game that runs from `index.html`. Canvas, 2D context, one
`<canvas>` element. You may split the JS into `game.js`.

## The game

- A play field of 960×600 CSS pixels, centred on the page.
- **8 columns × 5 rows of bricks** at the top, with a gap between them. Rows are different
  colours. Bricks in the top two rows take two hits (visibly damaged after the first); the rest
  take one.
- A paddle on the bottom edge, controlled by **both** the mouse (paddle follows the cursor's x)
  and the **left/right arrow keys**. It cannot leave the field.
- A ball that starts stuck to the paddle and launches on **Space** or a click. It bounces off
  the walls, the ceiling, the bricks and the paddle. **Where the ball hits the paddle changes
  the angle it leaves at** — the edges deflect more steeply than the centre.
- **3 lives.** Losing the ball off the bottom costs a life and re-sticks the ball to the paddle.
- **Score**: 10 points per brick hit, 50 for destroying one. Score and lives are visible during
  play.
- **Win** when every brick is gone, **lose** at zero lives. Both states show a clear message and
  offer a restart that fully resets the game — including the score, the lives and the bricks.

## Requirements

- The game loop uses `requestAnimationFrame` and is **frame-rate independent**: movement is
  scaled by elapsed time, so the ball travels at the same speed on a 60Hz and a 144Hz display.
- The ball must never tunnel through a brick, stick inside one, or escape the play field, even
  when it speeds up.
- Speed increases gradually as bricks are destroyed, with a cap.
- Pause on **P** or when the window loses focus.
- Add some juice of your choosing — a hit flash, particles, a screen shake, a trail, a sound
  synthesised with the WebAudio API. Enough that hitting a brick feels good. Do not overdo it.
- Draw all the graphics with the canvas API. You have no network and no image files.
- Show the controls on the page, outside the canvas.

It must be genuinely playable and completable. Test your own logic by reading it back carefully
before you finish.

Side by side 10 results

Same prompt, same harness settings, one model each. Open one to play it.

not generated yet: gemma-4-26b-a4b, bielik-11b-v3, qwen3.5-122b-a10b