Prompt Library

Create a complete Match-3 puzzle game (like Bejeweled) as a single self-contained HTML file.

REQUIRED FEATURES:
1. Canvas-based rendering with 8×8 grid board
2. 6 gem types, each with distinct color AND shape (circle, diamond, square, triangle, star, hexagon)
3. Gems are rendered as polished 3D-looking shapes with gradient and highlight
4. Controls: click/tap two adjacent gems to swap. If swap creates a match of 3+, gems are cleared. If no match, gems swap back with animation.
5. Match detection: 3+ consecutive same-type gems in a row OR column (can be horizontal or vertical)
6. Cascade/chain reactions: after gems are cleared and new ones fall in, check for new matches automatically
7. Gravity: gems above cleared spaces fall down to fill gaps with smooth animation
8. New gems spawn from top to fill empty spaces (also with drop animation)
9. Board starts with no initial matches (regenerate until match-free)
10. Score system:
    - 3-match: 50 points
    - 4-match: 150 points
    - 5-match: 300 points
    - Cascade multiplier: 2x for chain-2, 3x for chain-3, etc.
11. Timer mode OR moves mode: player has 60 seconds or 30 moves (show both, use whichever runs out first)
12. Special gems created by matching 4+:
    - 4-match: creates a striped gem (clears entire row or column when matched)
    - 5-match (L/T shape): creates a wrapped gem (explodes in 3×3 area)
    - 5-match (straight line): creates a hypercube (clears all gems of same color)
13. Hint system: highlight a valid swap with subtle pulse every 10 seconds of inactivity
14. HUD: score, time remaining / moves remaining, level number
15. Level progression: each 1000 points = new level, timer gets stricter (lose 5 seconds per level)
16. Start screen: "MATCH-3" title, "Click to play"
17. Game over: final score, "Time's up!" or "No moves left!", high score, "Click to play again"
18. Animations: swap (smooth interpolation), match (flash + particles + fade), cascade (sequential column drops), special gem activation (screen shake for hypercube)

AUDIO:
19. Web Audio API: gem swap (soft slide sound), match (ascending chime), cascade (higher-pitched chime each chain), special gem (powerful chord), game over

STYLING:
20. Jewel/gemstone aesthetic with rich colors
21. Dark background with subtle radial gradient
22. Board has a rounded-rect frame with bevel effect
23. Gems have specular highlights (white gradient overlay)

CODE:
24. Single HTML file, vanilla JS, Canvas 2D
25. requestAnimationFrame for animations, setInterval/Timeout for game timers
26. Grid represented as 2D array, Board class manages match-find, cascade, refill

Create a complete Doodle Jump game as a single self-contained HTML file.

REQUIRED FEATURES:
1. Canvas-based rendering, portrait orientation (400x700 or viewport-scaled)
2. Player character: a small animated stick figure or cute blob with bouncing animation
3. Auto-jump: player constantly jumps upward when standing on a platform
4. Controls: tilt phone / left-right arrow keys / A-D / touch drag left-right
5. Horizontal movement is smooth, player wraps around screen edges (left edge → right edge)
6. Platforms generate procedurally as the player climbs:
   - 8-12 platforms visible on screen at a time
   - Platform types: green (normal, stationary), blue (moving left-right, 80px range), brown (breakable, crumbles after landing), orange (spring platform, launches 2x height)
   - Platform x-positions randomized within screen width
   - Platform y-spacing: 60-100px between platforms
7. Spring platform shows a visible spring/arrow indicator
8. Breaking platform has crack animation before crumbling
9. Vertical scrolling camera follows player upward
10. Score = highest Y position reached (displayed at top)
11. High score in localStorage
12. Background: gradient sky that transitions from day (light blue) to space (dark purple) as player climbs higher (based on score)
13. Collectible stars/coins randomly placed above platforms (bonus points)
14. Obstacles: occasional black platforms that kill on contact, moving enemies (flying saucers) at higher altitudes
15. Start screen: "DOODLE JUMP" title + bouncing character + "Press any key to start"
16. Game over: character falls off bottom, camera follows down, "GAME OVER" overlay with score, high score, "Press any key to restart"
17. Death animation: character spins and shrinks while falling

AUDIO:
18. Web Audio API: jump (short chirp), platform land (soft thud), spring (ascending whoosh), star collect (ding), break (crackle), death (descending), high score (celebration)

STYLING:
19. Cute, colorful cartoon style
20. Player has a face (eyes that look in movement direction)
21. Platforms have subtle gradient and shadow
22. Score displayed as clean overlay with star icon

CODE:
23. Single HTML file, vanilla JS, Canvas 2D
24. requestAnimationFrame with fixed-step update
25. Procedural generation: PlatformManager spawns/removes platforms off-screen

