Build Your Own Browser Game With Claude Code

Choose the Game: Space Shooter

The player controls a spaceship, shoots enemies, earns points, loses lives when enemies get through, and tries to beat their high score. Keep the first game deliberately small. It only needs:

- player spaceship

- shooting

- enemy waves

- score

- 3 lives

- increasing difficulty

- game over

- restart

- saved high score

No accounts, database, multiplayer, AI API, or backend.

What We Will Use

For this Guide, we will use:

- Claude Code

- Phaser

- TypeScript

- Vite

- a normal web browser

Phaser is specifically designed for 2D games that run in web browsers, and its official tooling supports creating modern projects with npm.

Open the Official Phaser + TypeScript + Vite Template

https://github.com/phaserjs/template-vite-ts

Create the Project Folder

Create an empty folder such as:

space-shooter

Open it in VS Code and start Claude Code. Then use:

Create the Browser Game Project

Scaffolds a new beginner-friendly 2D browser game project using the latest stable Phaser version, TypeScript, and Vite via Phaser's current official project tooling — installs only required dependencies, creates a minimal Phaser game with AUTO rendering that loads successfully in a responsive, centered canvas, and adds a placeholder scene. No React, backend, Firebase, Supabase, auth, external APIs, database, or extra libraries, and no external game assets yet. Runs the production build and finishes with a READY / NOT READY verdict — nothing is committed, pushed, or deployed.

Create a new beginner-friendly 2D browser game project in this folder. Use: - the latest stable Phaser version - TypeScript - Vite - the simplest appropriate official Phaser project structure Use Phaser's current official project tooling where appropriate rather than copying an outdated project template. This will become a simple arcade-style space shooter. For now: - create the project - install only the required dependencies - create a minimal Phaser game that successfully loads in the browser - use Phaser AUTO rendering - make the game canvas responsive - keep the game centered - create a simple placeholder scene Do not: - add React - add a backend - add Firebase - add Supabase - add authentication - add external APIs - add a database - add unnecessary libraries - add external game assets yet Run the production build when finished. Do not commit, push, or deploy anything. Finish with: Game project: READY / NOT READY

NOTE

Phaser's AUTO renderer can use WebGL when available and fall back to Canvas when necessary.

Open the Game

Once Claude finishes, start the development server using the command configured by the project, normally:

npm run dev

Open the local URL in Chrome. At this point, you only need to confirm:

Phaser loads successfully in the browser

Do not start adding features manually.

Build the First Playable Version

Now let Claude Code turn the empty project into the actual game. For the first version, avoid downloading artwork — Claude can create simple retro-style spaceships, enemies, bullets, stars, and effects using Phaser graphics directly. This keeps the Guide:

- fast

- repeatable

- copyright-safe

- easy for beginners

Build the Playable Space Shooter

Builds the first complete playable version of Star Defender, a vertical arcade space shooter: keyboard-controlled player movement and rate-limited shooting, downward-moving enemy waves with gradually increasing difficulty, collision handling that scores hits and costs lives, 3 starting lives, a live score display, a locally-saved high score that survives a refresh, and a Game Over screen with a working Restart. All visuals are generated programmatically with Phaser (no downloaded assets) in a clean retro arcade style, with sensible scene/class organization and no multiplayer, accounts, leaderboard server, backend, payments, ads, login, AI API, or complex menus. Runs TypeScript checks and the production build, and finishes with a READY / NOT READY verdict.

Build the first complete playable version of the space shooter. Keep the game simple enough for a beginner tutorial but make it feel like a real game. ## Game Name: Star Defender Create a vertical arcade-style space shooter. ## Player Place the player's spaceship near the bottom of the screen. On desktop: - Left Arrow or A = move left - Right Arrow or D = move right - Space = shoot Keep the player inside the visible game area. ## Shooting The player should fire bullets upward. Add a sensible fire-rate limit so holding Space does not create unlimited bullets every frame. Remove bullets when they leave the playable area. ## Enemies Spawn enemies from the top. Enemies should move downward toward the player. Start with manageable enemy waves. Gradually increase difficulty as the player's score increases. Do not make the first 20–30 seconds frustrating. ## Collisions When a player bullet hits an enemy: - destroy the enemy - destroy or recycle the bullet - increase the score When an enemy reaches the player or passes the bottom: - remove the enemy - reduce the player's lives appropriately ## Lives Start with: 3 lives Clearly display the remaining lives. ## Score Display the current score at the top of the game. Example: Score: 1200 ## High Score Save the high score locally in the browser. Do not use a database. Show: High Score: 4200 The high score should remain after refreshing the browser. ## Game Over When the player loses all lives: - stop normal gameplay - show GAME OVER - show final score - show high score - provide a clear Restart button Restarting must correctly reset the game without requiring a page refresh. ## Graphics For this version, generate the game's simple visual elements programmatically using Phaser. Create: - player spaceship - enemy ships - bullets - star background Use a clean retro arcade direction. Do not download random copyrighted assets. ## Architecture Keep the code organized. Separate major concerns into sensible scenes/classes/modules where useful, but do not over-engineer a small game. Use Phaser's built-in systems where appropriate, including its game loop, input, object groups and Arcade Physics. ## Scope Do not add: - multiplayer - accounts - leaderboard server - backend - payments - ads - login - AI API - complex menus Run the relevant TypeScript checks and production build when finished. Do not deploy. Finish with: Playable game: READY / NOT READY

