From Zero to PlanetHop: How I Built a 3D Space Game in 6 Hours with AI and Three.js

#webdev #javascript #ai #chatgpt

Hey Dev.to crew, buckle up—because I’m about to take you on a wild, cosmic ride!🪐

Over one crazy weekend, I went from knowing nothing about game development or Three.js to launching PlanetHop, a 3D space exploration game where you zip through a galaxy, hopping neon planets with a boost-powered spaceship.

It’s live at planethop.fun, and I’m still buzzing from the adrenaline of pulling it off in roughly 6 hours.

How? With a little help from AI magic—Cursor, Claude 3.7 Sonnet, and xAI’s Grok as my trusty co-pilot. Let’s dive into this journey—it’s messy, it’s fun, and it’s proof you can build something epic faster than you think!

The Spark: X and Indie Game Dev Vibes

It all started on X (you know, the artist formerly called Twitter). I kept seeing these indie devs—Levelsio with fly.pieter.com and Nicola Manzini with vibe.sail—whipping up games in hours using AI tools.

Levelsio’s retro flight sim? Built in 3 hours. Manzini’s chill sailing vibe? Pure inspiration. I thought, “Wait, I could do that!” No game dev skills? No problem. I had curiosity, a laptop, and a weekend to burn.

So, I decided: I’m making a space game. Planets, spaceships, neon lights—let’s go!

The Tools: AI as My Wingman

I didn’t start with a blank slate—I had some serious AI firepower:

Cursor: An AI-powered IDE that writes code like a dream. It’s like having a pair programmer who never sleeps.
Claude 3.7 Sonnet: Anthropic’s beast of a model, churning out Three.js snippets faster than I could Google them.
Grok (xAI): My guide, answering questions like “How do I tilt a spaceship?” or “What’s a HUD?” with cosmic patience.

Picture this: me, a total newbie, asking Grok, “How do I make a 3D cube fly in space?” Six hours later, I’ve got a glowing green ship hopping planets. AI didn’t just help—it made this happen.

The Build: Chaos, Code, and Cosmic Fun

Saturday morning, coffee in hand, I kicked off with Three.js. First step? A spinning cube—my “spaceship.” Cursor spat out a basic scene:

const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const spaceship = new THREE.Mesh(geometry, material);
scene.add(spaceship);

It spun like a fidget spinner in space. I was hooked.

Next, controls. “Claude, give me WASD movement!” Boom—my cube was zooming. But it felt flat. I asked Grok, “How do I tilt it?” We cranked the pitch to 0.5 radians—suddenly, it’s dipping and soaring like a real ship. I flipped the camera 180° to stare down its nose, and whoa—it felt alive.

Then came the planets. I wanted them random, glowing, and wild. Claude cooked up a generator—neon hues, sizes from 5 to 20 units, some with cyan rings that burst on spawn. Press P, and a new planet pops into the galaxy. I’d hop toward one, grinning like a kid.

Boost mechanics? Space key, a draining bar, and a trail of fiery particles—thanks, Cursor. I even threw in a synthwave track from Pixabay, loaded via Three.js’s AudioListener. Picture this: me bobbing my head to retro beats, flying through a neon cosmos I built. Six hours in, I’m yelling, “This is a GAME!”

The Launch: planethop.fun Takes Flight

Sunday night, I deployed it to Vercel—pushed my public/audio/background.mp3 and all. Bought planethop.fun on Namecheap (because .fun screams indie vibes), linked it up, and bam—it’s live.

No game dev degree, no months of planning—just a weekend, some AI, and a domain that’s now my little corner of the web.

What’s Next? The Sky’s Not the Limit

I’m buzzing to keep going. Multiplayer, maybe—imagine hopping planets with friends! Or mobile controls for on-the-go cosmic fun.

But for now, I’m thrilled. From zero to this in 6 hours? That’s the power of AI and a bit of reckless enthusiasm.

Hop over to planethop.fun and take it for a spin—tell me what you think! Ever built something wild in a weekend? Let’s swap stories in the comments—I’m all ears.

Happy coding!🚀