How to vibe code a browser game with AI (a beginner's walkthrough)

You can make a playable browser game in an afternoon by describing it to an AI assistant, with no coding experience. The trick is to start much smaller than you want to, ask for a single file, and improve it by playing it. I’ve shipped three browser games this way, from a typing arcade to a 3D monster brawler, and this is the process I’d give a beginner.

New to the idea? Read what vibe coding is first.

Why a browser game is the perfect first project

• Nothing to install. The game is a web page. It runs anywhere a browser does.
• Instant feedback. You know within seconds whether it’s fun.
• Easy to share. Send a link. No app store, no download.
• Forgiving. If a game has a bug, nobody loses money or data.

Step 1: Pick a tiny idea

The most common mistake is starting with your dream game. Start with something you could explain in one sentence:

• Catch falling fruit with a basket.
• A snake that grows when it eats.
• Type the word before the balloon floats away.
• Dodge traffic for as long as you can.

A good first game has one action (move, click or type), one way to score and one way to lose. You can grow it later. Keycraft Arcade has five games today. It started as one idea: type a word to shoot the thing above it.

Step 2: Write the first prompt

Give the AI the rules, the feel and the constraints. Something like this:

Make a browser game in a single HTML file, with no external libraries.

Game: fruit falls from the top of the screen. I move a basket left and
right with the arrow keys (or by dragging on a phone) to catch it.

- Each catch is 1 point. Missing 3 fruits ends the game.
- Fruit falls faster every 10 points.
- Show the score at the top and a "Game over, press Space to restart" screen.
- Bright, friendly colours. Draw everything with simple shapes, no image files.

Keep the code simple and add short comments.

Three parts of that prompt do most of the work:

• “A single HTML file” means you can save it and double-click it to play.
• “No image files” avoids the problem of missing art. Shapes and emoji are fine for a first version.
• Exact rules for scoring and losing, so the AI doesn’t have to guess.

Step 3: Play it before you change anything

Save the file as game.html and open it. Play for two full minutes. Notice what you feel, not what you think:

• Is it too easy? Too fast?
• Is anything confusing in the first five seconds?
• What made you smile?

Write down three things. Only three.

Step 4: Improve it one change at a time

Now go back to the AI with one request per message.

• “The basket feels slow. Make it about 50% faster.”
• “Add a golden fruit worth 5 points that appears rarely.”
• “Play a short sound on each catch.”

After each change, play again. If a change makes the game worse, say so and go back. This is the loop that makes games good, and it’s the same loop professionals use.

Save a version after every change that works. Copy the file to game-v2.html, or better, commit it to Git. When a later change breaks everything, you’ll be glad.

Step 5: Add “juice”

Juice is the small feedback that makes a game feel alive. It’s cheap to add, and it matters more than new features. Ask for a few of these:

• a little screen shake when you lose a life
• particles when you catch something
• the score number popping when it changes
• a combo counter for catches in a row
• sound effects and a simple music loop
• a high score that’s remembered between visits

In Kaiju City Smash, big building collapses trigger slow motion and a “RAMPAGE!” callout. Neither changes the rules. Both change how it feels.

Step 6: Make it work on phones

Ask the AI directly: “Make this playable on a phone with touch controls, and scale the game to fit any screen.” Then test on a real phone, not just a narrow browser window. Touch targets that look fine on a laptop are often too small for a thumb.

Step 7: Put it online

A single HTML file can go live in minutes on a free static host such as GitHub Pages, Netlify or Vercel. The usual path:

1. Put the file in a GitHub repository, named index.html.
2. Connect the repository to a host.
3. Get a link you can send to friends.

After that, every time you save a change to GitHub, the live game updates. I do this for every game in my arcade, and I’ve automated the whole thing, which I wrote about in shipping solo with AI.

When the game gets bigger

Once your game grows past a few hundred lines, pure vibes stop working. The AI starts breaking old features while adding new ones. That’s normal, and there are fixes:

• Split the single file into several files when it gets hard to manage. Ask the AI to do it as its own step, with no other changes.
• Write the rules down. A short notes file for the AI keeps it from undoing your decisions. See how to write a CLAUDE.md.
• Work in phases. My biggest game, TARA, is a story-driven 3D driving game. It was built one phase at a time, and each phase ended with screenshots and a pause for my approval.
• Check what changed. The twelve habits in this post are the difference between a game that keeps improving and one that collapses.

Common questions

Which AI should I use? Any of the major assistants can write a small game. Tools that can create and run files for you make the loop faster, but a chat window and copy-paste is enough to start.

Do I need to understand the code? Not for a first game. You’ll pick things up by asking “what does this part do?” as you go.

What about art and sound? Start with shapes, emoji and generated sounds. Polish them when the game is fun.

Can I make money from it? Possibly, through ads or sponsorships, but treat the first few games as practice. Make something small and fun, then make another.

The best way to learn is to play other small games with a notebook open. Mine are free and run in a browser tab. Pick one, play for five minutes, and write down three bits of juice you’d steal.