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.
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