Pipe Dreams

Preview

Built with

JavaScript · Canvas · PWA · Service Worker · CSS

Overview

Pipe Dreams is a Flappy Bird clone built from a handful of static files - an HTML page, a stylesheet, one JavaScript file, and a service worker - with no dependencies and no server-side code at all. Physics runs on a fixed 120 Hz timestep behind an accumulator, decoupled from rendering, so the game plays identically on a 60 Hz laptop and a 144 Hz monitor, and a long frame from a backgrounded tab is clamped rather than teleporting the bird through a pipe. Collision is a closest-point circle-vs-rectangle test against both halves of each nearby pipe. A home screen lets you pick one of six birds, drawn from colour palettes rather than image assets so they cost nothing to load; they are cosmetic only, with identical hitboxes and nothing locked behind a score, because a client-side game cannot enforce an unlock anyway. It installs to a home screen and plays offline, and your best score lives in localStorage on your own device - deliberately no global leaderboard, since a client-side game cannot prove its own score.

Highlights

• Fixed 120 Hz physics timestep with an accumulator, decoupled from render rate
• Long frames clamped, so a backgrounded tab never tunnels the bird through a pipe
• Closest-point circle-vs-rectangle collision against both halves of each pipe
• Six selectable birds drawn from palettes, purely cosmetic so scores stay comparable
• Bronze, silver, and gold medals at five, fifteen, and thirty pipes
• Installable PWA: the service worker precaches every asset for offline play
• Fully playable on a phone - on-screen buttons on every screen, no keyboard needed
• Best score and bird kept in localStorage, both validated as untrusted input on read
• No backend, no API routes, no dependencies - nothing to inject into or exfiltrate to