Build a playable game

Your mission

Build the first playable version of your neon dodge game from the plan you made in lesson 2.3, play it in your browser, and see your own score on the game over screen.

Why it’s worth it

This is the moment it gets real. By the end of this lesson you’ll have a game you can actually play, built from your own idea, in less time than it takes to download most games.

But the way you build it matters as much as the result. Pros don’t build a whole game and hope. They build a little, playtest, build a little more. Every time you test after a small step, you know exactly what works. When something breaks, it was in the last small step, so it’s easy to find.

Build it

Open your terminal in your neon-dodge folder (with the plan.md from lesson 2.3) and start Claude. Check the status line: if it still says plan mode, press Shift+Tab until it shows ⏵⏵ auto mode on or ⏵⏵ accept edits on, so Claude can build.

1. Build the first playable slice.

Build steps 1 to 3 of @plan.md: just enough that I can move the ship.
Use plain <script> tags, no JavaScript modules, so it works when I
double-click index.html. Tick off the steps in plan.md when they're done.

What you’ll see: Claude creates index.html (and maybe game.js and style.css), then ticks the boxes in plan.md. Open index.html in your browser (double-click it, or ask Claude to open it).

2. Playtest. Press the arrow keys. Does the ship move? Does it stop at the edges? Tell Claude what you find, good or bad:

The ship moves but it can go off the right edge of the screen. Fix that,
then continue with the next steps up to collisions.

What you’ll see: a fix, then the next chunk: falling blocks and crashing into them. Refresh and play again.

3. Finish the core loop.

Do the remaining steps in @plan.md: score, speed-up, game over screen
with my score, and restart with the space bar. Tick them off as you go.

What you’ll see: the full game. Play a few rounds. Lose on purpose. Check the score makes sense (if you survived about 20 seconds, it should say about 20).

Boom. You made a game. Not a tutorial copy: your game, from your plan. Go play it.

Why “no modules”?

When you open a page by double-clicking it, the browser loads it straight from a file (the address starts with file://). For security reasons, browsers block a modern kind of JavaScript file, called a module, on pages loaded like that. Your game would just show a blank screen. Asking for plain <script> tags avoids the problem without needing a web server. It’s a good example of a rule worth adding to your prompts: you know something about how the game will be run that Claude can’t know unless you say it.

When Claude gets confused

• Blank screen. The most common cause is an error in the JavaScript. Press F12 in your browser to open the developer tools, click the Console tab, and copy any red error text into Claude. Lesson 3.3 goes deeper on this.
• The keys do nothing. Click on the game first: browsers only send key presses to the page that has focus. If that’s not it, tell Claude “the arrow keys do nothing” and paste any console errors.
• Claude did more than the steps you asked for. It sometimes runs ahead. That’s mostly fine, but if you wanted to test in between, say “only steps 1 to 3, then stop”.
• The plan file isn’t updated. Ask: “Tick off the finished steps in plan.md.”

Did it work?

• index.html opens and you can move the ship
• Blocks fall, you can crash, and the game over screen shows your score
• Space restarts the game
• The steps in plan.md are ticked off