Canvas · Vanilla JS · 60 FPS · Touch ready

BRICK//BREAKER v1.0

Stateready
FPS60
Grid8×4

Controls input map

←→AD

Slide the paddle — 7 px per tick, clamped to 0–340 px.

SpaceClickTap

Launch the ball. Moving while launching adds english to the angle.

Drag

Touch drag anywhere on the screen — the paddle tracks your finger.

P

Pause / resume the loop.

REnter

Full reset — bricks, score, lives, ball.

Physics notes engine

Paddle english

Hit offset (x − cx) / 32 maps to a ±65° exit angle, so edges fire wide and the centre goes nearly straight up. Vertical speed never drops below 35% of magnitude — no flat ping-pong stalls.

Axis-resolved brick hits

Overlap on X and Y is measured for every live brick; the smallest penetration wins, so only the closest brick resolves. Top/bottom flips dy, sides flip dx, then the ball is pushed fully outside the brick — it can't get swallowed.

One collision per frame

Brick resolution breaks after the first hit and the ball is repositioned out of penetration, so a single frame can never destroy two bricks or re-trigger the same one.

Constant magnitude

Every bounce renormalises velocity to speed, which ramps 3.2 → 4.0 px/frame as the grid empties. Direction changes, speed never does.

Fixed timestep

Physics runs on a 16.67 ms accumulator (max 4 catch-up steps), so 120 Hz phones and 60 Hz monitors play identically.