Play It Yourself

Now stop prompting Claude for a moment. Actually play the game. Try to:

Move

Shoot

Destroy several enemies

Lose a life

Reach Game Over

Restart

Beat your high score

Refresh the browser

This part matters. The goal isn't "Claude generated code successfully." The goal is: the game is actually fun enough to play.

Notice What Feels Off

A game can technically work and still feel terrible. Now use Claude Code to improve the game feel, not to add twenty new features. While playing, notice things like:

- enemies too slow

- bullets too weak

- movement too fast

- boring collisions

- difficulty jumps too quickly

- poor visual feedback

Then ask Claude to polish the existing gameplay.

Polish the Game Feel

Use:

Polish the Game Feel

Play-tests the current build and improves game feel without expanding scope: smoother and more responsive player movement, more readable shooting, gradual rather than sudden difficulty increases, lightweight visual feedback (explosion particles, hit flashes, subtle screen shake, score feedback), a livelier star-field background, a polished start screen (title, Start Game, concise controls), and an improved Game Over screen — with no shops, currencies, upgrades, bosses, story mode, accounts, multiplayer, online leaderboards, or backend services. Runs the production build and finishes with a READY / NOT READY verdict.

Play-test the current implementation logically and improve the game feel without significantly expanding the scope. Preserve the existing core game. Focus on: ## Player Movement Make movement: - smooth - responsive - easy to control Avoid excessive speed or slippery movement. ## Shooting Make firing feel responsive. Maintain a reasonable fire-rate limit. Bullets should be immediately readable against the background. ## Enemies Improve enemy spawning and movement. Difficulty should increase gradually instead of suddenly. Avoid impossible enemy patterns. ## Visual Feedback Add lightweight visual feedback such as: - small explosion particles when an enemy is destroyed - brief hit flashes where useful - subtle screen shake for meaningful impacts - score feedback Keep effects restrained enough that gameplay remains clear. ## Background Improve the existing star-field effect so the game feels like it is moving through space. Do not add large external image assets just for decoration. ## Start Screen Add a simple polished start screen showing: STAR DEFENDER Start Game And concise controls: Move: A/D or Arrow Keys Shoot: Space ## Game Over Improve the existing Game Over presentation. Clearly show: - final score - high score - Restart ## Important Do not add: - shops - currencies - upgrades - bosses - story mode - accounts - multiplayer - online leaderboards - backend services The goal is polish, not feature expansion. Run the production build afterward. Finish with: Game polish: READY / NOT READY

Test Again

Play for at least a few minutes. Ask yourself:

Can I understand the game immediately?

Do controls respond immediately?

Does shooting feel satisfying?

Does the difficulty increase naturally?

Can I restart without bugs?

If something specific feels wrong, tell Claude exactly that. For example:

Example: Specific Feedback

A worked example of specific, actionable playtesting feedback — naming the exact problem (enemies ramp up too fast around 30 seconds), the constraint to preserve (keep the increasing difficulty), and the one thing to change (only the difficulty balancing) — instead of a vague "make the game better" request.

The enemies become too fast after approximately 30 seconds. Keep the increasing difficulty, but make the progression more gradual. Change only the difficulty balancing.

This is better than repeatedly asking:

Avoid

Make the game better.

Add Mobile Controls

Because this is a browser game, let's also make it playable when someone opens the link on a phone. Use:

Add Mobile Touch Controls

Adds simple touch controls (left, right, fire) for touch-capable/mobile devices without redesigning the game: thumb-friendly, appropriately sized touch targets that don't cover gameplay, support for held continuous movement and repeated firing, and prevention of accidental scrolling/zooming while playing. Keeps desktop keyboard controls unchanged, resizes the canvas for phone screens while preserving the game's aspect ratio, and keeps desktop and mobile on the same codebase — no separate mobile game. Runs the build and finishes with a READY / NOT READY verdict.

