People who play Rat Run keep asking me the same thing: is this an HTML web game? It is, and a very plain one. This page is the longer answer, for anyone curious how a small backyard platformer about a roof rat named Love was put together.
The short answer
Rat Run is one web page. It is a single HTML file of plain JavaScript that draws the game onto a canvas in your browser. There is no game engine, no framework and nothing to install. Its code and music live in that one file, its pictures sit beside it, and this site shows it inside a frame on the game page.
What it runs on
- One HTML file of about 14,000 lines, with no outside scripts or stylesheets
- Plain JavaScript
- The browser’s Canvas 2D drawing surface
- Web Audio, the browser’s built-in sound system, for the music and the sound effects
- The browser’s local storage for saved progress
- Pointer events, so the same game answers a mouse, a finger or a pen
The picture
The game draws on a small screen of its own, 480 by 270 points, and scales that up to fit whatever you play on. A fence gap is in the same place on a phone as on a big monitor; only the size changes. The browser calls the game’s drawing loop just before it paints each new frame (this is called requestAnimationFrame), so the motion keeps pace with your screen.
The animals were made with AI image tools and then cut into sprite sheets: one pose per cell, standing, climbing, swimming, jumping, falling, ducking and sitting, which the game steps through to make Love move. In the copy I work on, the pictures are packed inside the game file itself, written out as text.
The sound
Every note of music and every other effect is synthesised in Web Audio from code and public-domain scores. The effects are built from oscillators and filtered noise, and the music is sequenced from old printed scores by Bach, Mozart, Tchaikovsky, Vivaldi, Grieg and Handel, freshly arranged for the game.
There is one real recording in the game: Walter’s own startle call, the little “eh eh eh” he made when he fell, cut from one of my own short videos. Love makes that sound when she falls or gets caught and carried. If a browser cannot play it, a synthesised stand-in plays instead.
There is also an optional film at the very end, a short clip of my own footage. It is served from this site, plays after you finish the last zone, and you can skip it.
Saving, controls and accessibility
Your progress and your best run on each difficulty are saved in your browser’s local storage, on your own device.
On a keyboard you move with the arrow keys or A and D, jump with Z or space (hold it longer to jump higher), and duck with the down arrow. R restarts the zone, M switches the music and N the sound effects. On a phone or tablet the game shows buttons on screen, and it reads your touches through pointer events.
The title screen lets you choose mild, medium or spicy. That changes how fast the animals move and how long they warn you, never where the fences and the gaps are. There is also a setting to reduce camera shake and flashes. With it on, the busiest effects are left out and fast poses are held longer.
How it is built and shipped
The copy I work on is one file of about 86 MB, because every sprite sheet is packed inside it. For the site it is packaged lean: the pictures are taken out into ordinary PNG files that sit beside the game, and the game loads them from there. Before anything goes up, a check puts the pictures back and confirms that this rebuilds the original file byte for byte.
The game lives on this WordPress site, and the game page shows it in a frame. Before each release a suite of automated tests runs against it, several of them playing the game in a headless browser, which is a real browser running with no window.
Music credits: the scores come from public-domain editions in the Mutopia Project and IMSLP (the Petrucci Music Library). The full credit for each piece is listed in the game itself.
Go back and play it: The Rat’s Run.