Full 3D Space RTS Game in a Single HTML File
Sometimes the most impressive code isn’t found in sprawling repositories with thousands of files—it’s in a single, self-contained creation that just works. That’s exactly what developer jjwallace delivered with their CodePen project: a complete real-time strategy game rendered in beautiful 3D, all packed into one HTML file.
<h2>What Is It?</h2>
The game is a space conquest RTS in the spirit of classics like Galcon and Auralux. You command a fleet of tiny ships orbiting planets, dragging to send them hurtling across the void to capture neutral worlds or overwhelm your AI opponents. Planets generate units over time, combat happens mid-flight with laser fire, and the last faction standing wins.
It’s the kind of game that’s easy to understand in seconds but keeps you clicking “New Game” for way longer than you planned.
<h2>The Tech Under the Hood</h2>
What makes this project fascinating from a developer perspective isn’t just that it’s fun—it’s how it’s built.
Three.js Does the Heavy Lifting
The entire 3D scene runs on Three.js (r128), rendering a starfield of 3,000 particles, multiple procedurally-textured planets, fleets of cone-shaped ships, and real-time laser effects. The camera supports full orbital controls—drag to rotate, scroll to zoom, click a planet to focus.
Custom GLSL Shaders for Procedural Planets
Rather than loading textures, each planet’s surface is generated entirely in the fragment shader using layered fractal Brownian motion (fBm) noise. The result is organic, subtly animated planetary surfaces that shift and breathe over time:
<pre><code class="language-glsl">float fbm(vec3 p){
 float v=0.0,a=0.5;
 for(int i=0;i&lt;5;i++){
 v+=a*noise(p);
 p*=2.0;
 a*=0.5;
 }
 return v;
}
</code></pre>
Each planet gets rim lighting and color variation based on ownership, all calculated per-pixel on the GPU.
Flocking Behavior
The ships aren’t just sprites following a path—they exhibit actual flocking behavior when orbiting planets. Separation, alignment, and cohesion forces keep them from clumping unnaturally while maintaining formation. When dispatched to attack, they smoothly transition from orbital mechanics to direct travel vectors.
AI That Actually Plays
The AI opponents aren’t pushovers. They evaluate potential targets based on distance and defensive strength, wait until they have numerical advantage, and coordinate attacks. Configurable difficulty through the number of opponents (1-3) means you can dial in the challenge.
<h2>Why This Matters</h2>
This project is a masterclass in what “vibe coding” can produce when paired with real technical skill. There’s no build step, no bundler, no node_modules folder stretching to infinity. Just HTML, CSS, JavaScript, and a CDN link to Three.js.
It demonstrates that modern browsers are genuinely capable game engines. WebGL shaders can produce visuals that would have required dedicated graphics software a decade ago. And sometimes constraints—like fitting everything in one file—force creative solutions that result in cleaner, more elegant code.
<h2>Try It Yourself</h2>
The game runs entirely in your browser. Drag from your blue planets to send fleets. Capture the gray neutral worlds before the AI does. Watch tiny lasers flash as your ships intercept enemies in the void.
The controls are minimal:
<ul>
<li>Drag from your planet → Send ships to attack</li>
<li>Left-drag empty space → Orbit camera</li>
<li>Scroll → Zoom in/out</li>
<li>Click any planet → Focus camera</li>
</ul>
Settings let you adjust planet count (5-12), AI opponents (1-3), and what percentage of your fleet to send per attack.
<h2>The Takeaway</h2>
Projects like this remind us why so many developers fell in love with coding in the first place. Not for the enterprise architecture diagrams or the sprint planning meetings—but for the pure joy of making something interactive appear on screen from nothing but text.
If you’ve been stuck in framework fatigue or buried in configuration files, maybe it’s time to open a blank HTML file and just… build something fun.
Check out the full source on CodePen: <a href="https://codepen.io/jjwallace/pen/bNpmOXK" target="_blank" rel="noopener nofollow">codepen.io/jjwallace/pen/bNpmOXK</a>
<hr>
What’s the coolest single-file project you’ve seen? Drop it in the comments.

Smiley Face

Discuss gamification of mundane UI and UX.

Gamification

A developer created a complete 3D space RTS game in a single HTML file using Three.js. The game features procedurally-generated planets using GLSL shaders with fractal Brownian motion noise, flocking behavior for ship movement, and functional AI opponents. Built without build tools or bundlers, it demonstrates modern browser capabilities for game development with WebGL rendering 3,000 particle starfields, real-time laser effects, and orbital camera controls. The project showcases how constraints can lead to elegant solutions and serves as an example of creating interactive experiences with minimal tooling.

Full 3D Space RTS Game in a Single HTML File

neat concept. game runs like shit though.

Very cool. Some constructive feedback - don’t use the same button for camera controls and primary action, I clicked passed the planet a lot of time and turned the camera without wanting to.

I have modified code slightly, for smartphone touch support and mobile playable version.
Check here : <a href="https://www.amazeview.com/how-to-build-your-own-html-game-step-by-step-guide/" target="_blank" rel="noopener nofollow">https://www.amazeview.com/how-to-build-your-own-html-game-step-by-step-guide/?utm_source=dailydev</a>