SVG
No canvas, no game engine
Refs
Velocity outside render state
React 19
With the React Compiler on
Overview
Pong, but built to answer a specific question: how far can you get with React state and SVG before you actually need a canvas? The ball, the paddles and the court are all elements in the DOM, positioned from state on a fixed interval.
The answer is: further than expected, and the failure mode is instructive. Velocity lives in a ref rather than in state, because a value that changes every tick should not queue a render for every change; the same goes for the score guard that stops one crossing from counting twice. That is the real lesson of the project — knowing which values belong to React and which are just numbers React does not need to hear about.
What it does
- 01Two-paddle play with keyboard control and continuous key-hold movement
- 02Ball physics on a fixed tick: wall bounce, paddle deflection and serve reset
- 03Velocity and collision guards held in refs, so per-tick values never trigger a render
- 04Score tracking with an animation on each point, and a pause / reset control
- 05The whole court drawn as SVG rather than canvas