30 Claude Prompts That Build Playable Games

You are a game developer who builds clean, scored quiz apps. <context> Build a complete multiple-choice quiz game as one self-contained HTML file with inline CSS and vanilla JavaScript, playable instantly in the artifact preview with no assets. Embed the questions in the JS as a data array. </context> <inputs> - Topic and questions: [10-15 QUESTIONS, EACH WITH 4 OPTIONS AND THE CORRECT ANSWER] - Per-question timer: [E.G. 15 SECONDS / NONE] - Feedback: [SHOW CORRECT ANSWER IMMEDIATELY / ONLY AT THE END] - Style and colors: [DESCRIBE] </inputs> <task> Build a playable quiz: a start screen, then one question at a time with four clickable options, scoring for correct answers, optional immediate right/wrong feedback that highlights the correct option, a progress indicator (question X of N), an optional countdown per question, and a results screen showing the score, a percentage, a short performance message, and a restart button. Shuffle question order and option order each play. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries. - Lock answer buttons once an option is chosen so a question can't be double-scored. - Keep the question data in one clearly commented array so it is trivial to edit. </constraints> <format> Return the full HTML as an artifact, then show the question-object format and explain how to drop in my own questions. </format>

You are a game developer who builds game-show-style trivia experiences. <context> Build a complete trivia game with categories and lifelines as one self-contained HTML file with inline CSS and vanilla JavaScript, playable instantly in the artifact preview with no assets. Embed questions in the JS. </context> <inputs> - Categories and questions: [3-5 CATEGORIES, EACH WITH SEVERAL QUESTIONS, OPTIONS, AND ANSWERS] - Difficulty/point tiers: [E.G. EASY 100, MEDIUM 200, HARD 300] - Lifelines: [50/50, SKIP, EXTRA TIME — PICK 1-2] - Style: [GAME-SHOW BOLD / CLEAN] </inputs> <task> Build a playable trivia game: a category-select board where the player picks a category and tier, scored questions worth more at higher difficulty, one or two lifelines (e.g. 50/50 removes two wrong options, skip moves on), a running total score, a question counter, and an end screen when all questions are used showing the final score and a play-again button. Track which questions are answered so none repeat. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries. - Each lifeline is usable a limited number of times and visibly disables once spent. - Mark answered tiles as used; questions and answers live in one editable data structure. </constraints> <format> Return the full HTML as an artifact, then explain the data structure and how the 50/50 lifeline picks which wrong options to remove. </format>

You are a game developer who builds fast reflex-and-knowledge games. <context> Build a complete true-or-false rapid-fire game as one self-contained HTML file with inline CSS and vanilla JavaScript, playable instantly in the artifact preview with no assets. Embed statements in the JS. </context> <inputs> - Statements: [A LIST OF STATEMENTS EACH FLAGGED TRUE OR FALSE] - Time pressure: [GLOBAL TIMER / PER-STATEMENT TIMER] - Controls: [TRUE/FALSE BUTTONS, PLUS LEFT/RIGHT OR T/F KEYS] - Streak bonus: [YES / NO] - Theme: [DESCRIBE] </inputs> <task> Build a playable true/false game: show one statement at a time with True and False buttons (and keyboard shortcuts), score correct answers, run on a countdown so the goal is to answer as many as possible before time runs out, optionally reward streaks with bonus points, flash quick correct/wrong feedback, and end with a final score, accuracy, and a best score in localStorage plus a restart. Reshuffle statements each game. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries. - Feedback and the next statement must appear fast enough to keep the rapid-fire pace. - Statement data lives in one editable array with a clear true/false flag. </constraints> <format> Return the full HTML as an artifact, then explain the streak-bonus math and how to make it harder by shortening the timer. </format>

You are a game developer who builds simple, sticky comparison games. <context> Build a complete higher-or-lower game as one self-contained HTML file with inline CSS and vanilla JavaScript, playable instantly in the artifact preview with no assets. Embed the comparison data in the JS. </context> <inputs> - Comparison items: [A LIST OF ITEMS EACH WITH A LABEL AND A NUMERIC VALUE, E.G. POPULATIONS, PRICES, SEARCH VOLUMES] - Reveal style: [SHOW THE VALUE AFTER THE GUESS] - Lives: [ONE WRONG ENDS IT / 3 LIVES] - Theme: [DESCRIBE] </inputs> <task> Build a playable higher-or-lower game: show two items side by side with the first item's value visible and the second hidden, ask the player to guess whether the second's value is higher or lower, reveal the value and score a point if correct, then slide the second item into the first slot and bring in a new challenger, continuing until a wrong guess (or lives run out). Track the score and a best streak in localStorage, and offer a restart. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries. - Handle ties sensibly (count as correct or skip) and never compare an item against itself. - The data array is clearly editable so I can plug in my own metric and items. </constraints> <format> Return the full HTML as an artifact, then explain how the next item is chosen and how to swap in my own dataset. </format>

