Hey devs, Ishant here 👋
Quick question before we start:
Why does every web game need to be 200MB?
And why does my phone start sounding 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 LOL)
Here’s the funny part.
Metro Runner is a PWA.
Which means:
- Chrome already ships the engine
- Three.js is shared
- Assets are all CSS and magic
👉 Actual download size: a few hundred KBs
Yes.
KBs. Not MBs. Not GBs.
You can literally:
- open the site
- install it
- and boom — game on your home screen 💻📱
Chrome users don’t even realize they already downloaded half the engine when they installed Chrome. (I was one of them 💀💀)
🎮 What Even Is Metro Runner?
It’s a 3D endless runner with:
- Three-lane movement
- Jump / slide mechanics
- Increasing speed
- Coins
- Power-ups
- A shop
- Multiple biomes
- And a UFO abduction event (we’ll get there 💀)
Think Subway Surfers, but:
- browser-native
- actually 3D
- and way more unhinged.
👉 Play it here: https://metrorunner.vercel.app/
🧠 “Did you use a game engine?”
No 😏
This is:
- React Three Fiber (Three.js)
- 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.
Classic illusion.
Still undefeated.
🚂 Trains, Ramps, and a Bug That Became a Feature 💀
Here’s where it gets funny.
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 speeds that felt illegal
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.
Which means:
- at high speed
- sloppy jumps
- bad timing
👉 You get knocked off and game over.
Now it’s not a bug.
It’s “skill-based punishment.” 😤
🚂 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
- You teleport to a new biome
- +25 free coins
- Temporary invincibility
Is it realistic?
No.
Is it funny watching a runner game suddenly turn into sci-fi?
Absolutely. 🛸
⚡ Power-Ups (Yes, Those Particles Are REAL)
| Power-Up | Effect |
|---|---|
| 🧲 Magnet | Pulls coins |
| 👟 Super Boots | 2.0× jump |
| 🛹 Hoverboard | One free crash |
| 🚀 Headstart | Rocket boost |
| ✖️ Multiplier | Double coins |
| 🚀 Jetpack | Fly above obstacles |
And yes:
- those particles
- wind streaks
- speed lines
They’re not “visual effects”.
They’re selling 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
- 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 / 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 🖤
Top comments (0)