Cabinet No. 04 · HTML5 Canvas · 8×4 Block Wall
One ball, one paddle, 32 cyan blocks. Read the rebound angle, keep the tempo, clear the wall — three lives and nothing else.
Score
Lives
Blocks
The playfield is a strict 400×600 canvas — 8 columns of 50×50-unit brick slots, four rows deep, top-aligned under the HUD. Everything else is judgement calls at 60 frames a second.
The ball rests on the paddle centre at (200, 570). Tap the screen, hit Space, or press LAUNCH to fire along the base vector (2, −2.8) — normalised, then scaled to speed. Never straight up: the serve always leaves at roughly 36° off vertical, and alternates shoulder after every life lost.
Contact is measured as a signed offset from the paddle's midpoint, then mapped to a rebound of up to 62° off vertical. Catch it on the left lip and the ball screams left; dead centre returns a near-vertical arc. A pinch of paddle momentum leaks into the ball for feel — the vector is renormalised right after, so speed never inflates.
Every frame the ball's motion is split into sub-steps so it can never travel further than its own radius. Each sub-step tests the ball's AABB against all live bricks, keeps only the shallowest penetration, flips the matching axis, and shoves the ball clear of the block. Result: no tunnelling, no double-flips, no ball eating itself inside a brick.
Physics runs on a fixed 60 Hz accumulator while rendering follows the display refresh — 120 Hz phones and 60 Hz monitors play identically. Speed drifts from 3.4 to 4.0 px/frame as the wall thins, and each level adds a touch more heat.
Touch uses relative dragging — the paddle picks the ball up from wherever your thumb lands, so it never snaps out from under you mid-rally.