The Master Game Build Prompt

One prompt that builds any complete browser game in a single Claude Code session

Before you write the master prompt for any game, you need four things ready. Your project folder open in Claude Code. Your CLAUDE.md with design rules inside the folder. The game type you have decided to build. And the specific rules, win conditions, and controls written down in plain English.

The more specific your pre-prompt decisions, the fewer fixes you need after the first build.

The Master Game Prompt Template

Copy this entire template, fill in every placeholder with your real values, and send it as one complete prompt.

Build me a complete browser game. Follow all design rules in @CLAUDE.md.

FILES:

Three files only: index.html, style.css, main.js.

No external libraries. No npm. No build tools.

All JavaScript in main.js. All CSS in style.css. Zero inline styles.

GAME TYPE: [NAME OF YOUR GAME — e.g. Memory Match, Snake, Word Game]
WHAT THE PLAYER DOES:

[Describe the core action in 2 to 3 sentences. What does the player control?

What is the goal? What ends the game or counts as winning?]

GAME RULES:

[List every rule as a numbered list. Be specific. Include edge cases.

Examples for Snake: the snake cannot reverse direction, the snake grows by

one segment when it eats food, the game ends if the snake hits a wall or itself]

CONTROLS:

Desktop: [KEYBOARD OR MOUSE CONTROLS — e.g. Arrow keys to move, Space to pause]

Mobile: [TOUCH CONTROLS — e.g. Swipe to change direction, tap to start]

GAME ELEMENTS:

[List everything that exists in the game — player, enemies, food, cards, bricks, etc.]

- [ELEMENT 1]: [describe its appearance and behaviour]
- [ELEMENT 2]: [describe its appearance and behaviour]
- [ELEMENT 3]: [describe its appearance and behaviour]
SCORING:

[How does the player earn points?]

[When and how is the score displayed?]

[Is there a high score saved between sessions?]

GAME STATES:

The game has these states — build all of them:

1. Start screen: show the game title, a brief one-line description, and a Play button
2. Playing: the active game with score visible at all times
3. Paused: [if applicable — describe what shows when paused]
4. Game over: show final score, high score, and a Play Again button

[Add any other states specific to your game — level complete, next level, etc.]

SOUND:

Use the Web Audio API to generate all sound effects in JavaScript with no audio files.

Create these sounds:

- [SOUND EVENT 1]: [describe the sound — e.g. "a short high-pitched beep for eating food"]
- [SOUND EVENT 2]: [describe the sound — e.g. "a lower tone for game over"]
- [SOUND EVENT 3]: [describe the sound — optional]

Add a mute toggle button in the top right of the game container.

HIGH SCORE:

Save the high score to localStorage with the key "[your-game-name]-highscore".

Display both current score and high score during gameplay.

The high score persists when the page is refreshed.

DESIGN:

Follow all rules in @CLAUDE.md

Game container: max [WIDTH]px wide and centred on the page
Background: [BACKGROUND HEX]
Primary colour for game elements: [PRIMARY HEX]
Accent colour for score, highlights, and UI: [ACCENT HEX]
Font: [FONT NAME] from Google Fonts

Canvas or DOM: [say "use canvas" for arcade games or "use DOM elements" for card and word games]

TECHNICAL:

Game loop: use requestAnimationFrame for the main loop

State: store all game state in a single gameState object

Input: add event listeners for keyboard, mouse, and touch as specified above

Mobile: the game must be fully playable on a 375px wide screen

Performance: never create new objects inside the game loop — create once and reuse

SELF-CHECK BEFORE DELIVERING:

Play the game from start to finish once and confirm:

1. Start screen appears on load
2. Clicking Play starts the game correctly
3. [SPECIFIC MECHANIC 1 — e.g. the snake moves in the correct direction when arrow keys are pressed]
4. [SPECIFIC MECHANIC 2 — e.g. eating food grows the snake and increases the score]
5. [WIN OR LOSE CONDITION — e.g. hitting the wall ends the game and shows the game over screen]
6. High score saves and reloads correctly after a page refresh
7. The mute button works
8. The game is playable on a 375px mobile screen

Filled Example: Memory Match

Here is the master prompt filled in completely for a Memory Match game. Use this as a reference for the level of detail that produces a working game on the first build.

Build me a complete browser game. Follow all design rules in @CLAUDE.md.

FILES:

Three files only: index.html, style.css, main.js.

No external libraries. No npm. No build tools.

All JavaScript in main.js. All CSS in style.css. Zero inline styles.

GAME TYPE: Memory Match
WHAT THE PLAYER DOES:

The player flips cards two at a time to find matching pairs. All cards start

face down. When two face-up cards match they stay revealed. When they do not

match they flip back face down after a short delay. The game ends when all

pairs are matched.

GAME RULES:

1. There are 16 cards arranged in a 4x4 grid — 8 unique pairs
2. All cards start face down
3. The player can only flip 2 cards at a time
4. If the two face-up cards match they stay face up and cannot be clicked again
5. If they do not match they flip back face down after 900ms
6. No card can be clicked while two non-matching cards are face up and waiting to flip back
7. The game ends when all 8 pairs are matched
8. Track total attempts (each pair of flips counts as one attempt)
9. Track elapsed time in seconds from when the first card is clicked

