Canvas Arcade / Unit BG-400

Breakout

Attract
Model BG-4008×4 Grid · 32 Bricks400×600

Field Manual

// engineering notes
  1. One collision per frame. Every surviving brick is tested with circle-vs-AABB, then only the deepest overlap is resolved and remembered as lastHit so the ball can never re-trigger the same brick twice.

  2. Side detection. Overlap on X vs overlap on Y decides the axis: horizontal penetration flips dx, vertical flips dy. The ball is then pushed flush against the brick face, so velocity magnitude survives the bounce intact.

  3. Paddle English. Contact offset -1…1 maps to a ±65° exit angle plus a slice of paddle velocity — edge hits skid wide, centre hits pop almost straight up.

  4. Speed envelope. Magnitude is renormalised after every bounce, ramping 3.40 → 4.00 px/frame as the field clears. A vertical floor on dy prevents infinite horizontal stalls.

  5. Fixed timestep. Physics runs in 16.67 ms steps inside requestAnimationFrame, so 120 Hz phones and 60 Hz desktops play at identical speed.

Field400 × 600 canvas
Grid8 col × 4 row @ 50×20
Paddle60 × 10 @ y 580 · x 0–340
Ballr 3 · start (200, 570)
Launchdx 2, dy −2.8 normalized
Value+10 per brick · max 320
Lives3 starts
Depsnone — vanilla