🚀 Introduction

Over the past few weeks, I’ve been vibecoding my way through a 3D survival game project using Babylon.js. What started as a messy, monolithic JS file is now a clean, modular codebase — installable as a Progressive Web App (PWA) right from GitHub Pages.

But what made this transformation possible was my decision to use Windsurf — a modern JavaScript workspace tool that simplifies modularization, bundling, and deployment. In this post, I’ll break down how I used Windsurf to structure, build, and ship the game.

👉 Try the game now: Play the Survival Game

---

🎮 The Game at a Glance

Built with Babylon.js, the game offers:

• Procedural terrain using Perlin noise
• Resource harvesting, crafting, and physics interactions
• Combat mechanics with XP and leveling
• AI-driven animal enemies
• A double-jump flying mechanic
• Day/night cycle
• PWA support for offline play

---

🧱 Why Modularize?

My original JavaScript file had ballooned past 1,000 lines. Debugging became painful. Adding new features felt like tiptoeing through a minefield. Windsurf gave me the scaffolding I needed to break the game into bite-sized, testable modules.

---

🌊 Enter Windsurf: The Workflow

1. Breaking the Monolith

Windsurf encouraged me to identify boundaries between systems:

• Terrain
• Player
• Inventory
• Animals
• Combat
• UI

Each became its own file in /js/components/, making it easy to maintain and extend.

bashCopyEditsurvival/
├── js/
│   ├── main.js
│   ├── game.js
│   └── components/
│       ├── terrain.js
│       ├── player.js
│       ├── inventory.js
│       ├── animals.js
│       ├── combat.js
│       └── ui.js

2. Scoped Development

Windsurf’s built-in support for hot module reloading and scoped dev servers made it seamless to test changes in isolation. Each module could be validated on its own before integrating it into the main game loop.

3. ES Module Imports

Windsurf supports native ES Modules, which let me organize my code with clean, readable imports — no bundler config required.

Editimport { TerrainSystem } from './components/terrain.js';

4. Progressive Web App Setup

With the modular structure in place, adding PWA support was painless:

• A manifest.json for installability
• A service worker for offline caching
• Auto-reloading via Windsurf during testing

---

✨ Cool Features Made Easy

Flying Mechanic (Double Jump + Flight)

jump() {
  if (this.canDoubleJump) {
    this.isFlying = true;
    this.jumpVelocity = this.jumpHeight * 0.5;
  }
}

Safe Spawn Area

createFlatSpawnArea() {
  this.spawnPosition = { x: 0, y: 2, z: 0 };
}

Procedural Terrain with Physics

jsCopyEditrock.position.y = y + rockHeight / 2 + 0.05;

These were all easier to prototype and polish thanks to modular logic and reusable utility functions.

---

📦 Installable as a PWA

With just a few lines of configuration, Windsurf helped me ship the entire game as an installable web app:

<link rel="manifest" href="/manifest.json" />
<script>navigator.serviceWorker.register('/sw.js')</script>

Now, you can play the game even when offline — just “Add to Home Screen.”

---

🔧 Developer Setup

Want to tinker with the code?

Clone the repo
git clone https://github.com/CptNope/survival-game

# Serve with any local dev server
npx serve .
# or
python -m http.server 8000

---

🧠 Lessons Learned

1. Start Modular Early — Refactoring later takes time.
2. Keep Systems Decoupled — Clear interfaces are key.
3. Document Everything — Especially when juggling physics, AI, and crafting logic.
4. Use the Right Tools — Windsurf saved me days of config wrangling.

---

🗺️ Next Steps

Here’s what I plan to tackle next:

• Multiplayer support
• Save/load system
• Weather + seasonal effects
• Base building and blueprints

---

🎉 Final Thoughts

This project taught me that code architecture is gameplay. A smoother dev experience means more energy to innovate. Windsurf turned my Babylon.js spaghetti code into a lean, mean, survival machine.

If you’re building a web-based game or 3D app, try structuring your code like this from day one — or better yet, let Windsurf help you get there.

🔗 View the Source on GitHub
🕹️ Play the Game
🕹️ https://cptnope.itch.io/survival-game-web-demo
🧪 Built with Babylon.js + Windsurf