You are a game developer and learning-science nerd who builds study games. <context> Build a complete flashcard study game as one self-contained HTML file with inline CSS and vanilla JavaScript, playable instantly in the artifact preview with no assets. Embed the cards in the JS. </context> <inputs> - Cards: [A LIST OF FRONT/BACK PAIRS, E.G. TERM AND DEFINITION] - Modes: [FLIP-AND-SELF-RATE / MULTIPLE CHOICE] - Recall logic: [REVIEW MISSED CARDS MORE OFTEN] - Theme: [DESCRIBE] </inputs> <task> Build a playable flashcard game: show the front of a card, let the player flip it to see the back, self-rate as 'got it' or 'missed', queue missed cards to reappear sooner (a light spaced-recall loop), track progress through the deck, show a session summary with how many were learned versus still shaky, and let the player restart or focus only on the missed pile. Save progress per deck in localStorage so a session can resume. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries. - The recall logic must actually resurface missed cards before easy ones, not just reshuffle randomly. - Cards live in one editable array; add a clean flip animation and keyboard shortcuts for rating. </constraints> <format> Return the full HTML as an artifact, then explain the resurfacing logic and how to paste in my own deck. </format>

You are a game developer who implements perfect-play board AIs. <context> Build a complete Tic-Tac-Toe game as one self-contained HTML file with inline CSS and vanilla JavaScript, playable instantly in the artifact preview with no assets. </context> <inputs> - Mode: [PLAYER VS UNBEATABLE AI / TWO PLAYERS LOCAL] - AI strength if vs AI: [UNBEATABLE / EASY-RANDOM / TOGGLE] - Who goes first: [PLAYER / AI / ALTERNATE] - Style: [MINIMAL / PLAYFUL] </inputs> <task> Build a playable Tic-Tac-Toe: a 3x3 board, click to place a mark, win detection across rows, columns, and diagonals, draw detection, a scoreboard tracking wins/losses/draws, and a reset. If vs AI, implement the move logic with minimax so the unbeatable setting truly never loses; offer an easy mode that plays randomly. Highlight the winning line. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries. - The unbeatable AI must use minimax (or equivalent) and provably never lose. - Prevent clicks on taken cells or after the game ends; keep the board keyboard-accessible. </constraints> <format> Return the full HTML as an artifact, then explain the minimax logic and how to add a difficulty slider that makes the AI imperfect. </format>

You are a game developer who builds turn-based board games with a thinking AI. <context> Build a complete Connect Four game as one self-contained HTML file with inline CSS and vanilla JavaScript, playable instantly in the artifact preview with no assets. </context> <inputs> - Board size: [7 COLUMNS x 6 ROWS STANDARD] - Mode: [VS AI / TWO PLAYERS LOCAL] - AI depth/strength: [EASY / MEDIUM / HARD] - Disc colors and theme: [DESCRIBE] </inputs> <task> Build a playable Connect Four: click a column to drop a disc that falls to the lowest empty slot, alternate turns, detect four-in-a-row horizontally, vertically, and diagonally, declare a winner and highlight the connecting discs, detect a full-board draw, and offer a new game. If vs AI, implement a minimax with a depth limit and a simple board heuristic so it plays a credible game at the chosen difficulty. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries. - Win detection must cover all four directions including both diagonals. - The AI must block obvious player threats and take its own winning move when available. </constraints> <format> Return the full HTML as an artifact, then explain the heuristic the AI uses and how to raise its search depth for a harder game. </format>

You are a game developer who builds classic two-player board games. <context> Build a complete Checkers game as one self-contained HTML file with inline CSS and vanilla JavaScript, playable instantly in the artifact preview with no assets. </context> <inputs> - Board: [8x8 STANDARD] - Mode: [TWO PLAYERS LOCAL / VS SIMPLE AI] - Rules: [FORCED CAPTURES YES/NO, KINGS, MULTI-JUMPS] - Colors and theme: [DESCRIBE] </inputs> <task> Build a playable Checkers game: standard starting layout, click a piece to see legal moves highlighted, move diagonally, capture by jumping an opponent piece, support multi-jumps, promote to king at the back row with kings moving both directions, enforce turn order, detect a win when a side has no pieces or no moves, and offer a reset. If forced captures are on, only allow capture moves when one is available. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries. - Legal-move generation must be correct including kings, chained jumps, and forced-capture rules. - Highlight legal destinations for the selected piece; block illegal clicks. </constraints> <format> Return the full HTML as an artifact, then explain how multi-jumps are detected and how to add a basic capture-greedy AI. </format>

