FLAPPY ROCKET
Saadie Lab • v1.0 • 2026
About the Game
Flappy Rocket is a premium infinite arcade runner built entirely with vanilla HTML, CSS, and JavaScript. Zero dependencies. Zero build tools. Open index.html in any modern browser and play instantly.
Pilot a rocket through an endless corridor of column obstacles by tapping or clicking to thrust against gravity. Collect coins during each run to unlock new environments and rockets from the in-game store. Every gap cleared scores a point. There is no finish line — only a higher score.
Key Features
- 10 unique playable environments with animated backgrounds and custom pipe styles
- 15 procedurally drawn rockets — all rendered with Canvas 2D, no sprite sheets
- 3 difficulty modes: Normal, Hard, and Insane — each with global speed and gap multipliers
- 10+ automatic progression levels — speed and gap difficulty increase as your score climbs
- Full coin economy — earn coins in-run, spend in the inline store to unlock content
- Complete ad monetization — reward ad on Game Over, lobby interstitial with configurable frequency
- All audio synthesized at runtime via Web Audio API — no audio files bundled
- Zero dependencies — pure HTML5, CSS, and vanilla JavaScript
- Mobile ready — full touch input, DPR-aware canvas, responsive layout
- All player data persisted via localStorage — no server or backend required
Environments
10 unique environments, each with a distinct animated background, custom pipe style, and particle effects. First environment is free; the remaining 9 unlock with in-game coins.
- Deep Space — Twinkling stars and nebula clouds. Free.
- Volcanic — Rising embers, lava glow, basalt pipes. 30 coins.
- Arctic — Drifting snowflakes, aurora bands, ice pipes. 50 coins.
- Neon City — Perspective grid, neon glows, pink-trimmed pipes. 80 coins.
- Cyber Grid — Digital scanlines and glitch flashes. 120 coins.
- Void Storm — Dark void with electric particle bursts. 150 coins.
- Nebula Core — Dense star clusters and colorful gas clouds. 180 coins.
- Desert Storm — Dust particles and sand haze. 200 coins.
- Abyss — Deep ocean with drifting bubbles. 240 coins.
- Corrupted — Glitched reality with digital distortion effects. 300 coins.
Rockets
15 rockets are available in the store. All drawn procedurally every frame — no sprite sheets. Flame shape randomizes each frame for organic flicker. First rocket is free.
- Neon — Free
- Inferno — 20 coins
- Glacier — 40 coins
- Phantom — 60 coins
- Solar — 80 coins
- Crimson — 100 coins
- Specter — 120 coins
- Vortex — 140 coins
- Titan — 160 coins
- Wraith — 180 coins
- Aurora — 200 coins
- Magma — 220 coins
- Quantum — 250 coins
- Serpent — 280 coins
- Omega — 320 coins
Difficulty Modes
- Normal — Standard gap sizes and pipe speed (1× multiplier).
- Hard — 20% faster pipes, 18% narrower gaps (1.2× speed, 0.82× gap).
- Insane — 45% faster pipes, 35% narrower gaps (1.45× speed, 0.65× gap).
All three modes include automatic level scaling — columns scroll faster and gaps narrow as your score climbs, across 10+ progression levels. Pipe spacing adjusts dynamically with speed so at no point are pipes unreachably close together.
How to Play
- Open the lobby. Select an environment and a rocket.
- Choose a difficulty: Normal, Hard, or Insane.
- Press Launch Mission.
- The rocket falls due to gravity. Tap, click, or press Space to thrust upward.
- Guide the rocket through the gap in each column pair. Each gap cleared = 1 point.
- Collect coins that appear between columns to spend in the store.
- Do not touch the columns or the top or bottom edge of the screen.
- The run ends on any collision. Your best score and coins are saved automatically.
- On game over, watch a reward ad to revive and continue your run from where you died.
Tip: Short taps give better control than holding. The rocket tilts with its velocity — read where it is heading and anticipate the next gap early. The rocket is fast — react early and use gentle taps to stay centered in the gap.
Controls
| Input | Action |
| Space / Enter / Arrow Up | Thrust (desktop) |
| Left mouse click | Thrust (desktop) |
| Tap | Thrust (mobile) |
| P / Escape | Pause & Resume |
| HUD Button | Action |
| Sound icon | Toggle all audio on / off |
| Pause icon | Pause the current run |
| Grid icon | Return to lobby |
| Gear icon | Open settings |
Settings
- Sound Effects — Toggle all audio on or off.
- Thrust Trail — Toggle the exhaust particle stream behind the rocket. Off by default.
- Screen Shake — Toggle the death shake effect on collision. Off by default.
- Show HUD — Toggle score, level, and coin display during play.
- Graphics Quality — Low / Medium / High. Controls particle density and background detail. Medium is the default.
- FPS Cap — 30 FPS (battery saving) / 60 FPS (recommended) / Uncapped.
- Difficulty — Normal / Hard / Insane. Applies globally, including level scaling.
- Screen Width — 30% / 60% / 100% (full width, default). Controls the game frame width on desktop. On mobile, the frame is always full-width.
Ad Monetization
- Reward Ad — Shown on the Game Over screen. Player watches the ad and is revived with score intact. Button re-enables on each new death.
- Lobby Interstitial Ad — Fires automatically when the player returns to the lobby. Frequency is configured via the
AD_LOBBY_FREQUENCY constant in script/js/ad-modal.js (default: every 2nd visit). - Easy Integration — Paste any ad network code into a single replaceable file (
ad-placeholder.html). Compatible with Google AdSense, AdMob web units, Media.net, PropellerAds, and any custom HTML banner.
Tech Stack
- HTML5 Canvas 2D — All graphics rendered procedurally every frame. No image assets.
- Web Audio API — All sound synthesized at runtime. No audio files.
- Vanilla JavaScript — No React, no Phaser, no jQuery. Pure browser APIs only.
- Google Fonts CDN — Orbitron, Space Grotesk, Rajdhani, Share Tech Mono. Loaded via CDN; requires an internet connection on first load (cached by the browser after that).
- localStorage — Best score, coins, unlocks, and settings all persist automatically.
- Inline store — The full 10-environment and 15-rocket store renders inside the lobby card via a CSS flip animation. No iframes, no separate store pages.
- Speed-aware pipe spacing — Pipe gaps widen automatically as speed increases. Gap size scales with screen height (not fixed pixels) so every screen size gets a fair challenge.
- Zero npm. Zero build tools. Zero dependencies.
Requirements & Compatibility
No server required for gameplay. Open index.html directly in any supported browser.
- Chrome 80+
- Firefox 75+
- Safari 14+
- Edge 80+
- iOS Safari 14+
- Android Chrome 80+
Note: The ad system uses an iframe (ad-placeholder.html). Serve via a local or live web server during development — opening via file:// may block the ad iframe in some browsers. The in-game store is fully inline and does not use iframes.