🚇 I Accidentally Built a Full 3D Endless Runner Game in the Browser (It’s in KBs btw)
Source: Dev.to
Source: Dev.to – I Accidentally Built a Full 3D Endless Runner Game in the Browser (It’s in KBs btw)
Hey devs, Ishant here 👋
Quick question before we start:
- Why does every web game need to be ~200 MB?
- Why does my phone sound like a jet engine the moment I open them?
So I did something irresponsible… again!
In ~6 hours, fueled by coffee and poor decisions, I built Metro Runner — a full‑3D endless runner that runs entirely in the browser.
- No Unity.
- No Unreal.
- No Godot.
- Just Three.js, React, and Audacity. 💀
📦 Size Flex (Chrome Users Don’t Know This)
Metro Runner is a Progressive Web App (PWA). This means:
- Chrome already includes the rendering engine.
- Three.js is shared across sites.
- All assets are delivered as CSS and lightweight resources.
Actual download size: only a few hundred KB (yes, KB, not MB or GB).
You can:
- Open the site.
- Install the PWA.
- Launch the game from your home screen.
Chrome users often don’t realize they’ve already downloaded half the engine simply by using Chrome. (I’m one of them! 😂)
🎮 What Is Metro Runner?
Metro Runner is a 3D endless‑runner browser game featuring:
- Three‑lane movement
- Jump / slide mechanics
- Increasing speed as you progress
- Coins & power‑ups to collect
- An in‑game shop for upgrades
- Multiple biomes with distinct visuals
- A quirky UFO abduction event (more on that later 💀)
Think Subway Surfers, but:
- Runs natively in the browser
- Fully 3D graphics
- Much more unhinged
👉 Play it here: [Insert game link] (replace with the actual URL)
🧠 “Did you use a game engine?”
No 😏
It’s built with React Three Fiber (Three.js) and:
- Custom game loop
- Manual collision logic
- Fake speed via world movement (delta‑time‑based motion)
The player barely moves forward; the world rushes toward you—a classic illusion that remains undefeated.
🚂 Trains, Ramps, and a Bug That Became a Feature 💀
At high speed, sometimes:
- The player hits a train ramp
- Trips, gets launched, and dies 💀
I tried fixing it (sweep collision, alignment tweaks, debugging at illegal speeds).
Did it work? No.
So I did what every sane developer does: If you can’t fix a bug — promote it to gameplay.
🧠 Lore Update
Some train ramps are slightly misaligned with coaches. At high speed, sloppy jumps lead to a skill‑based punishment (you get knocked off and game over).
Now it’s not a bug; it’s intentional.
🚂 Train Systems (a.k.a. Pain Generators)
- Regular trains – static + moving
- Triple‑train ramp sections (~10%) – all lanes blocked, ramps on top, huge coin reward
- Train‑hopping sections (~10%) – jump between trains across lanes; miss once = back to menu 💀
Trains have real collision—no ghost clipping.
👽 Alien Abduction Event (I Lost Control Here)
Random event during runs:
- UFO appears
- Green lights & tractor beam
- Screen fades
- Teleport to a new biome
- +25 free coins and temporary invincibility
Is it realistic? No.
Is it funny? Absolutely. 🛸
⚡ Power‑Ups (Yes, Those Particles Are Real)
| Power‑Up | Effect |
|---|---|
| 🧲 Magnet | Pulls coins |
| 👟 Super Boots | 2× jump height |
| 🛹 Hoverboard | One free crash |
| 🚀 Headstart | Rocket boost |
| ✖️ Multiplier | Double coins |
| 🚀 Jetpack | Fly above obstacles |
Those particles (wind streaks, speed lines) aren’t just “visual effects”; they sell the illusion of speed. Jetpack particles come from the jetpack, not vibes.
🏪 Shop System (I Went Too Far)
- Buy power‑ups with coins
- Upgrade magnet duration (up to 6 levels)
- Choose starting power‑ups
The inventory persists via localStorage. Close the tab, reopen later—your grind is saved. 😤
🌍 Biomes
- 🚇 Subway
- 🏙️ City
- 🌲 Forest
Biome switches are forced, so runs don’t feel copy‑pasted.
🥚 Easter Egg
Click the game title in the menu.
That’s all I’ll say 😏
🔧 Tech Stack (a.k.a. Bad Decisions)
- React + TypeScript
- Three.js (via React Three Fiber)
- Custom collision logic
- Particle systems
- PWA (installable, offline‑friendly)
- Saved state via
localStorage
No engine, no physics library babysitting—just math, timing, and vibes.
🧠 Why I Built This
I wanted to see: Can a real 3D game live comfortably in the browser… and still feel good?
Turns out — yes. And it fits in KBs, which still feels illegal.
🙌 Feedback
Feel free to drop comments, suggestions, or just say “wow!”
Roasts Welcome
If you play it:
- Tell me where you died.
- Tell me which ramp betrayed you.
- Tell me if the UFO jump‑scared you.
Now excuse me while I pretend this was “just a quick experiment.”
— Ishant 🖤