Create a complete Mario-style side-scrolling platformer as a single self-contained HTML file.

REQUIRED FEATURES:
1. Canvas-based rendering, full-window (maintains 16:9 ratio)
2. Player character: humanoid figure drawn with canvas primitives (body, head, arms, legs) with running animation (leg cycle)
3. Smooth physics: gravity (0.5), horizontal acceleration (0.3, max 5), friction (0.85), jump velocity (-10)
4. Variable jump height: hold jump button = jump higher (released early = short hop), max 300ms hold
5. Controls: Arrow keys / WASD (left/right/jump), Space also jumps
6. Touch controls: left/right buttons on bottom-left, jump button on bottom-right
7. Tile-based level design with at least 3 scrolling screens worth of content (3000px+ wide)
8. Tile types: empty, solid brick (brown with brick pattern), question block (yellow with ?), ground (brown with grass top), pipe (green, acts as solid + decoration)
9. Question blocks contain coins or power-up (super mushroom that makes player grow)
10. Collectible coins scattered through level (100 points each), floating with spin animation
11. Enemies: Goomba-like (walking back and forth, stomp to kill), Koopa-like (in shell, kick shell), flying enemies (patrol horizontally)
12. Player stomps enemy from above = enemy flattened (player bounces up). Side/below contact = player takes damage
13. Player has 3 health (displayed as hearts in HUD). Hit = brief invincibility (flashing, 2 seconds)
14. Level end: flagpole (police line tape style or classic flag). Touch it = win!
15. Moving camera follows player horizontally (never scrolls back left)
16. Parallax background: sky gradient with clouds (slow scroll), mountains (medium scroll), foreground
17. Pits/death zones: gaps in ground that player can fall into (instant death)
18. Start screen: game title + "Press Space to start" + simple controls legend
19. Pause: Escape or P
20. Game over: "GAME OVER", score, "Press Space to retry"
21. Win screen: "YOU WIN!", final score with coin bonus, "Press Space to play again"
22. Score display + coin counter + lives/hearts in HUD

AUDIO:
23. Web Audio API: jump (short ascending tone), coin collect (two-note chime), stomp enemy (thud), power-up (ascending arpeggio), death (descending), win (celebration jingle), background music (simple looping melody using oscillators)

VISUAL:
24. Pixel-art aesthetic achieved through canvas primitives (no sprites)
25. 16×16 pixel tile grid, scaled 3x for play
26. Bright, colorful palette (NES-inspired blues, greens, browns, reds)
27. Player has hat and mustache (Mario-inspired but not identical)

CODE:
28. Single HTML file, vanilla JS, Canvas 2D
29. requestAnimationFrame with delta-time physics
30. Tile map as 2D array, Camera class, Entity class hierarchy, Collision detection (AABB)

Create a complete Pong game as a single self-contained HTML file.

REQUIRED FEATURES:
1. Canvas-based rendering, centered in viewport (maintains 2:1 aspect ratio, max 800x400)
2. Two player modes selectable from start screen:
   a) 1P vs AI (player on left, AI on right)
   b) 2P local (W/S for left, Arrow Up/Down for right)
3. Mode selection screen with buttons/keyboard selection
4. Paddles: 100px tall, 12px wide, move smoothly with velocity (not instant snap)
5. AI paddle tracks ball with configurable reaction delay (50% accuracy, not frame-perfect)
6. Ball: 10px square, starts from center with random angle, speed increases slightly per hit
7. Ball reflection: angle changes based on where it hits the paddle (top/mid/bottom = different outgoing angle)
8. Wall bounce: top/bottom walls reflect ball normally
9. Scoring: first to 7 wins, points shown as large centered numbers
10. Center dashed line (classic Pong aesthetic)
11. Score display: large numbers at top (e.g. "3 — 5")
12. Start screen: "PONG" title, "1P vs AI" / "2P Local" selection instructions, "Press 1 or 2"
13. During play: current score shown, win condition displayed at 1 point away ("Match point")
14. Win screen: large "PLAYER X WINS!" or "AI WINS!", final score, "Press Space to play again"
15. Pause: press P or Escape

AUDIO:
16. Web Audio API: paddle hit (medium pitch tone), wall bounce (low pitch tone), score (two-tone sequence), win jingle (ascending arpeggio)

VISUAL:
17. Classic black-and-white Pong aesthetic (or dark theme with neon accents)
18. Paddles have subtle glow effect
19. Ball has motion trail (fading positions)
20. Clean HUD

CODE:
21. Single HTML file, vanilla JS, Canvas 2D
22. requestAnimationFrame with delta-time physics (frame-independent)
23. Modular: paddle class, ball class, AI class, game state machine

