Create Retro Game
Phased workflow to design, compose, and publish a playable arcade game
Discuss the user's game request. Assess against viability guide.
If red flags: Explain why, suggest 2-3 achievable alternatives.
If vague: Offer menu of proven game types (Snake, Pong, Breakout, etc.)
Ask clarifying questions:
- What's the core mechanic? (dodge, collect, shoot, match, etc.)
- Visual style preference? (neon/dark, pixel art, minimal, colorful)
- Any specific features? (power-ups, levels, multiplayer local)
Present structured outline:
[Game Name] - Proposed Design
Core Mechanic: [one sentence]
Player Actions: [controls and interactions]
Win/Lose Conditions: [how to score, how to die]
Visual Style: [colors, aesthetic]
Special Features: [power-ups, progression, etc.]
Ask: "Does this capture what you want? Any changes before I proceed?"
DO NOT proceed until user confirms the outline.
Create internal technical plan (share with user for transparency):
Game Objects:
- [list all: player, enemies, projectiles, collectibles, etc.]
Game States:
- [list all: menu, playing, paused, gameOver, etc.]
Functions Needed:
- [list key functions: init, update, render, collision, etc.]
Assets Needed:
- [list any images/sprites needed, or "code-drawn only"]
Self-validate: Is this achievable as a single HTML file with Canvas?
If scope creep detected, simplify and re-confirm with user.
If images/sprites are needed (identified in Phase 2):
For each required image, use Image Hosting to generate
and host it. Collect all public URLs.
Document: "Assets ready: [list URLs]"
If no images needed (code-drawn graphics), proceed to Phase 4.
Create session/{game-name}/ directory ({game-name} = lowercase, hyphens).
Build HTML skeleton:
- DOCTYPE, head with meta tags, title
- Canvas element with appropriate size
- CSS: dark background, neon accent colors, monospace font, centered canvas
- JS structure with empty function stubs for ALL functions from Phase 2 plan
Game loop scaffold (empty bodies):
- gameLoop() with requestAnimationFrame and deltaTime
- update(dt) stub
- render() stub
- Event listeners declared but empty
Save to session/{game-name}/ directory.
Verify: Does structure match Phase 2 plan? All game objects declared?
Implement the core game loop, player system, and entity system per the mechanics guide.
Write complete implementations—each function should be 15-40 lines, not stubs.
Build the complete collision and combat system:
Collision Detection (implement all needed types):
- AABB rectangle collision function
- Circle collision if needed
- Point-in-rect for click detection
- Collision response (bounce, destroy, damage, push)
Combat/Interaction System:
- Projectile spawning with cooldowns
- Hit detection between all relevant entity pairs
- Damage system with invincibility frames
- Score awards for different actions
- Combo or multiplier system if applicable
Spawning System:
- Wave-based or timer-based enemy spawning
- Spawn patterns (random, formations, edges)
- Difficulty scaling: spawn rate, speed, quantity
- Enemy variety: at least 2-3 types with different behaviors
Each collision type needs its own response logic. Don't just return true/false.
Implement ALL game states with full UI for each:
Start/Menu State:
- Animated title (pulse, glow, or floating effect)
- "Press SPACE to Start" with blinking animation
- Show high score
- Brief controls hint
- Background animation or particle effect
Playing State:
- HUD: Score (top-left), Lives/Health (icons, not just text), Level/Wave indicator
- Active gameplay with all mechanics
- Pause overlay on P or Escape (semi-transparent, "PAUSED" text, resume hint)
Game Over State:
- "GAME OVER" with dramatic entrance animation
- Final score with "NEW HIGH SCORE!" detection
- Statistics summary (enemies killed, time survived, etc.)
- "Press R to Restart" or restart button
- Fade or transition effect
State Transitions:
- Fade transitions between states (not instant cuts)
- Brief countdown before gameplay starts (3, 2, 1, GO!)
- Death animation before game over screen
Each state needs its own render function. States should feel distinct.
Build the complete rendering system:
Entity Rendering (detailed, not just rectangles):
- Player: Multi-part sprite or detailed shape (body + details)
- Enemies: Each type visually distinct, with animation frames
- Projectiles: Glowing, trailing, or animated
- Powerups: Pulsing, rotating, or glowing effect
Background & Environment:
- Scrolling starfield, grid, or pattern (not static black)
- Layer depth: background, midground, foreground
- Optional: environmental hazards or decorations
Effects System (implement at least 3):
- Screen shake function with decay
- Screen flash function for hits/explosions
- Particle system for explosions, trails, sparks
- Score popup animations (+10, +50 floating up)
Drawing Helpers:
- drawRect, drawCircle, drawTriangle utilities
- drawText with shadow/glow option
- Gradient fills for polish
- Retro CRT effect optional (scanlines, vignette)
Rendering code should be 200+ lines. Visual polish is what makes games feel good.
Build complete input systems:
Keyboard Controls (full implementation):
- keys object tracking all pressed keys
- keydown and keyup event listeners
- Support both Arrow keys AND WASD
- Space for primary action (shoot/jump)
- P or Escape for pause
- R for restart (when game over)
- Enter to start from menu
Touch Controls (required for mobile):
- touchstart, touchmove, touchend handlers
- Virtual joystick OR swipe-based movement
- Tap zones for actions (left side move, right side action)
- Touch position tracking relative to canvas
- Prevent default on touch to avoid scrolling
Mouse Controls (if applicable):
- Click handler for menu buttons
- Mousemove for aiming (if shooter)
- Canvas-relative mouse position calculation
Input State Management:
- Debounce rapid inputs where needed
- Input buffering for responsive feel
- Different controls per game state (menu vs playing)
Implement progression systems:
Difficulty Scaling:
- Time-based difficulty increase OR wave/level system
- Enemy speed increases over time
- Spawn rate increases
- New enemy types introduced at thresholds
- Maximum difficulty cap (stays playable)
Scoring System:
- Points for different actions (kills, survival, combos)
- Score multiplier that builds with consecutive actions
- Multiplier decay if player stops performing
- High score tracking with localStorage
- "NEW HIGH SCORE!" celebration when beaten
Lives/Health System:
- 3 lives OR health bar (pick appropriate for game)
- Visual life indicators (icons, not just number)
- Invincibility frames after taking damage
- Extra life at score thresholds (optional)
- Health pickups or shields as powerups
Powerup System (implement 2-4 powerups):
- Speed boost
- Rapid fire / spread shot
- Shield / invincibility
- Score multiplier
- Powerup spawning on timer or from enemies
- Powerup duration with visual countdown
Final polish pass:
Animation & Juice:
- Eased animations (not linear)
- Anticipation before actions (wind-up)
- Follow-through after actions (settle)
- Entity bobbing, rotating, or pulsing
- UI elements animate on change (score tick-up)
Visual Feedback (all required):
- Screen shake on big impacts
- Flash on player damage
- Explosion particles on enemy death
- Trail effects on fast-moving objects
- Glow or pulse on collectibles
Responsive Design:
- Canvas scales to window size
- Aspect ratio preserved
- Touch targets minimum 44px
- Works in portrait and landscape
Code Quality:
- Remove all console.log statements
- Remove all TODO/FIXME comments
- No empty function bodies
- Constants at top (GAME_WIDTH, PLAYER_SPEED, etc.)
- Clean variable names
CRITICAL: Verify DEPTH, not just presence. Check each item in the verification guide.
If ANY checkbox fails OR code is under 800 lines, go back and add depth before proceeding.
Write preview to session/{game-name}-preview.md with _action frontmatter:
_action:
label: "Deploy Game"
prompt: "Deploy session/{game-name}/ using
Deploy to GitHub Pages with project name {game-name} and commit message 'Deploy {game-name}'"
isComplete: false
{Game Name} - Ready to Deploy
Core Mechanic: [from Phase 1]
Controls: Keyboard (arrows/WASD, SPACE, P/ESC) + Touch
Verified Features:
- Start screen with instructions
- Pause/resume functionality
- Game over with score display
- High score persistence
- Touch controls for mobile
- [other features from plan]
Visual Polish:
- Screen shake on impacts
- Smooth animations
- Responsive canvas
Click Deploy Game when ready. Site will be live in 1-2 minutes.
Share with user:
- Live URL (remind: may take 1-2 minutes to propagate)
- Repository URL
- Controls summary
- Note: "Share this link with anyone!"
Offer: "Want any changes? I can modify and republish."
To run this task you must have the following required information:
> Game concept or description. Can be specific ("Snake game") or vague ("something fun").
Optional: preferred color scheme, difficulty preference.
If you don't have all of this information, exit here and respond asking for any extra information you require, and instructions to run this task again with ALL required information.
---
You MUST use a todo list to complete these steps in order. Never move on to one step if you haven't completed the previous step. If you have multiple CONSECUTIVE read steps in a row, read them all at once (in parallel). Otherwise, do not read a file until you reach that step.
Add all steps to your todo list now and begin executing.
## Steps
1. [Read Game Viability Assessment]: Read the documentation in: `skills/sauna/[skill_id]/references/app.game.viability.md`
2. Discuss the user's game request. Assess against viability guide.
**If red flags:** Explain why, suggest 2-3 achievable alternatives.
**If vague:** Offer menu of proven game types (Snake, Pong, Breakout, etc.)
Ask clarifying questions:
- What's the core mechanic? (dodge, collect, shoot, match, etc.)
- Visual style preference? (neon/dark, pixel art, minimal, colorful)
- Any specific features? (power-ups, levels, multiplayer local)
Present structured outline:
## [Game Name] - Proposed Design
**Core Mechanic:** [one sentence]
**Player Actions:** [controls and interactions]
**Win/Lose Conditions:** [how to score, how to die]
**Visual Style:** [colors, aesthetic]
**Special Features:** [power-ups, progression, etc.]
Ask: "Does this capture what you want? Any changes before I proceed?"
DO NOT proceed until user confirms the outline.
3. Create internal technical plan (share with user for transparency):
**Game Objects:**
- [list all: player, enemies, projectiles, collectibles, etc.]
**Game States:**
- [list all: menu, playing, paused, gameOver, etc.]
**Functions Needed:**
- [list key functions: init, update, render, collision, etc.]
**Assets Needed:**
- [list any images/sprites needed, or "code-drawn only"]
Self-validate: Is this achievable as a single HTML file with Canvas?
If scope creep detected, simplify and re-confirm with user.
4. If images/sprites are needed (identified in Phase 2):
For each required image, use `skills/sauna/[skill_id]/references/skill/media.github.host` to generate
and host it. Collect all public URLs.
Document: "Assets ready: [list URLs]"
If no images needed (code-drawn graphics), proceed to Phase 4.
5. [Read HTML App Scaffold]: Read the documentation in: `skills/sauna/[skill_id]/references/web.html.scaffold.md`
6. [Read Canvas Game Patterns]: Read the documentation in: `skills/sauna/[skill_id]/references/app.game.patterns.md`
7. Create session/{game-name}/ directory ({game-name} = lowercase, hyphens).
Build HTML skeleton:
- DOCTYPE, head with meta tags, title
- Canvas element with appropriate size
- CSS: dark background, neon accent colors, monospace font, centered canvas
- JS structure with empty function stubs for ALL functions from Phase 2 plan
Game loop scaffold (empty bodies):
- gameLoop() with requestAnimationFrame and deltaTime
- update(dt) stub
- render() stub
- Event listeners declared but empty
Save to session/{game-name}/ directory.
Verify: Does structure match Phase 2 plan? All game objects declared?
8. [Read Core Game Mechanics]: Read the documentation in: `skills/sauna/[skill_id]/references/app.game.mechanics.md`
9. Implement the core game loop, player system, and entity system per the mechanics guide.
Write complete implementations—each function should be 15-40 lines, not stubs.
10. Build the complete collision and combat system:
**Collision Detection (implement all needed types):**
- AABB rectangle collision function
- Circle collision if needed
- Point-in-rect for click detection
- Collision response (bounce, destroy, damage, push)
**Combat/Interaction System:**
- Projectile spawning with cooldowns
- Hit detection between all relevant entity pairs
- Damage system with invincibility frames
- Score awards for different actions
- Combo or multiplier system if applicable
**Spawning System:**
- Wave-based or timer-based enemy spawning
- Spawn patterns (random, formations, edges)
- Difficulty scaling: spawn rate, speed, quantity
- Enemy variety: at least 2-3 types with different behaviors
Each collision type needs its own response logic. Don't just return true/false.
11. Implement ALL game states with full UI for each:
**Start/Menu State:**
- Animated title (pulse, glow, or floating effect)
- "Press SPACE to Start" with blinking animation
- Show high score
- Brief controls hint
- Background animation or particle effect
**Playing State:**
- HUD: Score (top-left), Lives/Health (icons, not just text), Level/Wave indicator
- Active gameplay with all mechanics
- Pause overlay on P or Escape (semi-transparent, "PAUSED" text, resume hint)
**Game Over State:**
- "GAME OVER" with dramatic entrance animation
- Final score with "NEW HIGH SCORE!" detection
- Statistics summary (enemies killed, time survived, etc.)
- "Press R to Restart" or restart button
- Fade or transition effect
**State Transitions:**
- Fade transitions between states (not instant cuts)
- Brief countdown before gameplay starts (3, 2, 1, GO!)
- Death animation before game over screen
Each state needs its own render function. States should feel distinct.
12. Build the complete rendering system:
**Entity Rendering (detailed, not just rectangles):**
- Player: Multi-part sprite or detailed shape (body + details)
- Enemies: Each type visually distinct, with animation frames
- Projectiles: Glowing, trailing, or animated
- Powerups: Pulsing, rotating, or glowing effect
**Background & Environment:**
- Scrolling starfield, grid, or pattern (not static black)
- Layer depth: background, midground, foreground
- Optional: environmental hazards or decorations
**Effects System (implement at least 3):**
- Screen shake function with decay
- Screen flash function for hits/explosions
- Particle system for explosions, trails, sparks
- Score popup animations (+10, +50 floating up)
**Drawing Helpers:**
- drawRect, drawCircle, drawTriangle utilities
- drawText with shadow/glow option
- Gradient fills for polish
- Retro CRT effect optional (scanlines, vignette)
Rendering code should be 200+ lines. Visual polish is what makes games feel good.
13. Build complete input systems:
**Keyboard Controls (full implementation):**
- keys object tracking all pressed keys
- keydown and keyup event listeners
- Support both Arrow keys AND WASD
- Space for primary action (shoot/jump)
- P or Escape for pause
- R for restart (when game over)
- Enter to start from menu
**Touch Controls (required for mobile):**
- touchstart, touchmove, touchend handlers
- Virtual joystick OR swipe-based movement
- Tap zones for actions (left side move, right side action)
- Touch position tracking relative to canvas
- Prevent default on touch to avoid scrolling
**Mouse Controls (if applicable):**
- Click handler for menu buttons
- Mousemove for aiming (if shooter)
- Canvas-relative mouse position calculation
**Input State Management:**
- Debounce rapid inputs where needed
- Input buffering for responsive feel
- Different controls per game state (menu vs playing)
14. Implement progression systems:
**Difficulty Scaling:**
- Time-based difficulty increase OR wave/level system
- Enemy speed increases over time
- Spawn rate increases
- New enemy types introduced at thresholds
- Maximum difficulty cap (stays playable)
**Scoring System:**
- Points for different actions (kills, survival, combos)
- Score multiplier that builds with consecutive actions
- Multiplier decay if player stops performing
- High score tracking with localStorage
- "NEW HIGH SCORE!" celebration when beaten
**Lives/Health System:**
- 3 lives OR health bar (pick appropriate for game)
- Visual life indicators (icons, not just number)
- Invincibility frames after taking damage
- Extra life at score thresholds (optional)
- Health pickups or shields as powerups
**Powerup System (implement 2-4 powerups):**
- Speed boost
- Rapid fire / spread shot
- Shield / invincibility
- Score multiplier
- Powerup spawning on timer or from enemies
- Powerup duration with visual countdown
15. Final polish pass:
**Animation & Juice:**
- Eased animations (not linear)
- Anticipation before actions (wind-up)
- Follow-through after actions (settle)
- Entity bobbing, rotating, or pulsing
- UI elements animate on change (score tick-up)
**Visual Feedback (all required):**
- Screen shake on big impacts
- Flash on player damage
- Explosion particles on enemy death
- Trail effects on fast-moving objects
- Glow or pulse on collectibles
**Responsive Design:**
- Canvas scales to window size
- Aspect ratio preserved
- Touch targets minimum 44px
- Works in portrait and landscape
**Code Quality:**
- Remove all console.log statements
- Remove all TODO/FIXME comments
- No empty function bodies
- Constants at top (GAME_WIDTH, PLAYER_SPEED, etc.)
- Clean variable names
16. [Read Web Composition Standards]: Read the documentation in: `skills/sauna/[skill_id]/references/web.composition.standards.md`
17. [Read Game Verification Checklist]: Read the documentation in: `skills/sauna/[skill_id]/references/app.game.verification.md`
18. CRITICAL: Verify DEPTH, not just presence. Check each item in the verification guide.
If ANY checkbox fails OR code is under 800 lines, go back and add depth before proceeding.
19. [Read External Actions Guide]: Read the documentation in: `skills/sauna/[skill_id]/references/sauna.actions.external.md`
20. Write preview to session/{game-name}-preview.md with _action frontmatter:
---
_action:
label: "Deploy Game"
prompt: "Deploy session/{game-name}/ using `skills/sauna/[skill_id]/references/recipes/web.github.deploy.md` with project name {game-name} and commit message 'Deploy {game-name}'"
isComplete: false
---
## {Game Name} - Ready to Deploy
**Core Mechanic:** [from Phase 1]
**Controls:** Keyboard (arrows/WASD, SPACE, P/ESC) + Touch
**Verified Features:**
- [x] Start screen with instructions
- [x] Pause/resume functionality
- [x] Game over with score display
- [x] High score persistence
- [x] Touch controls for mobile
- [x] [other features from plan]
**Visual Polish:**
- [x] Screen shake on impacts
- [x] Smooth animations
- [x] Responsive canvas
Click **Deploy Game** when ready. Site will be live in 1-2 minutes.
21. [Gather Requirements for Deploy to GitHub Pages] The next step has the following requirements: "Project name for the deployment (becomes the URL slug).
Path to directory containing files to deploy.
Commit message describing the deployment.
". Search the user's data for this information or ask them directly if needed. Do not proceed until you have this information.
22. [Execute Deploy to GitHub Pages Task]: Spawn a subagent and provide it with the requirements gathered above and instructions to read `skills/sauna/[skill_id]/references/recipes/web.github.deploy.md` for its task list
23. Share with user:
- Live URL (remind: may take 1-2 minutes to propagate)
- Repository URL
- Controls summary
- Note: "Share this link with anyone!"
Offer: "Want any changes? I can modify and republish."