Playable in the browser
ChronoRider
A motorbike time trial born from a 2024 game jam, five of us over 48 hours. You ride a course of more than 11,000 pixels, juggling the throttle, your lean in mid-air and a handful of traps you spring on the way through. Written in Python, it now runs in the browser, on a desktop or under a thumb.
Click inside the window to hand the game your keyboard.
Controls
Keyboard
- →←
- Accelerate and back up
- ↑↓
- Lean in mid-air
- Space
- Jump
- B
- Drop the meteorite balloon
- Esc
- Pause
- Click
- Spring a trap
Touch
- Bottom corners
- Back up (left), accelerate (right)
- Just above
- Lean
- Centre
- Jump
- Top left
- Pause and balloon
About the project
- A course of over 11,000 pixels, with traps to spring as you go: a meteorite balloon, a rain cloud that slows you down, a falling wall, a gust that reverses your direction.
- Ported from a Python executable to WebAssembly with pygbag, so it plays in one click, with no install and no download.
- Touch controls written for the web build, so it plays under a thumb as well as on a keyboard.
Porting it to the browser
Written in Python with pygame, the game only ran on a machine with the right environment installed. Compiling it to WebAssembly with pygbag makes it playable in one click: nothing to install, nothing to download.
The port was not a recompile. The game loop had to become asynchronous so it hands control back to the browser on every frame, every asset load had to move after the screen is created, the audio had to be converted to OGG for want of an MP3 decoder on the WebAssembly side, and touch controls had to be written from scratch.
Two optimisations the game needed to be playable
The backdrop is a single 16001 × 3271 image — 200 MB in memory once decoded, enough to take a tab down with it. The camera never moves vertically, so only a 768-pixel band is ever on screen: cropping it at build time cut the cost by four.
Collision checks walked all 4,844 objects on the map four times a frame, north of 12,000 comparisons. Fine on a desktop CPU, not inside an interpreter compiled to WebAssembly. Splitting the map into cells brought that down to a few dozen.
4.7 MB
Download
60 fps
Frame rate
~4 s
Load time
Details
- Role
- Developer · Game jam & web port
- Year
- 2024
- Built with
- PythonpygamepygbagWebAssemblyTiled
Curious about the rest?
Everything else I have designed, built and shipped, in one filterable index.