How I Built 3 Browser Games in One Day With Claude AI

5 min read
16 views

I wanted to see how far I could push Claude AI in a single day. Not for DevOps or infrastructure work — but for something completely different: building browser games. By the end of the day, I had three fully playable HTML5 Canvas games running on my site, each with sound, mobile touch controls, scoring systems, and multiple difficulty levels. No game engine. No npm. No frameworks. Just Claude Code CLI, vanilla JavaScript, and a lot of prompting.

If you want to try Claude Code CLI yourself, I have setup guides for both WSL2 Ubuntu and Windows PowerShell.

The Three Games

Each game is a standalone HTML page with inline CSS and a separate JavaScript file. They run directly in the browser with zero dependencies — no React, no Phaser, no build step. Just <canvas> and vanilla JS.

Artemis II: Journey Around the Moon

Play Artemis II — A side-scrolling space survival game based on NASA’s Artemis II mission. You pilot the Orion spacecraft through five mission stages, dodging asteroids, satellites, mines, and comets while collecting fuel pickups. The game has a near-miss combo system that rewards risky flying — the closer you fly to debris without hitting it, the more points and XP you earn. Level up to restore shields and fuel. Survive 22,000 km to complete the mission.

Escape the Strait: Warzone Survival

Play Escape the Strait — A naval combat shooter where you navigate a warship through four hostile zones. Dodge homing missiles, attack drones, and fast attack boats while collecting power-ups and managing ammo. Each zone ends with a boss fight. The weapon system upgrades through 20 levels — starting from a single cannon and ending at a homing missile barrage. Four difficulty modes from Cadet to Admiral.

Drone Strike: Survival Mission

Play Drone Strike — A mission-based drone game where you pick your target before launch. Six targets range from a lightly defended Oil Facility to a maximum-security Command Bunker. Each target has different distances, defense types, and score multipliers. You fly through SAM missiles, AA gun bursts, and radar interceptors. Deploy flares to decoy homing missiles, shoot interceptors to clear your path, and boost through danger zones. A mission briefing screen sets the tone before each run.

The Tech Stack

All three games use the same minimal stack:

  • HTML5 Canvas — all game rendering happens on an 800×600 canvas element
  • Vanilla JavaScript — no libraries, no frameworks, no TypeScript
  • Inline CSS — each game’s UI (HUD, menus, guide modals) is styled with scoped CSS inside the HTML file
  • Web Audio API — procedurally generated sound effects, no audio files to load
  • WordPress — each game is embedded as a WordPress page, with the JS loaded conditionally by the theme

There’s no package.json, no node_modules, no build process. The HTML files live in a pages/ directory and the JS files live in the child theme. Deploying a change is just pushing to main — GitLab CI rsyncs the files to the server.

How Claude AI Made This Possible

I’m not a game developer. I’ve never built anything with HTML5 Canvas before this. But with Claude Code CLI running in my terminal, I could describe what I wanted and iterate fast.

The workflow looked like this:

  1. Describe the game concept — I gave Claude a rough idea: “build a side-scrolling space game where you dodge asteroids and collect fuel, based on the Artemis II mission”
  2. Get a working prototype — Claude generated the full HTML + JS in one shot. Canvas rendering loop, keyboard input, collision detection, scoring — all working on the first run
  3. Iterate on features — I kept adding: “add a near-miss combo system”, “add sound effects”, “add a how-to-play guide modal”, “add mobile touch controls”, “add stage transitions between mission phases”
  4. Polish the UI — HUD overlays, dark mode support, fullscreen toggle, end-game score breakdowns, rank system
  5. Repeat for the next game — after the first game worked, I used it as a reference pattern for the other two

Each game took roughly 3–4 hours from concept to fully playable. The first game (Artemis) took the longest because I was figuring out the structure. By the third game (Drone Strike), I had a clear pattern: describe the concept, let Claude scaffold it, then iterate on mechanics and polish.

What Each Game Has

Despite being built in a day, these aren’t demos or proof-of-concepts. Every game includes:

  • Full game loop — start screen, gameplay, stage transitions, end screen with score breakdown
  • Scoring and ranks — distance points, kill points, near-miss combos, XP leveling, and rank tiers (Cadet through Mission Commander, etc.)
  • Mobile touch controls — D-pad overlay with action buttons (FIRE, FLARE), optimized for phones like Samsung S25 Ultra and iPhone Pro Max
  • Sound effects — all procedurally generated with the Web Audio API, no external audio files
  • How-to-play guide — in-game modal with controls, objectives, obstacle descriptions, scoring rules, and weapon upgrade tables
  • Difficulty settings — multiple difficulty levels that scale enemy speed, spawn rates, and damage
  • Dark mode support — adapts to the site’s dark/light theme
  • Fullscreen mode — toggle button for distraction-free gameplay
  • Pause and resume — press P to pause mid-game

What Surprised Me

The first prototype always worked. Every time I described a new game concept, Claude produced a working version on the first attempt. Not polished, not feature-complete — but the core game loop ran, collisions detected, score tracked. That was the starting point for iteration.

Procedural audio was free. I expected to need audio sprite sheets or MP3 files. Instead, Claude generated all sound effects using the Web Audio API — oscillators, gain nodes, and frequency sweeps. Engine hum, explosions, pickups, level-up chimes — all synthesized in code. Zero external assets.

The hardest part was game design, not code. Getting the collision hitboxes to feel right, tuning enemy spawn rates so difficulty ramps smoothly, making the near-miss system rewarding but not frustrating — these are design problems that required playtesting and tweaking. Claude could implement any mechanic I described, but deciding what to implement required actually playing the game.

The Numbers

GameJS LinesFeaturesObstacles/Enemies
Artemis II~6205 stages, fuel system, near-miss combos, levelingAsteroids, satellites, mines, comets
Escape the Strait~7304 zones, boss fights, 20 weapon levels, 4 difficultiesMissiles, drones, fast attack boats, zone bosses
Drone Strike~6006 targets, mission briefing, flare system, target selectionSAM missiles, AA guns, radar interceptors, turrets

Total: roughly 1,950 lines of JavaScript, three complete games, one day. All vanilla — no dependencies, no transpilation, no build step.

Try Them

All three games are live and free to play:

They work on desktop (keyboard controls) and mobile (touch D-pad). Open any of them, hit the start button, and see what a day of AI-assisted coding looks like.

Final Thoughts

A year ago, building three playable browser games with sound, mobile controls, scoring, and multiple difficulty modes in a single day would not have been realistic for a solo developer — especially one without game development experience. Claude AI handled the parts I didn’t know (Canvas rendering, game loops, collision math, audio synthesis) while I focused on the parts that matter most: what the game should feel like to play.

If you want to try building something similar, start by installing Claude Code CLI and describing a simple game concept. You’ll be surprised how fast you go from an idea to something playable.