Gold Rush Runner

A 3D endless runner where you shoot through waves of zombies, collect gold, and upgrade your weapons — built entirely with React Three Fiber and AI-assisted development on MeDo platform.

Comment

Inspiration

Hyper-casual mobile games like Subway Surfers, Temple Run, and zombie shooters are among the most played games worldwide with billions of downloads. We wanted to push the boundaries of what's possible in a browser — could we build a fully featured 3D endless runner with shooting mechanics, enemy AI, boss fights, and meta progression using only React and Three.js? No Unity, no Unreal, no game engine. Just JavaScript and a lot of creativity.

What it does

Gold Rush Runner is a 3D endless runner shooter where you fight through infinite waves of zombies to survive as long as possible:

🏃 Auto-runner — your character runs forward automatically through an ancient temple path, you switch between 3 lanes to dodge enemies and collect upgrades

🔫 Auto-shooting — bullets fire automatically at enemies approaching from ahead, upgrades improve fire rate, damage, and bullet count

⚡ Math upgrade gates — pass through glowing gates to multiply your bullets (x2, x3), boost damage, increase fire rate, or risk negative effects (-5 HP, /2 power)

🧟 5 enemy types — Regular Zombie, Fast Zombie (zigzag movement), Tank Zombie (armored, 50% damage reduction), Ranged Zombie (shoots projectiles), Explosive Zombie (detonates on contact)

💣 Boss encounters — Stone Golem, Zombie King, and Explosive Titan spawn every 15 kills with unique attack patterns and massive rewards

🔫 7 unlockable weapons — each with unique mechanics:

  • Tactical Pistol (default) — reliable single shot
  • Combat Shotgun (300 coins) — 5-bullet spread, devastating at close range
  • Void Laser (500 coins) — continuous beam hitting all enemies in line simultaneously
  • Nova Launcher (1000 coins) — explosive rockets with area damage
  • Pulse Revolver (1500 coins) — ricochet bullets that bounce and hit multiple enemies
  • Storm Caller (2000 coins) — rapid-fire electric bursts
  • Inferno Cannon (2500 coins) — fire projectiles that leave burning trails

🏆 Meta progression — earn coins, unlock weapons (Shotgun, Laser, Rocket Launcher, Ricochet Pistol), buy skins, purchase permanent upgrades

🎯 Daily missions — kill zombies, reach level targets, collect coins for bonus rewards

🏅 Achievements — First Blood, Survivor, Veteran, Boss Slayer and more

🔊 Procedural sound — all sound effects generated with Web Audio API, no audio files needed

📱 Mobile ready — touch controls, PWA installable directly from browser

How we built it

  • React Three Fiber — 3D scene rendering inside React component tree
  • Three.js — geometry, materials, lighting, shadows, particle systems
  • Zustand — game state management with localStorage persistence for scores, coins, unlocks
  • Tailwind CSS — HUD overlays, menus, and UI components
  • Web Audio API — procedurally generated sound effects for shooting, explosions, level up, combos
  • Supabase — global leaderboard storing top scores with player names
  • Vite — fast build tooling and hot reload during development
  • MeDo Platform — AI-assisted development, deployment, and iteration

The game loop runs entirely inside React Three Fiber's useFrame hook — collision detection, enemy AI, bullet physics, particle systems, and camera shake all execute 60 times per second without blocking React's render cycle.

Challenges we ran into

Performance vs React: The biggest challenge was running collision detection, particle systems, enemy AI, and animations inside React's render cycle. Calling setState inside useFrame caused concurrent rendering errors. We solved this by moving all position/velocity data to refs and only syncing to React state for UI updates.

Post-processing crash: Bloom, Vignette, and other post-processing effects from @react-three/postprocessing crashed the Canvas entirely on the MeDo platform. We simulated glow effects using emissive materials with high emissiveIntensity instead — no post-processing pipeline needed.

Mobile controls: Touch controls needed to be large enough for thumbs without blocking the game view on small screens. We used fixed bottom-corner buttons with 80px minimum touch targets.

Sound without files: We wanted satisfying sound effects but couldn't use audio files. We built a complete sound system using only Web Audio API oscillators — shoot sounds, explosions, level-up melodies, and combo escalation tones.

Enemy AI variety: Making 5 enemy types feel meaningfully different with only position/velocity manipulation. Fast Zombie zigzags with Math.sin, Ranged Zombie holds position and fires projectiles, Explosive Zombie flashes red when low HP.

Accomplishments that we're proud of

  • Built a fully playable 3D game with no game engine — just React and Three.js
  • 5 distinct enemy types with unique AI behaviors
  • 4 unlockable weapons with different mechanics (spread, beam, area damage, ricochet)
  • Complete meta progression loop — coins, shop, skins, permanent upgrades, missions, achievements
  • Boss fights with warning animations, unique attacks, and spectacular death effects
  • Procedural sound system with zero audio files
  • Runs at 60fps in the browser on desktop and mobile
  • Infinite level scaling that genuinely gets harder and more chaotic
  • 7 weapons each with mechanically distinct behavior — not just stat increases
  • Full shop system with weapon previews, coin economy, and persistent unlocks

What we learned

  • React Three Fiber is surprisingly capable for game development — the component model maps well to game objects
  • useFrame refs vs useState is critical for performance — game data should never live in React state if it changes every frame
  • Zustand with persist middleware is perfect for game save state — simple, fast, works offline
  • Web Audio API can generate genuinely satisfying game sounds with just oscillators and gain nodes
  • Emissive materials with high intensity are a great post-processing alternative when EffectComposer isn't available
  • MeDo's AI platform dramatically accelerated development — features that would take days were built in hours

What's next for Gold Rush Runner

🚀 React Native port — using Expo + expo-gl to bring the game to Google Play and App Store natively

🌍 New biomes — Snow Temple, Lava Ruins, Crystal Cave — each with unique enemies, obstacles, and visual themes

👾 Multiplayer — real-time racing using WebSockets, race a friend through the same obstacle course

🏆 Daily tournaments — compete for the top spot on a 24-hour leaderboard, winner gets exclusive skin

🤖 AI-generated levels — use GPT to dynamically generate unique obstacle patterns and enemy wave compositions

💎 Cosmetic marketplace — community-created skins and weapon skins

🎵 Dynamic music — procedurally generated background music that gets faster and more intense as level increases

Built With

Share this project:

Updates

Submission history