Table of Contents
Quick Answer
Use Phaser 3 for 2D games or Three.js for 3D, scaffold with Cursor, and deploy as a static site to Cloudflare Pages or itch.io. AI handles sprite generation (Stable Diffusion/Midjourney), physics boilerplate, and level design JSON.
- Time to playable: 1-3 days
- Cost: $0
- Distribution: itch.io, Newgrounds, Crazy Games, your site
What You'll Need
- Cursor or Claude Code
- Phaser 3, Three.js, or Kaboom.js (pick one)
- Image generator for sprites (Midjourney, SDXL)
- Free sound library (freesound.org, zapsplat)
- Static hosting (Cloudflare Pages, itch.io)
Steps
- Pick scope ruthlessly. One mechanic. One level. Ship it. Tetris, Flappy Bird, Snake — all are one-mechanic legends.
- Scaffold Phaser. pnpm create vite@latest game -- --template vanilla-ts then pnpm add phaser. Ask Cursor: "Create a Phaser 3 main scene with a player sprite that moves with arrow keys and gravity."
- Generate art with AI. Midjourney prompt: "pixel art character sprite sheet, 64x64, walk cycle, 4 frames, transparent background, retro game." Export as PNG.
- Add physics & collisions. Phaser's Arcade Physics handles most. Prompt AI: "Add collision between player and platforms, and damage on spike tile overlap."
- Design levels. Use Tiled editor (free) or generate JSON tilemap with AI. Load via this.load.tilemapTiledJSON.
- Sound & music. Royalty-free from freesound.org. Add this.sound.add('jump').play() on events.
- Add polish. Screen shake on damage, particle bursts on coins, smooth camera follow. These 30-minute additions 10x the feel.
- Deploy. pnpm build → drag dist/ to Cloudflare Pages or itch.io. Set game to public.
Common Mistakes
- Scope creep: "RPG with 50 quests" never ships. "One dungeon, one boss" does.
- Ignoring mobile: 60% of browser players are mobile. Add touch controls.
- 60fps on slow devices: Test on a 3-year-old phone. Optimize texture sizes.
- No save system: Even a highscore in localStorage boosts retention 3x.
- Skipping sound: Silent games feel 80% less finished.
Top Tools
Tool
Best For
Price
Phaser 3
2D games
Free
Three.js
3D games
Free
Kaboom.js
Simple game API
Free
Tiled
Tilemap editor
Free
itch.io
Distribution
Free
Cloudflare Pages
Static hosting
Free
FAQs
Q: Phaser vs Three.js?
Phaser = 2D platformers, puzzles. Three.js = 3D worlds. Don't mix.
Q: Can I monetize browser games?
Yes — Crazy Games and Poki pay for hosting your game ($500-5K/mo for popular titles).
Q: Do I need a game engine?
No — Kaboom.js or pure Canvas works for small games.
Q: How do I handle multiplayer?
Colyseus (Node.js) or WebSockets + Supabase Realtime for simple co-op.
Q: Can I port to mobile later?
Capacitor wraps your browser game into a native shell for App Store/Play.
Q: Are AI-generated sprites copyright-safe?
Generally yes, but check MJ/SDXL licenses. Hand-drawn is always safer.
Conclusion
Browser games are the funniest weekend project in tech. Scope tiny, polish hard, deploy free. One viral itch.io hit can mean 100K+ plays in a week — and a portfolio piece forever.