# Build a playable browser game prototype in one evening with an AI agent

PaperChase agent use case pack (playbook), version 1.0. For Claude Code, Cursor, Codex or any chat model that writes code. Time: 2 to 3 hours.

## The plan for tonight

| Time | Stage | You end with |
|---|---|---|
| 0:00 | Write the spec | One paragraph you could read aloud in 20 seconds |
| 0:15 | First build | A single index.html where something moves and responds |
| 0:45 | Five-minute playtest | Three notes: good, confusing, missing |
| 0:55 | Change one mechanic at a time | A folder of working versions |
| 1:45 | Feedback and feel | Sound, hit feedback, a score |
| 2:15 | Share it | An itch.io link you can send tonight |

## Rules that keep the evening on track

1. One file. No libraries, no build tools, no images. Shapes and colors only.
2. Save a copy every time it works: `v1.html`, `v2.html`, and so on.
3. One change per prompt. Never "and also".
4. Stop adding features at 1:45 even if you have ideas. Write them down for tomorrow.

## Contents

1. Spec template, with two filled-in examples
2. Stage prompts 1 to 6
3. Playtest note card
4. When the agent breaks it
5. Licensing checklist for art, sound and fonts
6. Posting on itch.io

---

## 1. Spec template

```
Game: [working title]
Every few seconds the player: [the core action, a verb]
Controls: [keys, mouse, touch]
You win when: [condition] / There is no win, the goal is: [score, time]
You lose when: [condition]
The one thing that makes it interesting: [twist, constraint or risk]
```

Example A:

```
Game: Lantern Run
Every few seconds the player: jumps between floating platforms in the dark.
Controls: left and right arrows, space to jump. Tap left or right half of the screen on phones, tap with two fingers to jump.
There is no win, the goal is: distance.
You lose when: you fall off the bottom of the screen.
The one thing that makes it interesting: your lantern only lights a small circle, and it shrinks unless you collect sparks.
```

Example B:

```
Game: Rush Hour Kitchen
Every few seconds the player: drags an ingredient onto the right order ticket.
Controls: mouse or touch drag.
You win when: you survive 3 minutes.
You lose when: three tickets expire.
The one thing that makes it interesting: tickets arrive faster as your streak grows.
```

## 2. Stage prompts

### Stage 1: First build

```
Build a browser game from this spec: [paste your one-paragraph spec].
Constraints: one file named index.html, a single canvas, inline JavaScript, no external libraries or assets. Shapes and colors only for art.
Include: a start screen, a game over screen with restart, keyboard controls and touch controls for phones.
Keep the game logic in clearly named functions (update, draw, reset) so I can ask for changes later.
When done, tell me in three lines how to play it and what you left out.
```

Open the file in your browser. If nothing appears, open the browser console (F12) and paste the first red error into the next prompt.

### Stage 2: Fix what blocks play

```
Here is what happens when I play: [describe]. Console errors: [paste or "none"].
Fix only what stops the game from being playable. Do not add features. Show me which functions you changed.
```

### Stage 3: One mechanic at a time

```
Playtest note: [one note from your card].
Change only what is needed to address this note. Keep controls and the start and game over screens working exactly as they are.
Before writing code, tell me in two sentences what you will change.
```

Repeat for each note. Save a numbered copy after each working change.

### Stage 4: Difficulty curve

```
Right now the game is [too easy at the start / too hard after 30 seconds / flat].
Add a simple difficulty curve: one variable that increases over time or score, and tell me its starting value and how fast it grows, so I can tune it by hand.
Put all tuning numbers in one CONFIG object at the top of the script.
```

The CONFIG object is the most useful thing you will ask for tonight. Tuning by hand is faster than prompting.

### Stage 5: Feedback and feel

```
Add game feel without changing rules:
- short sound effects generated with the Web Audio API for [jump, hit, collect, lose]. No audio files.
- a brief screen shake on [hit or lose], under 200 ms.
- a score display and a best score saved in localStorage.
- a mute toggle on the M key and a small button for phones.
Keep each addition in its own function.
```

### Stage 6: Ready to share

```
Prepare this game for sharing:
- make the canvas scale to fit any window while keeping its aspect ratio
- add a one-line how to play on the start screen
- make sure nothing breaks if the window is resized mid-game
- prevent the page from scrolling when arrow keys or space are pressed
Do not change gameplay.
```

## 3. Playtest note card

Play for five minutes. Do not fix anything while playing. Then write:

```
Felt good:   ______________________
Confusing:   ______________________
Missing:     ______________________
Died because: the game / me / unclear
```

If you can, watch one other person play without explaining anything. Their first 30 seconds tell you more than an hour of your own play.

## 4. When the agent breaks it

- **Controls stopped working after a change.** Go back to your last numbered copy. Ask for the change again and add: `Do not modify the input handling code.`
- **The agent rewrote the whole file.** Say: `Show only the functions you changed, not the whole file.`
- **It runs, but slowly.** Ask: `Find anything created inside the game loop that could be created once, and fix only that.`
- **It works on desktop, not on the phone.** Ask: `List every input path and confirm each has a touch equivalent. Fix any that do not.`

## 5. Licensing checklist

- [ ] The name and look are your own, not a trademarked game.
- [ ] Any font you add is licensed for your use (many open fonts are, check the license file).
- [ ] Any art or sound from an AI tool: you have read that tool's terms on commercial use.
- [ ] Any asset from a library site: the license allows your use and you have the attribution text if required.
- [ ] You have read the terms of the AI coding tool about who owns generated code.

## 6. Posting on itch.io

1. Rename your best version to `index.html` and zip it on its own (the zip should contain index.html at the top level).
2. On itch.io, create a new project and set the kind of project to HTML.
3. Upload the zip and tick the option that it will be played in the browser.
4. Set the embed size to your canvas size, or enable the fullscreen button.
5. Choose a visibility setting. Restricted or draft lets you share a private link with friends first.
6. Add two screenshots and the one-line how to play from your start screen.

Tomorrow: read your "missing" notes, pick one, and start again at Stage 3.

License: personal and commercial use. The games you make are yours.
Questions: mgmt@paperchasewebb.com