BRICK/BREAKER

Collision resolution, not collision response-by-luck

Everything below runs in one <canvas> with no engine: an explicit accumulator loop, nearest-point AABB tests and a single winner per step.

1. 01

   Fixed-step integration

   Physics runs at a hard 1/60 s tick, decoupled from rAF, so a 120 Hz phone and a 60 Hz laptop get identical trajectories. Long frames are capped at five catch-up steps; the ball is further split into 2 substeps so it can never tunnel through a 20 px brick.

2. 02

   Nearest-point circle / AABB

   Clamp the ball centre into the brick rect, measure the distance to that closest point, and compare against r = 3. Every overlapping brick is scored, but only the one with the shortest centre distance resolves — the rest wait for the next step, so a corner hit never flips both axes.

3. 03

   Least-penetration axis

   Overlap on X vs overlap on Y decides the face. The smaller one is the face you actually crossed: flip dy for top/bottom, dx for left/right, then eject the ball by exactly that depth so it can't re-collide inside the block.

4. 04

   Paddle angle map

   θ = (x − cx) / (w/2) × 58° — dead centre returns straight up, the rim slices it off at a wide cut. After every reflection the velocity is renormalised to the ball's scalar speed, so energy never leaks or compounds; heading is clamped to keep the ball out of pathological horizontal loops.