I've built Breakout a hundred times and it's always the same flat rectangles blinking out of existence. This time I wanted the destruction to feel physical: bricks that crack, shatter into shards, and a ball that reads as fast.
What kept failing was the model treating "particles" as a vague afterthought, so I got a single puff of 3 gray dots. I rewrote the prompt to specify particle counts, velocities, gravity, and lifetime per event, plus a velocity-scaled motion trail on the ball. Night and day difference.
Sharing the prompt. Open question at the bottom about paddle-hit angle control.
Build Breakout as a single HTML file, 2D canvas, 60fps, vanilla JS only.
Layout: 900x600 canvas, 8 rows x 14 bricks, 3 hit-tiers (top rows tougher, tinted differently). Paddle follows mouse X and also responds to left/right arrows. Ball launches on click.
Juice budget (implement every item with the stated numbers):
1. Ball trail: store the last 10 positions, draw them as fading circles (alpha 0.6 -> 0, radius shrinking), so fast balls smear.
2. Brick hit: 2px screen shake decaying over 120ms + the brick flashes white for 1 frame before losing a tier.
3. Brick destroyed: spawn 12 shard particles with random velocity 80-220px/s, gravity 600px/s^2, lifetime 500-800ms, colored to match the brick; play a short blip.
4. Paddle hit: squash the paddle to 0.9 height for 80ms (easeOutBack recovery).
5. Combo: each brick destroyed without touching the paddle increases a multiplier; reset on paddle bounce.
Physics: ball speed constant, but reflection angle off the paddle depends on WHERE it hits (center = straight up, edges = up to 60deg). Never let the vertical component reach 0 (no infinite horizontal loops). Cap total shake at 6px. Respect prefers-reduced-motion. List each event's particle spec before the code.