game-developer

Game Developer

Guides implementation of web games — project setup, architecture, integration hooks, and iterative development.

When Invoked

By game-orchestra when a game design document exists but code doesn't.

STEP 1 — Read Design Document

Read the game design document (game-design.md) and extract key decisions that affect implementation.

• Genre and mechanics
• Canvas/DOM/hybrid choice
• State management approach
• Content structure and progression
• Controls and input type

GATE 1 OUTPUT

STEP 1 COMPLETE: Key decisions affecting implementation: [list mechanics, architecture choice, state approach, input type, content structure].

STEP 2 — Scaffold Project

Set up the project structure.

Recommended Setup

• Build tool: Vite (npm create vite@latest)
• Language: TypeScript or JavaScript (match user preference)
• Entry: Single index.html with inline or linked script
• Dev server: npm run dev on http://localhost:5173

Small Games (< 500 lines)

Single file: all logic in one game.js or game.ts.

Larger Games (> 500 lines)

src/
├── game.ts          # Entry point, game loop
├── state.ts         # State machine
├── entities.ts      # Game objects
├── renderer.ts      # Drawing/rendering
├── input.ts         # Input handling
└── types.ts         # Type definitions

GATE 2 OUTPUT

STEP 2 COMPLETE: Files created: [list all files created]. Structure: [single/modular]. Build tool: [tool].

STEP 3 — Implement Game Loop

Set up the core game loop and state management.

• Choose loop type: requestAnimationFrame (canvas) or DOM event-driven
• Implement state machine (menu, playing, paused, gameover)
• Set up render cycle

See references/game-patterns.md for patterns.

GATE 3 OUTPUT

STEP 3 COMPLETE: Loop type: [rAF/DOM event-driven]. State management: [approach]. States: [list of game states].

STEP 4 — Add Integration Hooks

Every game MUST implement these two hooks for testing. See game-integration.md for full examples.

1. window.render_game_to_text()

Returns a JSON string of the current game state. Used by game-qa and game-tester for state verification.

2. window.advanceTime(ms)

Advances the game by N milliseconds deterministically. Used for step-based frame control in automated tests.

GATE 4 OUTPUT

STEP 4 COMPLETE: window.render_game_to_text() returns [describe JSON shape]. window.advanceTime(ms) implemented with [deterministic/non-deterministic] time control.

STEP 5 — Implement Mechanics

Implement game mechanics from the design document using iterative workflow:

1. Implement ONE feature (smallest possible change)
2. Ensure integration hooks still work
3. Hand off to game-qa for testing
4. Fix issues found by QA
5. Return for next feature
6. Repeat until all design requirements met

Architecture Patterns

See references/game-patterns.md for:

• Game loop (requestAnimationFrame)
• State machine
• Entity-component pattern
• Collision detection (AABB)
• Canvas vs DOM decision guide

GATE 5 OUTPUT

STEP 5 COMPLETE: Mechanics implemented: [list each mechanic]. Remaining: [list or "none"].

STEP 6 — Code Quality Check

Review all code for quality standards.

• Use const and let, never var
• Keep functions small (< 30 lines)
• Name things clearly: updatePlayerPosition() not update()
• No magic numbers: use named constants
• Handle edge cases: boundary checking, null guards at system boundaries

GATE 6 OUTPUT

STEP 6 COMPLETE: No magic numbers: [confirmed/fixed N]. Naming: [confirmed/fixed N]. Error handling: [confirmed/added N guards]. Functions under 30 lines: [confirmed/refactored N].