Create a complete Breakout game as a single self-contained HTML file.

REQUIRED FEATURES:
1. Canvas-based rendering, full-window sized (maintains 16:9 aspect ratio)
2. Paddle: controlled by mouse (move horizontally) + arrow keys + touch drag
3. Paddle width decreases slightly per level (starts 120px, -10px per level, min 70px)
4. Paddle has rounded corners and a subtle bounce-angle effect (ball reflects differently based on hit position)
5. Ball: starts on paddle (click/tap to launch), realistic physics with angle reflection
6. Ball speed increases slightly per brick hit and per level
7. Ball trail effect (semi-transparent previous positions)
8. Brick grid: 8 rows × 10 columns, each row different color (rainbow)
9. Brick types: standard (1 hit), fortified (2 hits, darker shade + crack visual), gold (indestructible, sparkle effect)
10. Power-ups (drop randomly from destroyed bricks):
    - Expand paddle (1.5x, 10 seconds)
    - Multi-ball (split into 3, 10 seconds)
    - Fire ball (destroys bricks on contact without bouncing, 8 seconds)
    - Extra life
    - Slow ball (0.7x speed, 8 seconds)
11. Lives system: start with 3, lose life when ball falls below paddle
12. Level progression: new brick layout each level (different patterns: diamond, pyramid, checkerboard)
13. Score: brick value varies by row (top rows worth more, 50-10 descending)
14. Start screen: "BREAKOUT" title, shows controls, "Click/Tap to play"
15. Pause: press P or Escape
16. Game over: final score, high score (localStorage), "Click to restart"
17. Level complete: celebration animation, "Level X Complete! → Next Level"

AUDIO:
18. Web Audio API: paddle hit (short ping based on hit position pitch), brick break (upward chirp), wall bounce (low thud), life lost (descending), power-up collect (ascending sparkle), game over

VISUAL:
19. Neon/arcade aesthetic
20. Particle burst when brick breaks (colored particles matching brick)
21. Power-up indicator pulsing on paddle
22. HUD: score, lives (as small ball icons), level number

CODE:
23. Single HTML file, vanilla JS, Canvas 2D
24. requestAnimationFrame with delta-time physics
25. Clean state machine: MENU, PLAYING, PAUSED, LEVEL_COMPLETE, GAME_OVER

Create a complete, playable Tetris game as a single self-contained HTML file.

REQUIRED FEATURES:
1. Canvas-based rendering: main playfield (10x20 grid) + next piece preview + hold piece display
2. All 7 standard Tetromino pieces: I, O, T, S, Z, J, L with correct colors
3. Controls: Left/Right arrow (move), Up (rotate CW), Down (soft drop), Space (hard drop), C (hold), P (pause)
4. Touch controls: swipe left/right (move), tap (rotate), swipe down (soft drop)
5. SRS (Super Rotation System) wall kicks — all 5 kick states for I-piece, 4 for others
6. 7-bag randomizer (deal all 7 pieces before reshuffling)
7. Ghost piece (translucent shadow showing where piece lands)
8. Lock delay: piece locks 500ms after landing, resets on move/rotate (max 15 resets)
9. Line clear scoring: 1 line=100, 2=300, 3=500, 4=800 (Tetris)
10. Level progression: every 10 lines clear = level up, speed increases
11. Gravity: current piece falls faster each level (start at 1sec, -50ms per level, min 100ms)
12. Start screen with title "TETRIS" and "Press any key to start"
13. Pause screen with overlay + "PAUSED"
14. Game over screen with final score, lines cleared, level reached
15. High score in localStorage
16. Side panel shows: NEXT (3 pieces preview), HOLD, SCORE, LEVEL, LINES

AUDIO:
17. Web Audio API: piece place (thump), line clear (ascending arpeggio), Tetris (special jingle), game over (descending), hold sound

VISUAL:
18. Dark theme with glow effects on pieces
19. Grid lines on playfield (subtle)
20. Line clear animation (flash white, then fade out)
21. Smooth piece movement (no teleporting)
22. Responsive canvas that fits viewport

CODE:
23. Single <script> tag, vanilla JS
24. Game loop with requestAnimationFrame + delta time for gravity
25. Modular: board class, piece class, renderer, input handler

Create a complete, playable Snake game as a single self-contained HTML file. No external libraries or assets.