CONTROLS:

Desktop: click a card to flip it

Mobile: tap a card to flip it

GAME ELEMENTS:

• Cards: 16 cards in a 4x4 grid. Each card has a face-down state showing the back

design and a face-up state showing an emoji icon. Use these 8 emoji pairs:

🎯 🎨 🎭 🎪 🎬 🎤 🎵 🎸

• Grid: responsive grid that fits within the game container
• Score area: above the grid showing Attempts, Time, and Best Score

SCORING:

Attempts count increases by 1 each time the player flips 2 cards.

Time counts up in seconds from the first card flip.

Best Score is the fewest attempts to complete the game saved in localStorage.

Lower attempts is better.

GAME STATES:

1. Start screen: title "Memory Match", tagline "Find all the matching pairs",

and a Start Game button

1. Playing: the 4x4 grid with Attempts, Time elapsed, and Best Score visible above
2. Game over (win): show "You matched all pairs!" with final attempts, time,

whether a new best score was set, and a Play Again button

SOUND:

Use the Web Audio API with no audio files.

• Card flip: a soft click sound using a short oscillator burst at 440hz for 80ms
• Match found: a pleasant two-tone chime, first 523hz then 659hz each for 100ms
• Game complete: a short ascending three-tone fanfare at 523hz, 659hz, and 784hz

HIGH SCORE:

Save the best attempt count to localStorage with the key "memory-match-best".

Display as "Best: X attempts" above the grid.

Update after each completed game if the new score is lower.

DESIGN:

Follow all rules in @CLAUDE.md

Game container: max 480px wide and centred

Background: #0a0a0a

Card back colour: #1a1a2e

Card front colour: #16213e with the emoji centred at 2rem font size

Accent: #e8c547 for score labels and matched card border

Font: Space Grotesk from Google Fonts

Use DOM elements not canvas — cards are div elements with CSS flip animation

TECHNICAL:

State stored in a single gameState object

No card click should register while two unmatched cards are face up

Shuffle cards using Fisher-Yates algorithm

CSS flip animation using transform: rotateY(180deg) and backface-visibility: hidden

SELF-CHECK BEFORE DELIVERING:

1. Start screen appears and Start Game button works
2. 16 cards appear in a 4x4 grid all face down
3. Clicking a card flips it to show the emoji
4. Clicking a second matching card keeps both face up
5. Clicking a second non-matching card flips both back after 900ms
6. Cannot click a third card while two non-matching cards are visible
7. Attempts counter increases with each pair of flips
8. Timer starts on first click and stops when all pairs are matched
9. Win screen appears when all 8 pairs are matched
10. High score saves and loads correctly after page refresh

Adding Sound With No Audio Files

Sound effects make games feel complete. The Web Audio API generates tones directly in JavaScript with zero external files.

When Claude builds the sound system using the master prompt above, every sound is generated by creating oscillators that produce tones at specific frequencies for specific durations. A short high-frequency tone sounds like a click or ping. A lower tone sounds like a thud. An ascending sequence sounds like a win fanfare.

You do not need to know the frequencies. Just describe the sound in plain English in your prompt and Claude picks appropriate values.

Examples of how to describe sounds:

• "A soft click for flipping a card." Claude generates a short burst at mid frequency.
• "A satisfying chime for finding a match." Claude generates a pleasant two-tone sequence.
• "A low buzzing sound for a wrong answer." Claude generates a low descending tone.
• "A victory fanfare for completing the game." Claude generates an ascending multi-tone sequence.

Saving High Scores

The high score system uses localStorage and requires two things to work correctly.

When a game ends, check if the new score beats the saved high score. If it does, save the new score to localStorage. If it does not, leave the saved score unchanged.

When the page loads, read the saved high score from localStorage before the first game starts. Display it immediately so the player sees their best score before playing.

If you want to reset the high score for testing, send Claude this:

Add a small "Reset High Score" button below the game container.

When clicked, delete the localStorage key [your-game-name]-highscore

and reset the displayed high score to zero.

Style it as a secondary button so it is clearly not a primary game action.

Mobile Touch Controls

Desktop keyboard controls do not work on mobile because there is no keyboard. Every game that uses keyboard input needs a separate touch control system.

For Snake-style directional movement, ask for on-screen arrow buttons or swipe detection. For card games, touch events fire on tap automatically if you build with DOM elements. For arcade games with a single action like jump or shoot, a large tap area works well.

Include this in your prompt for any game that needs swipe controls:

• Add swipe detection for mobile using touch events.
• touchstart: record the starting X and Y position.
• touchend: compare the ending position to the start.

If the horizontal difference is greater than the vertical difference:

• swipe right if ending X is greater than starting X
• swipe left if ending X is less than starting X

If the vertical difference is greater than the horizontal difference:

• swipe down if ending Y is greater than starting Y
• swipe up if ending Y is less than starting Y
• Map each swipe direction to the same action as the corresponding arrow key.

Your action right now is to choose your first game from the types lesson. Fill in the master prompt template completely using the Memory Match example as a guide for the level of detail needed. Send it to Claude and let it build all three files before you interrupt or ask questions.