You are a game developer who builds quick reflex games. <context> Build a complete whack-a-mole reaction game as one self-contained HTML file with inline CSS and vanilla JavaScript, playable instantly in the artifact preview with no assets. </context> <inputs> - Grid size: [E.G. 3x3 HOLES] - Round length: [E.G. 30 SECONDS] - Difficulty ramp: [MOLES APPEAR FASTER OVER TIME] - Bonus/penalty: [BOMB TILES THAT COST POINTS / NONE] - Theme: [DESCRIBE, USE EMOJI OR CSS SHAPES] </inputs> <task> Build a playable whack-a-mole: a grid of holes where moles pop up at random for a short window, clicking a mole in time scores a point and it disappears, missing it scores nothing, the spawn rate increases as the round goes on, an optional bomb tile costs points if clicked, a countdown timer, and an end screen with the score and a best score in localStorage plus a restart. Use emoji or shapes so no images are needed. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries. - Each mole has a fair visible window; clearing the timeout on a hit prevents double scoring. - Keep tap targets large and responsive for both mouse and touch. </constraints> <format> Return the full HTML as an artifact, then explain how spawn timing scales and how to add a combo for fast consecutive hits. </format>

You are a game developer who builds rhythm-and-memory games. <context> Build a complete Simon Says color-sequence memory game as one self-contained HTML file with inline CSS and vanilla JavaScript, playable instantly in the artifact preview with no assets. </context> <inputs> - Number of pads: [4 CLASSIC] - Pad colors and tones: [DESCRIBE, OR USE WEB AUDIO BEEPS] - Speed: [GETS FASTER AS THE SEQUENCE GROWS] - Strict mode: [ONE MISTAKE RESETS / 3 LIVES] - Theme: [DESCRIBE] </inputs> <task> Build a playable Simon game: four colored pads, the game flashes a growing sequence (with an optional tone per pad via the Web Audio API), the player repeats it by clicking pads in order, a correct full repeat adds one step and speeds up slightly, a wrong click ends the round (or costs a life), and the screen shows the current level/round. Save the best level in localStorage and offer a start/restart button. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries or sound files (synthesize tones with Web Audio). - Lock input while the sequence is playing back so early clicks don't register. - The flash-and-tone for each pad must be clearly perceivable and consistent. </constraints> <format> Return the full HTML as an artifact, then explain how playback timing and input-locking work and how to add a strict-mode toggle. </format>

You are a game developer who builds compulsive incremental games. <context> Build a complete idle/clicker game as one self-contained HTML file with inline CSS and vanilla JavaScript, playable instantly in the artifact preview with no assets. </context> <inputs> - Theme: [E.G. COOKIE BAKERY, COIN MINE, GARDEN] - Click reward: [POINTS PER CLICK] - Upgrades: [3-5 BUYABLE GENERATORS/MULTIPLIERS WITH COSTS] - Auto-income: [GENERATORS PRODUCE PASSIVE INCOME PER SECOND] - Theme colors: [DESCRIBE] </inputs> <task> Build a playable idle game: a big clickable element that adds currency per click, a shop of upgrades that cost currency, scale in price as you buy more, and either boost click value or add passive income per second, a running total and a per-second rate display, a game loop that ticks passive income continuously, and progress saved to localStorage so it resumes (including offline-ish gains since last visit). Format big numbers readably. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries. - Upgrade costs must scale (e.g. geometric) so progression stays interesting and never trivially cheap. - Use a setInterval or rAF tick for passive income; numbers should never display as ugly long floats. </constraints> <format> Return the full HTML as an artifact, then explain the cost-scaling formula and how to add a prestige/reset-for-bonus layer. </format>

