Arcade · HTML5 Canvas · Vanilla

Breakout

Field 8 × 4 Ready

Collision readout

  1. 01
    AABB with least-penetration axis

    Ball is treated as an expanded box. Overlap depth on X vs. Y decides which face was struck — thin overlap on X means a side hit (flip dx), thin overlap on Y means a top/bottom hit (flip dy).

  2. 02
    One resolver per physics step

    All candidate bricks are scanned, but only the deepest-penetrating one is resolved, so a fast ball crossing a seam can't destroy two bricks or invert itself twice in a step.

  3. 03
    Fixed 120 Hz sub-stepping

    Frame time is decoupled from physics. Each step moves ≈1.7 px — smaller than the 3 px ball radius — so tunnelling through a 20 px brick is impossible at max speed.

  4. 04
    Constant velocity magnitude

    Every bounce re-normalises |v| to the current speed (3.44 → 4.00 as the field empties). A minimum vertical component is enforced so the ball can never lock into a flat horizontal loop.

  5. 05
    Contact-offset paddle angles

    Hit position across the 60 px paddle maps to ±65° exit angle; edge hits produce steep glancing shots, dead-center hits produce a near-vertical return. Paddle side faces also reflect dx.