Vibe coding a game: building a browser game with an AI agent

Vibe coding a game is a good way to feel how agent-driven development works: the result is visible at once in the browser and bugs are noticeable by eye. Below is a step-by-step example: we build a simple JavaScript game ("dodge falling blocks") with the Claude Code agent, look at how to phrase mechanics, which bugs games hit most often and what a session costs. The term itself and general principles are covered in what vibe coding is↗; here is the practice.

Why a browser game in JavaScript

For a first experience it is the shortest route: one HTML file and one script, no engines or build step, run with a local server. The whole code fits into the agent's context at once, and you check the result in seconds. We cover Unity at the end: the scheme there is different.

Step 1. Setup

Install Claude Code and connect a Zukko key. The address is without /v1, and the variable is specifically ANTHROPIC_AUTH_TOKEN:

export ANTHROPIC_BASE_URL=https://api.zukko.pro
export ANTHROPIC_AUTH_TOKEN=fetch_your_key
export ANTHROPIC_MODEL=claude-sonnet-5-5
mkdir dodge-game && cd dodge-game
git init
claude

Detailed installation and setup are in the Claude Code documentation↗. Git is not for tidiness: every working version of the game must be saved so the agent cannot break it with no way back.

Step 2. The project rules file

Claude Code reads a CLAUDE.md file in the project root. Create a short one:

Project: the game "Dodge"
- Plain JavaScript, no libraries and no build. Files: index.html, game.js.
- Draw on a 480x640 canvas.
- Movement depends on frame time (dt), not on the number of frames.
- Before finishing a task, explain what you changed and suggest how to check it in the browser.
- Do not rewrite the whole file for a small edit.

The last rule saves tokens and reduces the risk that the agent "improves" things you did not ask about.

Step 3. The first prompt: mechanics, not "make a game"

Describe the rules as you would to a person: what the player sees, what they can do, when they lose.

Make a game on a canvas. The player is a square at the bottom of the screen, moved with the left and right arrows.
Red blocks of random size fall from the top in random columns.
If a block touches the player the game is over; show the score and the text "Press space".
The score grows every second of survival. Blocks fall faster over time.

A good sign of a brief: from it you can deduce what happens in any situation. If you did not describe what happens when both arrows are pressed or the player leaves the screen, the agent will decide, and the result may surprise you. In response the agent creates two files in the project.

Step 4. Run and check

Open a second terminal and start a simple server:

python3 -m http.server 8000

Then open http://localhost:8000 in the browser. Play for two minutes and write down what you dislike. Do not inspect the code by eye right away: look at behaviour first. If the game works, save the version (git add -A && git commit -m "first version") and move on to iterations.

Step 5. Iterate in small steps

Ask for one change at a time, otherwise you will not understand what broke the game:

1. "Add a high score, store it in localStorage."
2. "Add a pause on the P key."
3. "Add bonuses: a yellow square gives 10 points."
4. "Add a sound on collision through Web Audio, with no external files."

After each step play and commit. If a step broke the game, roll back to the previous commit and phrase it differently instead of piling fixes on top.

Typical game bugs and how to phrase them

Speed depends on frame rate. On a fast monitor blocks fall faster. Ask to use the time between frames:

let last = performance.now();
function loop(now) {
  const dt = Math.min((now - last) / 1000, 0.05);
  last = now;
  update(dt);
  draw();
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Imprecise collisions. The player is "killed" by a block that visually did not touch. A rectangle intersection check:

function hit(a, b) {
  return a.x < b.x + b.w && a.x + a.w > b.x &&
         a.y < b.y + b.h && a.y + a.h > b.y;
}

State is not reset on restart. After losing, blocks stay on screen or the score is not zeroed. Ask to move the initial state into a reset() function.

Object leaks. Blocks that fell off the screen are not removed, and the game slows down after a couple of minutes. Ask to delete objects beyond the boundary.

One technique works for any bug: describe what you see and what you expected. "Blocks sometimes do not disappear after leaving the bottom edge; they should be removed" is more useful than "fix the lag".

What a session costs

Prices as of October 18, 2026 for claude-sonnet-5-5: input 0.4, output 2, cache read 0.05, cache write 0.5 per 1M tokens. Suppose (these are hypothetical numbers, not a measurement) that 25 prompts produced 0.3M fresh input, 3M cache reads, 0.3M cache writes and 0.15M output:

0.3 x 0.4 + 3 x 0.05 + 0.3 x 0.5 + 0.15 x 2 = 0.12 + 0.15 + 0.15 + 0.30 = $0.72

The cache discount comes from the Anthropic format, which Claude Code uses. Real spend depends on game size and the number of edits and is visible under "Usage" in the dashboard. How to estimate an hour of agent work: how much an agent session costs↗. You create a key in the dashboard↗; payment from Russia is available via SBP, MasterCard or crypto.

What about Unity

Vibe coding in Unity is different. The agent can edit C# scripts, but scenes, prefabs and component settings live in the editor and project service files, and the agent does not see the result. You have to describe which objects to attach where and check it yourself. For a first game, JavaScript is simpler; move to Unity when you understand what you want from the mechanics.

FAQ

Do I need to know programming?

Not to start. But being able to read code and use git helps a lot: you will understand faster what exactly broke.

Can I make the game in something other than Claude Code?

Yes, other agents work too, for example opencode↗. The principle is the same: small steps, commits, a description of behaviour.

Which model suits?

For a simple game, start with claude-sonnet-5-5. If tasks get harder, try claude-opus-5-5 on the hardest steps and compare the result on your project.

How do I avoid overspending?

Ask for small edits, start a new session for a new feature and set a daily dollar limit on the key.