You are a game developer who builds tight 2D platformers on canvas. <context> Build a complete single-level side-scrolling platformer as one self-contained HTML file with inline CSS and vanilla JavaScript on a <canvas>, playable instantly in the artifact preview with no assets. </context> <inputs> - Character control: [LEFT/RIGHT TO MOVE, UP OR SPACE TO JUMP] - Level elements: [PLATFORMS, GAPS, COINS, ONE OR TWO ENEMIES, A GOAL FLAG] - Physics feel: [GRAVITY, JUMP HEIGHT, MOVE SPEED] - Theme colors: [DESCRIBE] </inputs> <task> Build a playable platformer level: a character with gravity and jumping that lands on platforms, a camera that scrolls with the player, collectible coins that raise a score, at least one enemy that ends the run on contact (or can be jumped on), falling into a gap that costs a life or restarts, and a goal flag that triggers a level-complete screen. Show score and lives, and offer a restart. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries or sprite assets (draw with shapes). - Platform collision must be solid with no sinking through or sticking to edges; jump should feel responsive. - Use requestAnimationFrame with frame-rate-independent movement. </constraints> <format> Return the full HTML as an artifact, then explain the collision and camera approach and how I can edit the level layout array. </format>

You are a game developer who builds smooth, score-chasing endless runners. <context> Build a complete endless runner as one self-contained HTML file with inline CSS and vanilla JavaScript on a <canvas>, playable instantly in the artifact preview with no assets. </context> <inputs> - Character and action: [E.G. A RUNNER THAT JUMPS, OR JUMPS AND DUCKS] - Obstacles: [GROUND HAZARDS / OVERHEAD HAZARDS] - Speed ramp: [GETS FASTER OVER TIME] - Controls: [SPACE/UP TO JUMP, DOWN TO DUCK] - Theme: [DESCRIBE] </inputs> <task> Build a playable endless runner: the world scrolls left automatically and speeds up over time, the character auto-runs and can jump (and duck if overhead hazards exist) to dodge obstacles that spawn from the right, the score is distance or time survived, hitting an obstacle ends the run, and there's a high score in localStorage plus a press-to-restart game-over screen. Include a subtle parallax or ground detail for depth. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries or image assets. - Obstacle spacing must always leave a reachable gap given the current speed and jump arc. - Frame-rate-independent physics; cap difficulty scaling so it stays playable, not impossible. </constraints> <format> Return the full HTML as an artifact, then explain how obstacle spacing stays fair as speed rises and how to add a double-jump. </format>

You are a game developer and algorithms enthusiast who builds maze games. <context> Build a complete maze game that generates a random maze and lets the player navigate it, as one self-contained HTML file with inline CSS and vanilla JavaScript on a <canvas>, playable instantly in the artifact preview with no assets. </context> <inputs> - Maze size: [E.G. 15x15 / SMALL/MEDIUM/LARGE] - Generation: [PERFECT MAZE VIA DFS OR PRIM'S] - Controls: [ARROWS/WASD TO MOVE FROM START TO EXIT] - Extras: [TIMER, MOVE COUNTER, SHOW-SOLUTION BUTTON] - Theme: [DESCRIBE] </inputs> <task> Build a playable maze game: generate a random solvable maze (a perfect maze with exactly one path between any two cells), draw it, place the player at the start and a clearly marked exit, let the player move with the keyboard while respecting walls, run a timer and move counter, declare a win on reaching the exit, offer a new-maze button, and include a show-solution toggle that highlights the path from start to finish. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries. - The generated maze must always be fully solvable; the solver path must be the actual shortest/only route. - Movement must respect walls precisely; the player can never clip through a wall. </constraints> <format> Return the full HTML as an artifact, then explain the generation and solving algorithms and how to scale the maze size. </format>

You are a game developer who builds polished casual mini-games. <context> Build a complete Rock-Paper-Scissors game as one self-contained HTML file with inline CSS and vanilla JavaScript, playable instantly in the artifact preview with no assets. </context> <inputs> - Variant: [CLASSIC / ROCK-PAPER-SCISSORS-LIZARD-SPOCK] - Match format: [SINGLE ROUNDS / FIRST TO 5] - Opponent: [RANDOM / A LIGHT PATTERN-BIASED AI] - Style and animations: [DESCRIBE] </inputs> <task> Build a playable RPS game: three (or five) choice buttons, a computer pick, clear round resolution showing both picks and who won, a running player/computer score and a current streak, a short reveal animation or countdown, an optional first-to-N match end screen, and a reset. If the AI is pattern-biased, have it slightly favor the counter to the player's most-used move while staying beatable. </task> <constraints> - One self-contained HTML file; vanilla JS only, no libraries. - Round logic must correctly resolve every matchup, including the extended variant if chosen. - The AI must remain beatable; show the result clearly with both choices and an outcome label. </constraints> <format> Return the full HTML as an artifact, then explain how the pattern-biased AI works and how to switch it to pure random. </format>