Add simple mobile touch controls to Star Defender. Do not redesign the game. When a touch-capable/mobile device is detected, provide: - left control - right control - fire control Requirements: - controls should be easy to reach with thumbs - controls should not cover important gameplay - touch targets should be large enough - support holding left/right for continuous movement - support repeated firing appropriately - prevent accidental browser scrolling/zooming while interacting with the game controls where appropriate Keep existing keyboard controls unchanged on desktop. Make the game canvas resize appropriately for normal phone screens while preserving the intended game aspect ratio. Do not create a separate mobile game. Desktop and mobile should use the same game codebase. Run the build afterward. Finish with: Mobile controls: READY / NOT READY

Now you have another nice part for the video:

Build on computer → open same game on phone → play it.

Run the Final Pre-Launch Audit

Before putting the game online, let Claude perform one final audit. Use:

Final Pre-Launch Audit

Runs a final pre-launch audit of Star Defender across core gameplay (start, movement, shooting, fire-rate limiting, collisions, score, lives, enemy waves, difficulty progression, Game Over, Restart), the high score (saves locally, survives refresh, never overwritten by a lower score), desktop input and viewports, mobile (responsive canvas, touch movement/shooting, control placement, orientation, no overflow or accidental scrolling), game-state hygiene (no surviving enemies/duplicate timers or listeners/leftover bullets/score-after-Game-Over/multiple instances/cleanup problems), and technical checks (TypeScript, production build, console errors, asset paths) — fixing only genuine problems, adding nothing new, and deploying nothing. Finishes with a READY / NOT READY verdict, listing only remaining important problems if not ready.

Perform a final pre-launch audit of Star Defender. Do not add new features. ## Test Core Gameplay Verify: - Start Game works - player movement works - shooting works - fire-rate limiting works - bullets collide with enemies correctly - score increases correctly - lives decrease correctly - enemy waves continue correctly - difficulty progression works - Game Over triggers correctly - Restart completely resets the gameplay ## High Score Verify: - high score saves locally - high score survives refresh - a lower new score does not overwrite a higher saved score ## Desktop Test: - Arrow keys - A/D - Space - common desktop viewport sizes ## Mobile Check: - responsive game canvas - touch movement - touch shooting - usable control placement - portrait/landscape behavior where applicable - no major overflow - no accidental page scrolling while playing ## Game State Look specifically for: - enemies surviving after restart - duplicate timers - duplicate event listeners - bullets remaining after Game Over - score continuing after Game Over - multiple game instances - memory/resource cleanup problems Fix only genuine problems. ## Technical - run TypeScript checks - run the production build - verify there are no important browser console errors - verify production assets use valid relative/public paths Do not: - add accounts - add backend services - add analytics - add ads - add multiplayer - redesign the game Do not commit, push, or deploy anything. Finish with: Browser game status: READY / NOT READY If NOT READY, list only the remaining important problems.

Create the Production Version

Run:

npm run build

The resulting production files should be a normal static web application.

NOTE

Phaser itself is a JavaScript game framework that runs in the browser and can be used for free for commercial or non-commercial games.

Because this version of the game has no backend, no database, no API calls, and no authentication, hosting it is essentially the same as hosting a static website.

You can later publish it on your own domain so anyone can open:

yourgame.com

Play → no installation → no account required.

Resist Scope Creep

Once Claude makes game development feel easy, it becomes tempting to keep asking for more. Avoid adding:

- multiplayer

- accounts

- global leaderboards

- Stripe

- in-game purchases

- advertisements

- hundreds of levels

- complex bosses

- procedural maps

- AI-generated gameplay

- server infrastructure

NOTE

Those turn a simple 15–25 minute browser-game workflow into a real game-development project. Finish the simple game first.

Ideas to Try Next

Once the workflow works, you can replace the Space Shooter with your own concept. For example:

- Endless runner

- Football penalty game

- Racing game

- Platformer

- Puzzle game

- Memory game

- Trivia game

- Children's educational game

- Branded promotional game

THE REAL LESSON

The technology is not the product. Your game idea is the product.

What You'll Have

By the end of this Guide you should have:

One playable browser game

with:

Start Screen → Gameplay → Enemies → Shooting → Score → Lives → Increasing Difficulty → Game Over → High Score → Restart

that works on:

Desktop + Mobile Browser

without:

database + login + API keys + app stores + ongoing AI API costs

The Complete Workflow

Idea → Claude Code + Phaser → Build playable version → Play it yourself → Ask Claude to improve gameplay → Test desktop + mobile → Build → Publish as a normal website