REQUIRED FEATURES:
1. Canvas-based rendering (800x600 or viewport-filling canvas)
2. Snake movement on a grid (20x20 cells visible)
3. Arrow key + WASD controls (prevent reverse-direction)
4. Touch swipe controls for mobile (detect swipe direction)
5. Food spawns at random empty cell (different color per food type)
6. Score tracking (current score + high score persisted in localStorage)
7. Speed increases every 5 food eaten (faster tick interval)
8. Game states: start screen (press any key/tap to start), playing, paused (Space/Esc), game over
9. Game over shows final score + high score + "Press any key to restart"
10. Snake body rendered with rounded rectangles, head with eyes
11. Food rendered as apple/apple-icon style (red circle with leaf)
12. Grid lines visible (faint gray) for clarity
13. Score and high score displayed as clean HUD overlay
14. Responsive: canvas auto-scales to fit viewport (maintains aspect ratio)
15. Wall wrapping OR wall collision (choose one and document on screen)
16. Particle effect on food eat (small burst animation)
17. Smooth game over animation (flash snake red, brief delay before restart)

AUDIO:
18. Use Web Audio API for sound effects (food eat, game over) — no external files
19. Generate tones programmatically (oscillator + gain node, short beep for eat, descending tone for death)

CODE STRUCTURE:
20. All in one <script> tag
21. Use requestAnimationFrame with fixed-step game loop (tick interval)
22. Event listeners for keyboard and touch
23. Clean separation: game state object, update function, render function

STYLING:
24. Dark background with neon-style colors (green snake, red food, white text)
25. Canvas has subtle shadow/glow effect
26. Clean, modern font (system sans-serif)
27. No scrollbars, black body background

Create a complete Vampire Survivors-style survival arena game as a single self-contained HTML file.

REQUIRED FEATURES:
1. Canvas-based rendering, full-window (or 800x600 minimum)
2. Player character: drawn as a small humanoid with weapon visual (whip/sword/staff rotating around)
3. Movement: WASD / Arrow keys, at constant speed (no acceleration)
4. Touch controls: virtual joystick (left half of screen for movement)
5. Auto-attack: weapon attacks automatically toward nearest enemy (invisible targeting, no aim required)
6. Initial weapon: Magic Bolt — shoots a projectile at nearest enemy every 2 seconds
7. Enemies spawn continuously from screen edges (outside visible area, move toward player)
8. Enemy types:
   - Bat (fast, low HP, 10 XP) — spawns from start
   - Skeleton (medium speed, medium HP, 25 XP) — from 1-minute mark
   - Ghost (phases through other enemies, 15 XP) — from 2-minute mark
   - Werewolf (slow, high HP, 50 XP, charges) — from 3-minute mark
   - Boss giant (spawns every 5 minutes, huge HP, 200 XP, AoE attack) — from 5-minute mark
9. Enemy scaling: spawn rate increases over time, enemy HP scales with time played
10. XP gems dropped by enemies (float toward player, auto-collect when close)
11. Level up: every 100 XP, game pauses and shows 3 random upgrade choices
12. Upgrade pool (choose 1 of 3 each level up):
    - Magic Bolt +1 level (more damage, faster fire rate)
    - Fire Wand (unlock: fires piercing fireball)
    - Holy Water (unlock: leaves damaging zone on ground)
    - Garlic (unlock: AoE damage around player)
    - Speed Up (+10% move speed)
    - Max HP Up (+20 HP)
    - Armor (-1 damage taken)
    - Magnet (+30% XP pickup range)
    - Projectile Speed (+20%)
    - Area (+15% weapon area)
    - Weapon evolutions at max level (e.g., Magic Bolt Lv8 → Thunder Loop)
13. Player has HP bar (starts at 100). Contact with enemy = damage. Brief invincibility after hit (0.5s flashing).
14. Timer display (minutes:seconds) counting up — goal is to survive as long as possible
15. Score = XP collected + time bonus
16. "Game Over" when HP reaches 0: shows survival time, level reached, enemies killed, score
17. Start screen: title "SURVIVOR" + "Press any key to start" + controls

AUDIO:
18. Web Audio API: XP collect (soft chime), level up (ascending fanfare), hit (thud), enemy death (pop), boss spawn (deep horn), game over
19. Optional: simple background beat (low-fi loop with oscillator percussion)

VISUAL:
20. Dark gothic theme with glowing effects
21. Player has a light radius (darkness outside = limited visibility)
22. Enemy death = particle burst (colored by enemy type)
23. HUD: HP bar (top-left), XP bar (below HP), level (next to XP), timer (top-right), weapon display (bottom)
24. Minimap in corner showing enemies as dots

CODE:
25. Single HTML file, vanilla JS, Canvas 2D
26. requestAnimationFrame game loop with delta time
27. Entity pool for enemies (reuse dead entities to avoid GC spikes)
28. Spatial grid for collision detection optimization
29. Wave manager controls spawn timing and difficulty curve