Introduction

Tilt Breakout is the classic brick-breaker, steered by the physical orientation of your phone. Hold the device in landscape and roll it left or right; the paddle accelerates in that direction rather than snapping to a position, so it carries momentum and has to be steered into place.

Everything runs client-side on a <canvas> — no server round trips, no game state leaves the browser.

Reading the tilt

The deviceorientation event reports the device's attitude as three Euler angles (alpha, beta, gamma) applied in Z-X'-Y'' order. Those angles are relative to the device, not to what you see, so they cannot be used directly: the same physical motion produces different numbers in portrait and in each landscape direction.

Instead, the angles are converted into the direction gravity points in device coordinates,

g = ( cosβ sinγ,  −sinβ,  −cosβ cosγ )

and that vector is then rotated by screen.orientation.angle into screen coordinates. Its horizontal component is the sine of the screen's roll, so taking an asin recovers the roll as a true angle. One code path then covers every orientation, and the number means the same thing in all of them.

Using the angle rather than the raw sine matters once the reading is calibrated. The player's grip at the moment they press start is captured as the neutral point and subtracted, and sines do not subtract evenly: from a 30° resting grip, the sine has already used up half its range, so rolling further would barely register. In angle space the same 22° of roll earns full paddle acceleration from any starting grip.

Notes on the sensor APIs

• iOS requires DeviceOrientationEvent.requestPermission(), and it must be called from inside a user gesture — hence the start button.
• Motion sensors are only exposed over HTTPS.
• The fused deviceorientation angles are used rather than the raw accelerometer, because they are already gravity-corrected and drift-compensated.
• The Generic Sensor API (Accelerometer, AbsoluteOrientationSensor) is a nicer interface but is Chromium-only, so it is not used here.
• Without a motion sensor the game falls back to mouse and keyboard, so it still plays on a desktop.

Game details

• Physics run on a fixed 120 Hz timestep with an accumulator, so behaviour does not change with display refresh rate.
• The bounce angle off the paddle depends on where the ball lands along it, and the paddle's own velocity adds a little spin.
• The paddle leans with the phone, up to 12°. Tilting rotates its surface normal too, so a paddle that visibly points right sends the ball right — what you see is what the ball does.
• Each cleared level adds a row of bricks and a little ball speed.
• A Screen Wake Lock keeps the phone from dimming mid-rally.