A game that runs right in the browser, made by talking
What you will have built
Your own browser game anyone can play from a link
Claude Pro plan (or higher)required
This is the brain of vibe coding. Claude Pro ($20/mo) is plenty to start; if you build a lot every day, the Max plan gives you far more headroom. The free plan works for a taste but hits its limit quickly.
A computer (Windows or Mac)required
Specs barely matter. Any laptop with internet is enough.
Node.js (LTS version)required
The engine that runs your code. Grab the version marked 'LTS' from nodejs.org. We install it together in step 1.
VS Code (Visual Studio Code)required
A free code editor. You install the Claude Code extension here to 'code by chatting with AI'. Note it is different from Microsoft's Visual Studio (a separate, heavier IDE).
Games teach best because results are instant. Watching a character move and the score climb is addictive.
We build browser games, no download, no app store; send a link and a friend plays right away. We use Vite, a light and fast tool.
Tip
Pick a first game whose rule fits in one line: 'jump over obstacles' or 'catch the falling things'. Simpler means finished.
Install the 'LTS' version from nodejs.org and verify in the VS Code terminal below.
$node -v$npm -v
v20.18.0 10.8.2
If you see this, it worked
Two version numbers means success.
If you hit an error
Install 'Claude Code' from Extensions and link your subscription via Sign in.
Tip
Pitch your game idea to Claude and ask it to 'make the rules more fun' for good suggestions.
Scaffold a light, fast game project with the command below. It prints the next commands when done.
$npm create vite@latest my-game -- --template vanilla
✔ Scaffolding project in ./my-game... Done. Now run: cd my-game npm install npm run dev
If you see this, it worked
'Scaffolding project in ./my-game...' plus the next steps means success.
Enter the folder, install, and run. Type the three lines below in order.
When 'http://localhost:5173' appears, open it (note the port differs from the website track). The default screen means you're ready. Keep this window open.
$cd my-game$npm install$npm run dev
VITE v6.0.0 ready in 320 ms ➜ Local: http://localhost:5173/
If you see this, it worked
The Vite screen means your dev environment is ready.
If you hit an error
Describe the game concretely. e.g. "Make a simple game on a canvas. A basket at the bottom moves left/right with the arrow keys; fruit falls from the top; catching it is +1 score, missing it is -1 life; 3 lives, game over at 0. Show score and lives on screen."
Play it in the browser and add to it: 'fruit speeds up over time', 'golden fruit is +5', 'add a start screen and a retry button'.
Tip
If the difficulty is off, just say 'too easy/hard' and Claude adjusts speed and frequency.
If you hit an error
Sound and feel are half the game. Ask Claude: "Add a short 'ding' when you catch fruit, a 'buzz' when you miss, and make the score briefly grow when it increases."
Then ask for start music, a game-over screen, and a high-score save (localStorage) to make it a proper game.
Tip
No sound files needed, ask Claude to 'generate simple sound effects in code (Web Audio)' to make sounds without any files.
Make the final build (command below) and upload the result (the dist folder) to Vercel or Netlify to get a link.
Not sure how to deploy? Ask Claude 'how do I put the dist folder on Vercel?' for step-by-step help.
$npm run build
vite v6.0.0 building for production... ✓ built in 1.2s dist/index.html 0.46 kB dist/assets/index.js 8.1 kB
If you see this, it worked
'built in ...' and the dist folder contents means the build succeeded.
If you hit an error
Congratulations, you made a game you can show off with a link.
Next, add stages, bosses, leaderboards, and mobile touch controls the same way. Post your game on the Launchpad and start a score competition.
