Building Sky Runner: a canvas endless-flyer in plain JavaScript
Sky Runner was the arcade's first cabinet: a nimble prop plane, pastel skies, ninety seconds of dodging traffic. It's one HTML file with a single <canvas>, and it taught us most of what now counts as "house style" for our games.
One file, on purpose
Client work taught us that every dependency is a future maintenance bill. So the rule for the arcade was set on day one: no engine, no framework, no build step. The whole game â physics, rendering, UI, sound of silence â is handwritten JavaScript in one file. When something breaks on a specific phone, there is exactly one place to look.
The game loop
The core is the classic requestAnimationFrame loop: read input, advance the world, draw the frame. Obstacles spawn on a timer that tightens as the run progresses, and every object is a plain JavaScript object in an array â no classes, no clever abstractions. At Sky Runner's scale, the naive approach isn't a compromise; it's the fastest thing you can write and the fastest thing the browser can run.
Difficulty is a feeling, not a formula
The first version ramped speed linearly and felt wrong: boring for twenty seconds, unfair at sixty. What finally felt right was a curve that front-loads a gentle warm-up, then accelerates in small steps the player can perceive. We shipped five selectable difficulty levels because play-testers split into two camps â "let me survive" and "hurt me" â and no single curve satisfied both.
Touch was the real boss fight
Half our players are on phones, so the plane follows your finger with the game field owning touch-action: none â otherwise the page scrolls while you dodge, which is a comedy genre of its own. The lesson that stuck: drag input must be offset from the fingertip, or the player's own thumb hides the plane at the exact moment precision matters.
What we'd tell past us
- Build the pause/game-over overlays first. Bolting UI onto a running loop later is misery.
- Playtest on the cheapest Android you can find. If it's smooth there, it's smooth everywhere.
- Ninety seconds is a great session length: long enough to matter, short enough for "one more run."
Play it here: Sky Runner. Then come back and tell us your best level-5 score â the contact page is open.