A run down nine streets
The martial artist from the front of this site, seen from behind, running a street that keeps going. Nine of them, each built out of the same four inks the rest of the page is drawn in.
Streets0
Distance0 m
Trips□□□
Meter□□□□□
The game did not load. Everything else on this page still works.
How to play
Both schemes, and every key on this table is a key the game answers to — the table is built from the input layer itself rather than written out beside it, so a control that stopped working would stop being printed here.
| Verb | Keyboard | Touch |
|---|---|---|
| Move left | ← · A | Swipe ← |
| Move right | → · D | Swipe → |
| Jump | ↑ · W · Space | Swipe ↑ |
| Slide | ↓ · S | Swipe ↓ |
| Spin kick, with a full meter | Shift | Swipe ↓ with a full meter |
| Start, and start again | Space · Enter | Tap |
| Pause, and resume | Esc · P | — |
| Mute | M | — |
Three trips and the run is over. Nothing moves until you press — including if you have asked your system for reduced motion, in which case the camera also stops leaning and shaking, and the running itself is unchanged, because the running is the part you came for.
Three notes
What it is, what it costs you to have it on the page, and how it got made.
- 01
What it is made of
Arithmetic and a 2D canvas. No sprite, no model, no texture, no image file anywhere in it — the street, the man and everything he trips over are strokes drawn each frame from the same four inks the rest of this site is set in, read out of the stylesheet at boot rather than copied into the code.
- 02
What it costs the page
About seven hundred bytes before you press anything: a shim that waits for the button. The game itself is a thirty-one kilobyte download that happens on the press and never before it, so arriving here and reading the page costs you nothing you would notice, and the picture above is drawn by the server.
- 03
How it was built
The same way everything else here is — a plan written before a line of it existed, the hard part measured rather than argued about, and a picture rendered of every animation on the grounds that prose about how a run cycle feels is not evidence. The write-up comes later; the code is readable now.
Interested in working on code?
If this is the sort of thing you would rather be doing than what you are doing, say so. I would rather hear from someone who read the source than someone who read the pitch.