When you are offline, Google Chrome drops a pixel dinosaur onto your screen. It is a brilliant bit of UX—turning a connection error into an interactive game. Let’s explore how we built a fully-playable, standalone Dino Game using HTML5 Canvas, Web Audio synthesis, and React.
Press Space or Click to Jump
Keep the dinosaur safe! Relieve some developer tension right in the browser.
1. The 60FPS Canvas Game Loop
React state updates are designed for document lifecycles, not high-speed physics calculations. For smooth 60fps animations, we leverage the HTML5 <canvas> element combined with requestAnimationFrame.
By creating a single loop, we handle physics (updating the dino's gravity and vertical velocity), procedural obstacle generation (cacti spacing), and collision bounding boxes in a single thread, bypassing React's re-rendering overhead completely.
2. Zero-Asset Sound Synthesis
To make the game self-contained, the retro beeps are synthesized in the browser with the Web Audio API. A virtual OscillatorNode changes frequency over a short interval—for example, moving from 150Hz to 600Hz for a jump—so the game can produce square-wave audio without loading external MP3 files.
3. High-Score Persistence
Connecting the score to localStorage lets the browser retain a personal best between sessions unless the site data is cleared. Test your reflexes and see how far you can run.