Canvas Arcade · Cabinet №04

BREAKOUT 32

8 × 4 Grid 50 × 20 Bricks 3.44 px / step 60 Hz Fixed

Collision Ledger

Hand-written circle↔AABB resolution — no engine, no libraries, no drift.

  1. 01

    Axis resolution by shallowest overlap

    Contact is proven with a closest-point test (clamp the centre into the rect, compare squared distance to r²). On contact I compare X and Y penetration and flip only the shallower axis, then eject the ball by exactly that overlap — so it can never sink into a brick or jitter in a corner.

  2. 02

    One brick per frame, magnitude preserved

    The ball's bounding box is broad-phased against the 8×4 grid to fetch candidates, and the single nearest overlapping brick is resolved. Velocity is renormalised back to 3.44 px/step after every reflection, with a minimum vertical component enforced — no infinite horizontal lock, no speed creep.

  3. 03

    Angled paddle, never perpendicular

    Contact offset from the paddle centre maps to a ±62° exit angle and is biased by paddle velocity, so a moving paddle can cut the ball. A 40 ms cooldown kills double flips at the lip, and side contact still deflects the ball horizontally off the paddle edge.

  4. 04

    Fixed 60 Hz accumulator, adaptive paint

    Physics steps at a constant 16.67 ms regardless of refresh rate, so a 120 Hz phone and a 60 Hz monitor break bricks identically. Canvas shadows auto-disable if the frame budget slips, and touch input is smoothed toward a target so the paddle glides instead of teleporting.

400×600Play field
60×10Paddle @ y580
r = 3Ball radius
320Max score
3Lives
0–340Paddle travel