👾 Arcade1976AtariFIDDLYBreakout rebuild deck
FIDDLY
A ball striking the exact corner of a brick is genuinely ambiguous, and resolving on the wrong axis drops it through a solid wall twice an hour, never while you are watching.
You will get it, but one specific system will fight you.
The collision maths is the entire job and it is harder than it looks, because a ball striking the exact corner of a brick is genuinely ambiguous and naive implementations resolve it wrongly some fraction of the time. An agent will happily hand you something that plays fine for thirty seconds and then drops the ball through a solid wall at speed, which is the worst kind of bug to reproduce. What earns your evening is the escalation schedule: without those four speed-up triggers this is a screensaver, and with them it is still a game fifty years on. Verdict is kinda rather than yes only because what most people picture is Arkanoid, and the power-up layer is a second build on top of this one.
- Difficulty
- FIDDLY · 2 of 5
- First playable
- An evening
- The original
- 1 team-years
- Released
- 1976 · Arcade
- Genre
- Block Breaker
Build a paddle-and-bricks wall destruction game as a single self-contained HTML file. Canvas 2D, Web Audio, no build step, no dependencies. Requirements: - The load-bearing detail: brick collision must resolve the axis of entry. Each step, compute the overlap depth on X and on Y against the brick's AABB and reflect on the axis with the SMALLER penetration. Reflecting on both axes, or guessing from the sign of velocity, breaks corner hits and eventually lets the ball pass straight through a brick. - Substep the ball's motion into steps no larger than half the ball radius and test collisions per step, so a fast ball cannot tunnel through a brick or the paddle. - Paddle bounce angle depends on contact position, mapped to up to 60 degrees off vertical, with speed preserved rather than reflected. - Escalation schedule from the 1976 rules: the ball speeds up after 4 hits, again after 12 hits, and again on first contact with each of the two highest-scoring colour bands. The paddle halves in width the first time the ball reaches the ceiling. - Eight rows of bricks, two rows per colour band, scoring 1, 3, 5 and 7 points ascending. Three lives. - Layouts, colours and the speed schedule live in a levels.json structure, not inlined in the update loop. - Web Audio blips with pitch rising by brick row. Definition of done: I can knock a channel up the left column, send the ball above the wall, and watch it clear bricks from the top without ever passing through one.
- The colour overlay strip, because the original was a black and white monitor with tinted cellophane taped over the glass
- Atari's trademark and the folklore of Wozniak's 44-chip breadboard
- Every power-up, boss and level pack from the Arkanoid line, which is what most people actually mean when they ask for this
Resolve collisions on the axis of least penetration
A fast circle striking the exact corner of a rectangle is genuinely ambiguous, and the wrong answer is the worst class of bug: the ball leaves through a solid wall at speed, twice an hour, never while you are watching. Own a substepped resolver that picks its axis by penetration depth and you stop writing that bug in this game and the next four.
ScopeAn evening— build just this, not the game
Build a collision test harness as a single self-contained HTML file. Canvas 2D, no build step, no dependencies. - A field of static axis-aligned rectangles and one circular projectile you can launch at any angle, with a speed slider from 200 to 4000 px/s. - Move the projectile in substeps no larger than half its radius, testing collisions after each substep, so it can never skip past a rectangle between frames. - On overlap, compute penetration depth on X and on Y against the rectangle's box and reflect on the axis with the SMALLER depth. Do not infer the axis from the sign of velocity, and never reflect both axes at once. Corner hits are the case that breaks everything. - Debug overlay: chosen axis, both penetration depths, substeps used this frame, and a persistent counter of tunnelling events, meaning any frame that ends with the projectile inside a rectangle. - A corner-shot button that repeatedly fires exactly at a rectangle's corner. Definition of done: five minutes at 4000 px/s with the corner shot running and the tunnelling counter still reads zero.
Not a clone — Breakout re-themed and cut down to something you can finish. The angle is the important reel: it is what turns a project into a weekend. 5,880 ways to land.
Orbital Same Sofa
Breakout, but local split-screen instead of online, set in deep space. Rendered in isometric voxel.
Build a browser game called "Orbital Same Sofa". The pitch in one line: a block breaker in the spirit of Breakout, but local split-screen instead of online, set in deep space. WHAT THIS IS Take the SHAPE of Breakout — its core loop, and whatever makes that loop good — and rebuild it as your own game in a different world at a smaller scope. Use your own names, art and audio, which you want anyway: a reskin of somebody else's game is less interesting than a new one that works the same way. THE ANGLE — this is the important constraint, honour it above everything else Local split-screen instead of online. Two players, one keyboard or two gamepads, one screen. All the multiplayer fun, none of the distributed systems. This is what makes the project finishable. If a decision would push the scope back towards the original's, take the smaller option every time. THE THEME Deep space. Vacuum, delay and no help coming. Sound only travels through the hull. The theme is not a coat of paint. Let it change what the mechanics mean — a reload, a health pack and a locked door should all be things that make sense in this world and nowhere else. LOOK Isometric voxel. A 2:1 isometric projection over a voxel grid, with correct depth sorting and ambient occlusion baked at chunk boundaries. REQUIREMENTS - Runs in a browser with no build step. Canvas 2D unless the angle genuinely requires 3D, in which case three.js. - Fixed-timestep update loop with interpolated rendering, so it behaves the same at 60Hz and 144Hz. - Every tuning constant in one CONFIG object at the top, exposed as live sliders in a debug panel. You will find the feel by dragging those, not by prompting. - All content — levels, entities, balance numbers — in JSON or plain data files, never inline in the logic. - Audio generated with the Web Audio API rather than asset files. - Respect prefers-reduced-motion: keep the fades, drop the shake and the parallax. BUILD ORDER 1. The core loop with placeholder rectangles, at the reduced scope the angle demands. No theme, no art, no audio. Make it fun as rectangles first. 2. The angle's consequences. Cutting to bots, or to turn-based, or to one level changes the design rather than just shrinking it — find out how and rewrite step 1. 3. The theme, as content and data. 4. The look, applied last as a rendering layer over a game that already works. Start by writing a one-page plan: the core loop, what the angle removes and what that frees you to do properly, and what you are deliberately leaving out. Wait for me to approve it before writing code.
- MDN — 2D breakout game using pure JavaScript, ten-part tutorial
- end3r/Gamedev-Canvas-workshop — finished source for that tutorial
Half the time one of these already does what you wanted, and the other half it saves you a week of solving a problem someone documented in 1997.
One count per game. No account — it is tied to a salted hash of your IP, which is not stored in a form anyone can reverse. Every build adds 1 team-years to the counter on the homepage.
Then try these
Questions
How hard is Breakout to rebuild with an AI agent?
Yes — every game is buildable at some scope. The question is how hard, and Breakout is FIDDLY (2 of 5). You will get it, but one specific system will fight you. A ball striking the exact corner of a brick is genuinely ambiguous, and resolving on the wrong axis drops it through a solid wall twice an hour, never while you are watching. Reckon on an evening to something you can actually play — not to something that matches the 1 team-years Atari spent.
What makes Breakout hard to rebuild?
A ball striking the exact corner of a brick is genuinely ambiguous, and resolving on the wrong axis drops it through a solid wall twice an hour, never while you are watching. That is why it sits at FIDDLY rather than a tier either side of it. If you want the idea without the project, the transferable part is resolve collisions on the axis of least penetration — an evening of work.
How long does it take to build a Breakout clone?
Wrong question, and it is worth saying why. Nobody rebuilds Breakout — the original took Atari on the order of 1 team-years, released in 1976 on Arcade. What you can do is reach something playable and genuinely yours in about an evening, and then keep going for as long as it stays interesting. Any figure that claims otherwise is measuring a prototype and calling it a game.
What do I lose by building my own Breakout?
The colour overlay strip, because the original was a black and white monitor with tinted cellophane taped over the glass. Atari's trademark and the folklore of Wozniak's 44-chip breadboard. Every power-up, boss and level pack from the Arkanoid line, which is what most people actually mean when they ask for this. Those are the parts a prompt will not hand you.
Which AI coding agent should I use to build it?
Any of Claude Code, Codex or Cursor will handle this prompt. Paste it as your first message, let the agent scaffold the project, then iterate on feel — the second, third and tenth prompts are where a game actually gets good. Work in an empty folder or a fresh git branch so you can throw it away cheaply.
One email when new games go on the list. No other reason to email you, ever.