mirror of
https://github.com/PlayableIntelligence/game-creator.git
synced 2026-09-19 07:34:10 +08:00
init
This commit is contained in:
rshtirmer
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "game-creator",
|
||||
"owner": {
|
||||
"name": "OpusGameLabs"
|
||||
},
|
||||
"metadata": {
|
||||
"description": "Opinionated game development toolkit for building browser games with Three.js (3D) and Phaser (2D), including visual design, audio engineering, QA testing, and Play.fun monetization",
|
||||
"version": "1.0.0"
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
"name": "game-creator",
|
||||
"source": ".",
|
||||
"description": "Build 2D and 3D browser games with opinionated architecture, visual polish, procedural audio, and automated QA",
|
||||
"version": "1.0.0",
|
||||
"author": {
|
||||
"name": "OpusGameLabs"
|
||||
},
|
||||
"homepage": "https://github.com/OpusGameLabs/game-creator",
|
||||
"repository": "https://github.com/OpusGameLabs/game-creator",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"games",
|
||||
"gamedev",
|
||||
"threejs",
|
||||
"phaser",
|
||||
"3d",
|
||||
"2d",
|
||||
"browser-games",
|
||||
"playfun",
|
||||
"monetization",
|
||||
"game-design",
|
||||
"game-audio",
|
||||
"strudel",
|
||||
"playwright",
|
||||
"qa"
|
||||
],
|
||||
"category": "development"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "game-creator",
|
||||
"description": "Opinionated game development plugin for building 3D (Three.js) and 2D (Phaser) browser games with event-driven architecture, centralized state, and Play.fun monetization",
|
||||
"version": "1.0.0",
|
||||
"author": {
|
||||
"name": "OpusGameLabs"
|
||||
},
|
||||
"keywords": ["games", "threejs", "phaser", "gamedev", "3d", "2d", "playfun", "monetization"]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
character-library/**/*.jpg filter=lfs diff=lfs merge=lfs -text
|
||||
character-library/**/*.png filter=lfs diff=lfs merge=lfs -text
|
||||
*.glb filter=lfs diff=lfs merge=lfs -text
|
||||
@@ -0,0 +1,6 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.DS_Store
|
||||
*.log
|
||||
test-results/
|
||||
playwright-report/
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
description: Reviews game codebases for architecture compliance, performance issues, and monetization readiness. Use when analyzing a game project, doing code review on game code, or evaluating game quality.
|
||||
capabilities: ["architecture-review", "performance-analysis", "code-quality-check", "monetization-assessment"]
|
||||
---
|
||||
|
||||
# Game Reviewer Agent
|
||||
|
||||
You are a specialized game code reviewer. You analyze browser game codebases (Three.js, Phaser, or other web game engines) against established best practices.
|
||||
|
||||
## Capabilities
|
||||
|
||||
- **Architecture Review**: Check for event-driven patterns, centralized state, constants centralization, proper module separation
|
||||
- **Performance Analysis**: Identify GC pressure, missing object pooling, uncapped delta time, resource leaks
|
||||
- **Code Quality**: Check for circular dependencies, naming conventions, error handling, single responsibility
|
||||
- **Monetization Assessment**: Evaluate readiness for Play.fun integration (points system, session tracking, anti-cheat structure)
|
||||
|
||||
## Review Process
|
||||
|
||||
1. Read `package.json` to identify the engine and dependencies
|
||||
2. Map the directory structure to understand code organization
|
||||
3. Read core files: Game/orchestrator, EventBus, GameState, Constants
|
||||
4. Read gameplay modules for pattern compliance
|
||||
5. Check UI code for proper event integration
|
||||
6. Assess overall architecture against the game-architecture skill patterns
|
||||
|
||||
## What to Look For
|
||||
|
||||
### Must-Have Patterns
|
||||
- Singleton EventBus with `Events` constants enum
|
||||
- Singleton GameState with domain-organized state
|
||||
- Constants file with zero hardcoded values in game logic
|
||||
- Game orchestrator that initializes all systems
|
||||
- Clear directory structure (core/systems/gameplay/ui/level)
|
||||
|
||||
### Performance Red Flags
|
||||
- `new Vector3()` or `new Box3()` inside update loops
|
||||
- Missing delta time cap (`Math.min(delta, 0.1)`)
|
||||
- No `.dispose()` calls when removing Three.js objects
|
||||
- Event listeners not cleaned up on scene transitions
|
||||
- No object pooling for frequently created/destroyed objects
|
||||
|
||||
### Quality Indicators
|
||||
- Consistent event naming (`domain:action`)
|
||||
- Modules only communicate through EventBus
|
||||
- Each file has a single clear responsibility
|
||||
- Error handling in event callbacks
|
||||
|
||||
## Output
|
||||
|
||||
Provide a structured review with scores and actionable recommendations. Be specific about file names and line numbers when flagging issues.
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
description: Add music and sound effects to a game using Strudel.cc — background music, menu themes, and SFX
|
||||
disable-model-invocation: true
|
||||
argument-hint: "[path-to-game]"
|
||||
---
|
||||
|
||||
# Add Audio
|
||||
|
||||
Add procedural music and sound effects to an existing game using Strudel.cc.
|
||||
|
||||
## Instructions
|
||||
|
||||
Analyze the game at `$ARGUMENTS` (or the current directory if no path given).
|
||||
|
||||
First, load the game-audio skill to get the full Strudel patterns and integration guide.
|
||||
|
||||
### Step 1: Audit
|
||||
|
||||
- Read `package.json` to identify the engine and check if `@strudel/web` is installed
|
||||
- Read `src/core/EventBus.js` to see what game events exist (flap, score, death, etc.)
|
||||
- Read all scene files to understand the game flow (menu, gameplay, game over)
|
||||
- Identify what music and SFX would fit the game's genre and mood
|
||||
|
||||
### Step 2: Plan
|
||||
|
||||
Present a table of planned audio:
|
||||
|
||||
| Event / Scene | Audio Type | Style | Description |
|
||||
|---------------|-----------|-------|-------------|
|
||||
| MenuScene | BGM | Ambient | Gentle pad chords with delayed arps |
|
||||
| GameScene | BGM | Chiptune | Upbeat square wave melody + drums |
|
||||
| GameOverScene | BGM | Somber | Descending triangle melody |
|
||||
| Bird Flap | SFX | Retro | Quick pitch sweep up |
|
||||
| Score | SFX | Retro | Two-tone ding |
|
||||
| Death | SFX | Retro | Descending crushed notes |
|
||||
|
||||
### Step 3: Implement
|
||||
|
||||
1. Install `@strudel/web` if not already present
|
||||
2. Create `src/audio/AudioManager.js`
|
||||
3. Create `src/audio/music.js` with BGM for each scene
|
||||
4. Create `src/audio/sfx.js` with SFX for each event
|
||||
5. Wire AudioManager to EventBus in the appropriate scene
|
||||
6. Initialize audio on first user interaction
|
||||
7. Add audio-related constants to `Constants.js` if needed
|
||||
|
||||
### Step 4: Verify
|
||||
|
||||
- Run `npm run build` to confirm no errors
|
||||
- List all files created/modified
|
||||
- Recommend the user test with the dev server
|
||||
- Note the AGPL-3.0 license requirement
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
description: Add a new feature to an existing game following the architecture patterns
|
||||
disable-model-invocation: true
|
||||
argument-hint: "[feature-description]"
|
||||
---
|
||||
|
||||
# Add Feature
|
||||
|
||||
Add a new feature to the current game project following the established architecture patterns.
|
||||
|
||||
## Instructions
|
||||
|
||||
The user wants to add: $ARGUMENTS
|
||||
|
||||
### Step 1: Understand the codebase
|
||||
|
||||
- Read `package.json` to identify the engine (Three.js or Phaser)
|
||||
- Read `src/core/Constants.js` for existing configuration
|
||||
- Read `src/core/EventBus.js` for existing events
|
||||
- Read `src/core/GameState.js` for existing state
|
||||
- Read `src/core/Game.js` (or GameConfig.js) for existing system wiring
|
||||
|
||||
### Step 2: Plan the feature
|
||||
|
||||
Determine what's needed:
|
||||
- New module file(s) and where they go in the directory structure
|
||||
- New events to add to the Events enum
|
||||
- New constants to add to Constants.js
|
||||
- New state to add to GameState.js
|
||||
- How to wire it into the Game orchestrator
|
||||
|
||||
### Step 3: Implement
|
||||
|
||||
Follow these rules strictly:
|
||||
1. Create the new module in the correct `src/` subdirectory
|
||||
2. Add ALL new events to `EventBus.js` Events enum
|
||||
3. Add ALL configuration values to `Constants.js` (zero hardcoded values)
|
||||
4. Add any new state domains to `GameState.js`
|
||||
5. Wire the new system into `Game.js` (import, instantiate, update in loop)
|
||||
6. Use EventBus for ALL communication with other systems
|
||||
7. Follow the existing code style and patterns in the project
|
||||
|
||||
### Step 4: Verify
|
||||
|
||||
- Confirm the feature integrates without breaking existing systems
|
||||
- Check that no circular dependencies were introduced
|
||||
- Ensure event listeners are properly cleaned up if applicable
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
description: Audit and improve the visual design, polish, and player experience of an existing game
|
||||
disable-model-invocation: true
|
||||
argument-hint: "[path-to-game]"
|
||||
---
|
||||
|
||||
# Design Game
|
||||
|
||||
Run a UI/UX design pass on an existing game to improve visuals, atmosphere, and game feel.
|
||||
|
||||
## Instructions
|
||||
|
||||
Analyze the game at `$ARGUMENTS` (or the current directory if no path given).
|
||||
|
||||
First, load the game-designer skill to get the full design vocabulary and patterns.
|
||||
|
||||
### Step 1: Audit
|
||||
|
||||
- Read `package.json` to identify the engine
|
||||
- Read `src/core/Constants.js` for the current color palette and config
|
||||
- Read all scene files to understand current visuals
|
||||
- Read entity files to see how game objects are drawn
|
||||
- Read `src/core/EventBus.js` for existing events
|
||||
|
||||
### Step 2: Design Report
|
||||
|
||||
Score each area 1-5 and present as a table:
|
||||
|
||||
| Area | Score | Notes |
|
||||
|------|-------|-------|
|
||||
| Background & Atmosphere | | |
|
||||
| Color Palette | | |
|
||||
| Animations & Tweens | | |
|
||||
| Particle Effects | | |
|
||||
| Screen Transitions | | |
|
||||
| Typography & HUD | | |
|
||||
| Game Feel / Juice | | |
|
||||
| Menu & Game Over | | |
|
||||
|
||||
Then list the top improvements ranked by visual impact.
|
||||
|
||||
### Step 3: Implement
|
||||
|
||||
Ask the user which improvements they want, or implement all if they say so. Follow the game-designer skill patterns:
|
||||
|
||||
1. All new values in `Constants.js`
|
||||
2. Use EventBus for triggering effects
|
||||
3. Don't alter gameplay (physics, scoring, controls, spawn timing)
|
||||
4. Prefer procedural graphics
|
||||
5. New files in proper directories
|
||||
|
||||
### Step 4: Verify
|
||||
|
||||
- Run `npm run build` to confirm no errors
|
||||
- Summarize all changes made
|
||||
- Recommend `/game-creator:review-game` to verify architecture compliance
|
||||
@@ -0,0 +1,40 @@
|
||||
---
|
||||
description: Scaffold a new browser game project (Three.js 3D or Phaser 2D)
|
||||
disable-model-invocation: true
|
||||
argument-hint: "[3d|2d] [game-name]"
|
||||
---
|
||||
|
||||
# New Game
|
||||
|
||||
Create a new browser game project from scratch.
|
||||
|
||||
## Instructions
|
||||
|
||||
Parse $ARGUMENTS to determine:
|
||||
- **Engine**: First argument should be `3d` (Three.js) or `2d` (Phaser). If not specified, ask the user.
|
||||
- **Name**: Second argument is the game name (kebab-case). If not specified, ask the user.
|
||||
|
||||
Then scaffold the project:
|
||||
|
||||
1. Create the project directory with the name provided
|
||||
2. Initialize with `npm init -y`
|
||||
3. Install dependencies:
|
||||
- 3D: `npm install three && npm install -D vite`
|
||||
- 2D: `npm install phaser && npm install -D vite`
|
||||
4. Create `vite.config.js` per the engine skill
|
||||
5. Update `package.json` with `"type": "module"` and dev/build/preview scripts
|
||||
6. Create the full directory structure per the engine skill (core/, systems/, gameplay/ etc.)
|
||||
7. Create starter files:
|
||||
- `core/EventBus.js` with singleton and Events enum
|
||||
- `core/GameState.js` with singleton
|
||||
- `core/Constants.js` with placeholder config
|
||||
- `core/Game.js` (3D) or `core/GameConfig.js` (2D) orchestrator
|
||||
- `main.js` entry point
|
||||
- `index.html` with game container div
|
||||
8. Create `/public/` directory for assets
|
||||
|
||||
After scaffolding, tell the user:
|
||||
- How to start the dev server (`cd <name> && npm run dev`)
|
||||
- The architecture overview
|
||||
- How to add new features (create module, add events, add constants, wire in Game.js)
|
||||
- **Recommend running `/game-creator:design-game`** to do a visual design pass — the scaffolded game is functional but visually flat, and the designer will add atmosphere, polish, and game feel (sky gradients, clouds, particles, screen transitions, juice effects, etc.)
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
description: Add Playwright QA tests to a game — visual regression, gameplay verification, performance, and accessibility
|
||||
disable-model-invocation: true
|
||||
argument-hint: "[path-to-game]"
|
||||
---
|
||||
|
||||
# QA Game
|
||||
|
||||
Add automated QA testing with Playwright to an existing game project.
|
||||
|
||||
## Instructions
|
||||
|
||||
Analyze the game at `$ARGUMENTS` (or the current directory if no path given).
|
||||
|
||||
First, load the game-qa skill to get the full testing patterns and fixtures.
|
||||
|
||||
### Step 1: Audit testability
|
||||
|
||||
- Read `package.json` to identify the engine and dev server port
|
||||
- Read `vite.config.js` for the server port
|
||||
- Read `src/main.js` to check if `window.__GAME__`, `window.__GAME_STATE__`, `window.__EVENT_BUS__` are exposed
|
||||
- Read `src/core/GameState.js` to understand what state is available
|
||||
- Read `src/core/EventBus.js` to understand what events exist
|
||||
- Read all scene files to understand the game flow
|
||||
|
||||
### Step 2: Setup Playwright
|
||||
|
||||
1. Install dependencies: `npm install -D @playwright/test @axe-core/playwright && npx playwright install chromium`
|
||||
2. Create `playwright.config.js` with the correct dev server port and webServer config
|
||||
3. Expose `window.__GAME__`, `window.__GAME_STATE__`, `window.__EVENT_BUS__`, `window.__EVENTS__` in `src/main.js` if not already present
|
||||
4. Create the test directory structure:
|
||||
```
|
||||
tests/
|
||||
├── e2e/
|
||||
│ ├── game.spec.js
|
||||
│ ├── visual.spec.js
|
||||
│ └── perf.spec.js
|
||||
├── fixtures/
|
||||
│ └── game-test.js
|
||||
└── helpers/
|
||||
└── seed-random.js
|
||||
```
|
||||
5. Add npm scripts: `test`, `test:ui`, `test:headed`, `test:update-snapshots`
|
||||
|
||||
### Step 3: Generate tests
|
||||
|
||||
Write tests based on what the game actually does:
|
||||
|
||||
- **game.spec.js**: Boot test, scene transitions, input handling, scoring, game over
|
||||
- **visual.spec.js**: Screenshot regression for each scene (menu, gameplay, game over)
|
||||
- **perf.spec.js**: Load time budget, FPS during gameplay
|
||||
|
||||
Follow the game-qa skill patterns. Use `gamePage` fixture. Use `page.evaluate()` to read game state. Use `page.keyboard.press()` for input.
|
||||
|
||||
### Step 4: Run and verify
|
||||
|
||||
1. Run `npx playwright test` to execute all tests
|
||||
2. If visual tests fail on first run, that's expected — generate baselines with `npx playwright test --update-snapshots`
|
||||
3. Run again to verify all tests pass
|
||||
4. Summarize results
|
||||
|
||||
### Step 5: Report
|
||||
|
||||
List:
|
||||
- Every file created
|
||||
- Every test and what it verifies
|
||||
- How to run tests (`npm test`, `npm run test:ui`, `npm run test:headed`)
|
||||
- How to update visual baselines (`npm run test:update-snapshots`)
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
description: Review an existing game codebase for architecture, performance, and best practices
|
||||
disable-model-invocation: true
|
||||
argument-hint: "[path-to-game]"
|
||||
---
|
||||
|
||||
# Review Game
|
||||
|
||||
Analyze an existing game codebase and provide a structured review.
|
||||
|
||||
## Instructions
|
||||
|
||||
Analyze the game at `$ARGUMENTS` (or the current directory if no path given).
|
||||
|
||||
### Step 1: Identify the game
|
||||
|
||||
- Detect the engine (Three.js, Phaser, or other)
|
||||
- Read `package.json` for dependencies and scripts
|
||||
- Read the main entry point and index.html
|
||||
- Identify the game concept/genre
|
||||
|
||||
### Step 2: Architecture Review
|
||||
|
||||
Check for these required patterns and report compliance:
|
||||
|
||||
- [ ] **EventBus**: Is there a centralized event system? Are modules decoupled?
|
||||
- [ ] **GameState**: Is there a centralized state singleton?
|
||||
- [ ] **Constants**: Are config values centralized or scattered as magic numbers?
|
||||
- [ ] **Orchestrator**: Is there a main Game class that initializes everything?
|
||||
- [ ] **Directory Structure**: Is code organized into core/systems/gameplay/ui/level layers?
|
||||
- [ ] **Event Constants**: Are events defined as named constants or raw strings?
|
||||
|
||||
### Step 3: Performance Review
|
||||
|
||||
Check for common issues:
|
||||
|
||||
- [ ] **Delta time capping**: Is `getDelta()` capped to prevent death spirals?
|
||||
- [ ] **Object pooling**: Are temp objects reused in hot loops?
|
||||
- [ ] **Resource disposal**: Are Three.js geometries/materials/textures disposed?
|
||||
- [ ] **Event cleanup**: Are event listeners cleaned up on scene transitions?
|
||||
- [ ] **Asset loading**: Are assets preloaded with progress feedback?
|
||||
|
||||
### Step 4: Code Quality
|
||||
|
||||
- [ ] **No circular dependencies**: Modules flow one direction
|
||||
- [ ] **Single responsibility**: Each module has one clear job
|
||||
- [ ] **Error handling**: Event handlers wrapped in try/catch
|
||||
- [ ] **Consistent naming**: Events use `domain:action`, files use PascalCase
|
||||
|
||||
### Step 5: Monetization Readiness
|
||||
|
||||
- [ ] **Points system**: Is there a scoring/points mechanism?
|
||||
- [ ] **Session tracking**: Can game sessions be identified?
|
||||
- [ ] **Anti-cheat potential**: Is score validation server-side or at least structured for it?
|
||||
- [ ] **Play.fun integration**: Any existing SDK integration?
|
||||
|
||||
### Output Format
|
||||
|
||||
Provide a structured report with:
|
||||
1. **Game Overview** - What the game is, tech stack, game loop
|
||||
2. **Architecture Score** (out of 6 checks)
|
||||
3. **Performance Score** (out of 5 checks)
|
||||
4. **Code Quality Score** (out of 4 checks)
|
||||
5. **Monetization Readiness** (out of 4 checks)
|
||||
6. **Top Recommendations** - Prioritized list of improvements
|
||||
7. **What's Working Well** - Positive findings
|
||||
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Flappy Bird</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; }
|
||||
#game-container { width: 400px; height: 600px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game-container"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+1985
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "flappy-bird",
|
||||
"version": "1.0.0",
|
||||
"description": "Flappy Bird clone built with Phaser 3",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "npx playwright test",
|
||||
"test:ui": "npx playwright test --ui",
|
||||
"test:headed": "npx playwright test --headed",
|
||||
"test:update-snapshots": "npx playwright test --update-snapshots"
|
||||
},
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@strudel/web": "^1.3.0",
|
||||
"phaser": "^3.90.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.11.0",
|
||||
"@playwright/test": "^1.58.0",
|
||||
"vite": "^7.3.1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { defineConfig, devices } from '@playwright/test';
|
||||
|
||||
export default defineConfig({
|
||||
testDir: './tests',
|
||||
fullyParallel: true,
|
||||
forbidOnly: !!process.env.CI,
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
workers: process.env.CI ? 1 : undefined,
|
||||
reporter: [['html', { open: 'never' }], ['list']],
|
||||
|
||||
use: {
|
||||
baseURL: 'http://localhost:3000',
|
||||
trace: 'on-first-retry',
|
||||
screenshot: 'only-on-failure',
|
||||
video: 'retain-on-failure',
|
||||
},
|
||||
|
||||
expect: {
|
||||
toHaveScreenshot: {
|
||||
maxDiffPixels: 300,
|
||||
threshold: 0.3,
|
||||
},
|
||||
},
|
||||
|
||||
projects: [
|
||||
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
|
||||
],
|
||||
|
||||
webServer: {
|
||||
command: 'npm run dev',
|
||||
url: 'http://localhost:3000',
|
||||
reuseExistingServer: !process.env.CI,
|
||||
timeout: 30000,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,42 @@
|
||||
// Wires EventBus game events to AudioManager playback
|
||||
import { eventBus, Events } from '../core/EventBus.js';
|
||||
import { audioManager } from './AudioManager.js';
|
||||
import { menuTheme, gameplayBGM, gameOverTheme } from './music.js';
|
||||
import { flapSfx, scoreSfx, deathSfx, buttonClickSfx } from './sfx.js';
|
||||
|
||||
export function initAudioBridge() {
|
||||
// Init audio on first user interaction
|
||||
eventBus.on(Events.AUDIO_INIT, () => {
|
||||
audioManager.init();
|
||||
});
|
||||
|
||||
// Music transitions
|
||||
eventBus.on(Events.MUSIC_MENU, () => {
|
||||
audioManager.playBGM(menuTheme);
|
||||
});
|
||||
|
||||
eventBus.on(Events.MUSIC_GAMEPLAY, () => {
|
||||
audioManager.playBGM(gameplayBGM);
|
||||
});
|
||||
|
||||
eventBus.on(Events.MUSIC_GAMEOVER, () => {
|
||||
audioManager.playBGM(gameOverTheme);
|
||||
});
|
||||
|
||||
eventBus.on(Events.MUSIC_STOP, () => {
|
||||
audioManager.stopBGM();
|
||||
});
|
||||
|
||||
// SFX wired to game events
|
||||
eventBus.on(Events.BIRD_FLAP, () => {
|
||||
audioManager.playSFX(flapSfx);
|
||||
});
|
||||
|
||||
eventBus.on(Events.SCORE_CHANGED, () => {
|
||||
audioManager.playSFX(scoreSfx);
|
||||
});
|
||||
|
||||
eventBus.on(Events.BIRD_DIED, () => {
|
||||
audioManager.playSFX(deathSfx);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import { initStrudel, hush } from '@strudel/web';
|
||||
|
||||
class AudioManager {
|
||||
constructor() {
|
||||
this.initialized = false;
|
||||
this.muted = false;
|
||||
this.currentBGM = null;
|
||||
}
|
||||
|
||||
init() {
|
||||
if (this.initialized) return;
|
||||
try {
|
||||
initStrudel();
|
||||
this.initialized = true;
|
||||
console.log('[Audio] Strudel initialized');
|
||||
} catch (e) {
|
||||
console.warn('[Audio] Strudel init failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
playBGM(patternFn) {
|
||||
if (!this.initialized || this.muted) return;
|
||||
// Stop any existing patterns first
|
||||
try { hush(); } catch (e) { /* noop */ }
|
||||
this.currentBGM = null;
|
||||
// Give Strudel's scheduler a tick to process the hush
|
||||
setTimeout(() => {
|
||||
try {
|
||||
this.currentBGM = patternFn();
|
||||
console.log('[Audio] BGM started');
|
||||
} catch (e) {
|
||||
console.warn('[Audio] BGM error:', e);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
stopBGM() {
|
||||
if (!this.initialized) return;
|
||||
try { hush(); } catch (e) { /* noop */ }
|
||||
this.currentBGM = null;
|
||||
}
|
||||
|
||||
playSFX(patternFn) {
|
||||
if (!this.initialized || this.muted) return;
|
||||
try {
|
||||
patternFn();
|
||||
} catch (e) {
|
||||
console.warn('[Audio] SFX error:', e);
|
||||
}
|
||||
}
|
||||
|
||||
toggleMute() {
|
||||
this.muted = !this.muted;
|
||||
if (this.muted) {
|
||||
this.stopBGM();
|
||||
}
|
||||
return this.muted;
|
||||
}
|
||||
}
|
||||
|
||||
export const audioManager = new AudioManager();
|
||||
@@ -0,0 +1,76 @@
|
||||
import { stack, note, s } from '@strudel/web';
|
||||
|
||||
// Background music patterns for Flappy Bird
|
||||
// Style: chiptune / retro 8-bit
|
||||
|
||||
export function menuTheme() {
|
||||
return stack(
|
||||
// Chiptune melody — bouncy square wave
|
||||
note("c4 e4 g4 e4 f4 a4 g4 e4")
|
||||
.s("square")
|
||||
.gain(0.2)
|
||||
.lpf(2000)
|
||||
.decay(0.12)
|
||||
.sustain(0.2),
|
||||
// Bass — triangle pulse
|
||||
note("c2 c3 g2 g3 f2 f3 c2 c3")
|
||||
.s("triangle")
|
||||
.gain(0.25)
|
||||
.lpf(600),
|
||||
// Light hi-hat groove
|
||||
s("~ hh ~ hh, ~ ~ bd ~")
|
||||
.gain(0.25)
|
||||
).cpm(100).play();
|
||||
}
|
||||
|
||||
export function gameplayBGM() {
|
||||
return stack(
|
||||
// Lead melody — square wave, upbeat 8-bit
|
||||
note("e4 g4 a4 g4 e4 d4 e4 c4")
|
||||
.s("square")
|
||||
.gain(0.22)
|
||||
.lpf(2200)
|
||||
.decay(0.1)
|
||||
.sustain(0.25),
|
||||
// Counter melody — higher register, sparse
|
||||
note("~ c5 ~ ~ ~ e5 ~ ~")
|
||||
.s("square")
|
||||
.gain(0.1)
|
||||
.lpf(3000)
|
||||
.decay(0.15)
|
||||
.sustain(0),
|
||||
// Bass — triangle, driving
|
||||
note("c2 c2 g2 g2 a2 a2 g2 g2")
|
||||
.s("triangle")
|
||||
.gain(0.3)
|
||||
.lpf(500),
|
||||
// Drums — tight kit
|
||||
s("bd ~ sd ~, hh*8")
|
||||
.gain(0.35),
|
||||
// Arp shimmer
|
||||
note("c3 e3 g3 c4")
|
||||
.s("square")
|
||||
.fast(4)
|
||||
.gain(0.07)
|
||||
.lpf(1000)
|
||||
.decay(0.06)
|
||||
.sustain(0)
|
||||
).cpm(130).play();
|
||||
}
|
||||
|
||||
export function gameOverTheme() {
|
||||
return stack(
|
||||
// Descending melody — somber square
|
||||
note("e4 d4 c4 b3 a3 ~ ~ ~")
|
||||
.s("square")
|
||||
.gain(0.2)
|
||||
.decay(0.3)
|
||||
.sustain(0.1)
|
||||
.lpf(1500),
|
||||
// Low bass
|
||||
note("a2 ~ ~ ~ c3 ~ ~ ~")
|
||||
.s("triangle")
|
||||
.gain(0.2)
|
||||
.lpf(400)
|
||||
).slow(2).cpm(60).play();
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { note, s } from '@strudel/web';
|
||||
|
||||
// Sound effects for Flappy Bird
|
||||
// Style: chiptune / retro 8-bit, short envelopes
|
||||
|
||||
export function flapSfx() {
|
||||
note("c4").s("square")
|
||||
.penv(8).pdecay(0.1)
|
||||
.decay(0.1).sustain(0).gain(0.2)
|
||||
.lpf(3000).play();
|
||||
}
|
||||
|
||||
export function scoreSfx() {
|
||||
note("e5 b5").s("square")
|
||||
.fast(6).decay(0.1).sustain(0).gain(0.3)
|
||||
.lpf(4000).play();
|
||||
}
|
||||
|
||||
export function deathSfx() {
|
||||
note("g4 e4 c4 a3").s("square")
|
||||
.fast(3).decay(0.2).sustain(0)
|
||||
.crush(8).gain(0.25).play();
|
||||
}
|
||||
|
||||
export function buttonClickSfx() {
|
||||
note("c5").s("sine")
|
||||
.decay(0.12).sustain(0)
|
||||
.gain(0.2).play();
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
export const GAME_CONFIG = {
|
||||
width: 400,
|
||||
height: 600,
|
||||
gravity: 1200,
|
||||
backgroundColor: 0x4ec0ca,
|
||||
};
|
||||
|
||||
export const BIRD_CONFIG = {
|
||||
x: 100,
|
||||
startY: 300,
|
||||
flapVelocity: -380,
|
||||
maxVelocity: 600,
|
||||
tiltUpAngle: -25,
|
||||
tiltDownAngle: 70,
|
||||
size: 20,
|
||||
color: 0xf5d742,
|
||||
};
|
||||
|
||||
export const PIPE_CONFIG = {
|
||||
speed: 180,
|
||||
spawnInterval: 1600,
|
||||
gapSize: 150,
|
||||
width: 52,
|
||||
minTopHeight: 50,
|
||||
maxTopHeight: 350,
|
||||
color: 0x73bf2e,
|
||||
capColor: 0x5a9a23,
|
||||
capHeight: 20,
|
||||
capExtraWidth: 6,
|
||||
};
|
||||
|
||||
export const GROUND_CONFIG = {
|
||||
height: 80,
|
||||
color: 0xded895,
|
||||
speed: 180,
|
||||
};
|
||||
|
||||
export const SKY_CONFIG = {
|
||||
topColor: 0x4ec0ca,
|
||||
bottomColor: 0xc3e8f0,
|
||||
cloudCount: 5,
|
||||
cloudSpeed: 18,
|
||||
cloudAlpha: 0.55,
|
||||
cloudColors: [0xffffff, 0xf0f4f5, 0xe6eef0],
|
||||
cloudMinY: 30,
|
||||
cloudMaxY: 280,
|
||||
};
|
||||
|
||||
export const PARTICLES_CONFIG = {
|
||||
scoreBurstCount: 8,
|
||||
scoreBurstColor: 0xfce878,
|
||||
scoreBurstSpeed: 70,
|
||||
scoreBurstDuration: 450,
|
||||
flapDustCount: 4,
|
||||
flapDustColor: 0xffffff,
|
||||
flapDustSpeed: 30,
|
||||
flapDustDuration: 300,
|
||||
deathBurstCount: 14,
|
||||
deathBurstColor: 0xffffff,
|
||||
deathBurstSpeed: 100,
|
||||
deathBurstDuration: 500,
|
||||
};
|
||||
|
||||
export const TRANSITION_CONFIG = {
|
||||
fadeDuration: 250,
|
||||
deathSlowMoScale: 0.25,
|
||||
deathSlowMoDuration: 500,
|
||||
};
|
||||
|
||||
export const COLORS = {
|
||||
sky: 0x4ec0ca,
|
||||
ground: 0xded895,
|
||||
groundDark: 0xb8a850,
|
||||
grassGreen: 0x8ec63f,
|
||||
grassDarkGreen: 0x6da52e,
|
||||
pipe: 0x73bf2e,
|
||||
pipeHighlight: 0x8ad432,
|
||||
pipeCap: 0x5a9a23,
|
||||
bird: 0xf5d742,
|
||||
birdBeak: 0xe87d24,
|
||||
birdEye: 0xffffff,
|
||||
birdPupil: 0x000000,
|
||||
birdWing: 0xe8c63a,
|
||||
text: '#ffffff',
|
||||
textStroke: '#000000',
|
||||
scoreText: '#ffffff',
|
||||
scoreFloat: '#ffff00',
|
||||
scoreFloatStroke: '#000000',
|
||||
panelFill: 0xdeb858,
|
||||
panelBorder: 0x846830,
|
||||
panelText: '#5a4020',
|
||||
btnFill: 0x6cbf3b,
|
||||
btnBorder: 0x4a8a28,
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
class EventBus {
|
||||
constructor() {
|
||||
this.listeners = new Map();
|
||||
}
|
||||
|
||||
on(event, callback) {
|
||||
if (!this.listeners.has(event)) this.listeners.set(event, new Set());
|
||||
this.listeners.get(event).add(callback);
|
||||
return () => this.off(event, callback);
|
||||
}
|
||||
|
||||
emit(event, data) {
|
||||
const cbs = this.listeners.get(event);
|
||||
if (cbs) cbs.forEach(cb => {
|
||||
try { cb(data); } catch (e) { console.error(`EventBus error [${event}]:`, e); }
|
||||
});
|
||||
}
|
||||
|
||||
off(event, callback) {
|
||||
const cbs = this.listeners.get(event);
|
||||
if (cbs) {
|
||||
cbs.delete(callback);
|
||||
if (cbs.size === 0) this.listeners.delete(event);
|
||||
}
|
||||
}
|
||||
|
||||
clear(event) {
|
||||
event ? this.listeners.delete(event) : this.listeners.clear();
|
||||
}
|
||||
}
|
||||
|
||||
export const eventBus = new EventBus();
|
||||
|
||||
export const Events = {
|
||||
BIRD_FLAP: 'bird:flap',
|
||||
BIRD_DIED: 'bird:died',
|
||||
BIRD_PASSED_PIPE: 'bird:passedPipe',
|
||||
SCORE_CHANGED: 'score:changed',
|
||||
GAME_START: 'game:start',
|
||||
GAME_OVER: 'game:over',
|
||||
GAME_RESTART: 'game:restart',
|
||||
// Visual events
|
||||
PARTICLES_SCORE: 'particles:score',
|
||||
PARTICLES_FLAP: 'particles:flap',
|
||||
PARTICLES_DEATH: 'particles:death',
|
||||
// Audio events
|
||||
AUDIO_INIT: 'audio:init',
|
||||
MUSIC_MENU: 'audio:music:menu',
|
||||
MUSIC_GAMEPLAY: 'audio:music:gameplay',
|
||||
MUSIC_GAMEOVER: 'audio:music:gameover',
|
||||
MUSIC_STOP: 'audio:music:stop',
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
import Phaser from 'phaser';
|
||||
import { GAME_CONFIG } from './Constants.js';
|
||||
import BootScene from '../scenes/BootScene.js';
|
||||
import MenuScene from '../scenes/MenuScene.js';
|
||||
import GameScene from '../scenes/GameScene.js';
|
||||
import UIScene from '../scenes/UIScene.js';
|
||||
import GameOverScene from '../scenes/GameOverScene.js';
|
||||
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: GAME_CONFIG.width,
|
||||
height: GAME_CONFIG.height,
|
||||
parent: 'game-container',
|
||||
backgroundColor: GAME_CONFIG.backgroundColor,
|
||||
physics: {
|
||||
default: 'arcade',
|
||||
arcade: {
|
||||
gravity: { y: GAME_CONFIG.gravity },
|
||||
debug: false,
|
||||
},
|
||||
},
|
||||
scene: [BootScene, MenuScene, GameScene, UIScene, GameOverScene],
|
||||
scale: {
|
||||
mode: Phaser.Scale.FIT,
|
||||
autoCenter: Phaser.Scale.CENTER_BOTH,
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,23 @@
|
||||
import { BIRD_CONFIG } from './Constants.js';
|
||||
|
||||
class GameState {
|
||||
constructor() {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.score = 0;
|
||||
this.bestScore = this.bestScore || 0;
|
||||
this.started = false;
|
||||
this.gameOver = false;
|
||||
}
|
||||
|
||||
addScore() {
|
||||
this.score += 1;
|
||||
if (this.score > this.bestScore) {
|
||||
this.bestScore = this.score;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const gameState = new GameState();
|
||||
@@ -0,0 +1,98 @@
|
||||
import Phaser from 'phaser';
|
||||
import { BIRD_CONFIG, COLORS } from '../core/Constants.js';
|
||||
import { eventBus, Events } from '../core/EventBus.js';
|
||||
|
||||
export default class Bird extends Phaser.GameObjects.Container {
|
||||
constructor(scene, x, y) {
|
||||
super(scene, x, y);
|
||||
|
||||
this.createGraphics();
|
||||
|
||||
scene.add.existing(this);
|
||||
scene.physics.add.existing(this);
|
||||
|
||||
this.body.setSize(BIRD_CONFIG.size * 2, BIRD_CONFIG.size * 1.6);
|
||||
this.body.setOffset(-BIRD_CONFIG.size, -BIRD_CONFIG.size * 0.8);
|
||||
this.body.setMaxVelocity(0, BIRD_CONFIG.maxVelocity);
|
||||
this.body.allowGravity = false;
|
||||
|
||||
this.alive = true;
|
||||
this.wingTimer = 0;
|
||||
this.wingUp = true;
|
||||
}
|
||||
|
||||
createGraphics() {
|
||||
const s = BIRD_CONFIG.size;
|
||||
|
||||
// Body
|
||||
this.bodyGfx = this.scene.add.graphics();
|
||||
this.bodyGfx.fillStyle(COLORS.bird, 1);
|
||||
this.bodyGfx.fillEllipse(0, 0, s * 2, s * 1.6);
|
||||
this.add(this.bodyGfx);
|
||||
|
||||
// Wing
|
||||
this.wingGfx = this.scene.add.graphics();
|
||||
this.wingGfx.fillStyle(COLORS.birdWing, 1);
|
||||
this.wingGfx.fillEllipse(-2, 2, s * 1.0, s * 0.7);
|
||||
this.add(this.wingGfx);
|
||||
|
||||
// Eye
|
||||
const eyeGfx = this.scene.add.graphics();
|
||||
eyeGfx.fillStyle(COLORS.birdEye, 1);
|
||||
eyeGfx.fillCircle(s * 0.4, -s * 0.2, s * 0.3);
|
||||
eyeGfx.fillStyle(COLORS.birdPupil, 1);
|
||||
eyeGfx.fillCircle(s * 0.5, -s * 0.2, s * 0.15);
|
||||
this.add(eyeGfx);
|
||||
|
||||
// Beak
|
||||
const beakGfx = this.scene.add.graphics();
|
||||
beakGfx.fillStyle(COLORS.birdBeak, 1);
|
||||
beakGfx.fillTriangle(s * 0.6, 0, s * 1.2, s * 0.15, s * 0.6, s * 0.3);
|
||||
this.add(beakGfx);
|
||||
}
|
||||
|
||||
enableGravity() {
|
||||
this.body.allowGravity = true;
|
||||
}
|
||||
|
||||
flap() {
|
||||
if (!this.alive) return;
|
||||
this.body.setVelocityY(BIRD_CONFIG.flapVelocity);
|
||||
eventBus.emit(Events.BIRD_FLAP);
|
||||
}
|
||||
|
||||
die() {
|
||||
this.alive = false;
|
||||
}
|
||||
|
||||
update(time, delta) {
|
||||
if (!this.alive) {
|
||||
this.angle = BIRD_CONFIG.tiltDownAngle;
|
||||
return;
|
||||
}
|
||||
|
||||
// Tilt based on velocity
|
||||
const vy = this.body.velocity.y;
|
||||
if (vy <= 0) {
|
||||
this.angle = BIRD_CONFIG.tiltUpAngle;
|
||||
} else {
|
||||
const tilt = Phaser.Math.Clamp(
|
||||
(vy / BIRD_CONFIG.maxVelocity) * BIRD_CONFIG.tiltDownAngle,
|
||||
0,
|
||||
BIRD_CONFIG.tiltDownAngle
|
||||
);
|
||||
this.angle = tilt;
|
||||
}
|
||||
|
||||
// Wing flap animation
|
||||
this.wingTimer += delta;
|
||||
if (this.wingTimer > 120) {
|
||||
this.wingTimer = 0;
|
||||
this.wingUp = !this.wingUp;
|
||||
this.wingGfx.clear();
|
||||
this.wingGfx.fillStyle(COLORS.birdWing, 1);
|
||||
const yOff = this.wingUp ? -2 : 4;
|
||||
this.wingGfx.fillEllipse(-2, yOff, BIRD_CONFIG.size * 1.0, BIRD_CONFIG.size * 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
import Phaser from 'phaser';
|
||||
import { PIPE_CONFIG, GAME_CONFIG, GROUND_CONFIG, COLORS } from '../core/Constants.js';
|
||||
|
||||
export default class Pipe extends Phaser.GameObjects.Container {
|
||||
constructor(scene, x) {
|
||||
super(scene, x, 0);
|
||||
|
||||
this.scored = false;
|
||||
|
||||
const playableHeight = GAME_CONFIG.height - GROUND_CONFIG.height;
|
||||
const gapY = Phaser.Math.Between(
|
||||
PIPE_CONFIG.minTopHeight + PIPE_CONFIG.gapSize / 2,
|
||||
playableHeight - PIPE_CONFIG.minTopHeight - PIPE_CONFIG.gapSize / 2
|
||||
);
|
||||
|
||||
const topPipeHeight = gapY - PIPE_CONFIG.gapSize / 2;
|
||||
const bottomPipeY = gapY + PIPE_CONFIG.gapSize / 2;
|
||||
const bottomPipeHeight = playableHeight - bottomPipeY;
|
||||
|
||||
// Top pipe
|
||||
this.topPipe = this.createPipeGraphics(topPipeHeight, true);
|
||||
this.topPipe.setPosition(0, topPipeHeight / 2);
|
||||
this.add(this.topPipe);
|
||||
|
||||
// Bottom pipe
|
||||
this.bottomPipe = this.createPipeGraphics(bottomPipeHeight, false);
|
||||
this.bottomPipe.setPosition(0, bottomPipeY + bottomPipeHeight / 2);
|
||||
this.add(this.bottomPipe);
|
||||
|
||||
scene.add.existing(this);
|
||||
scene.physics.add.existing(this);
|
||||
|
||||
this.body.allowGravity = false;
|
||||
this.body.setVelocityX(-PIPE_CONFIG.speed);
|
||||
this.body.setImmovable(true);
|
||||
|
||||
// Physics bodies for individual pipes (for collision)
|
||||
this.topZone = scene.add.zone(x, topPipeHeight / 2, PIPE_CONFIG.width, topPipeHeight);
|
||||
scene.physics.add.existing(this.topZone, true);
|
||||
|
||||
this.bottomZone = scene.add.zone(x, bottomPipeY + bottomPipeHeight / 2, PIPE_CONFIG.width, bottomPipeHeight);
|
||||
scene.physics.add.existing(this.bottomZone, true);
|
||||
|
||||
this.scoreZone = scene.add.zone(x + PIPE_CONFIG.width / 2, gapY, 4, PIPE_CONFIG.gapSize);
|
||||
scene.physics.add.existing(this.scoreZone, true);
|
||||
}
|
||||
|
||||
createPipeGraphics(height, isTop) {
|
||||
const gfx = this.scene.add.graphics();
|
||||
const w = PIPE_CONFIG.width;
|
||||
const capH = PIPE_CONFIG.capHeight;
|
||||
const capExtra = PIPE_CONFIG.capExtraWidth;
|
||||
|
||||
// Pipe body
|
||||
gfx.fillStyle(COLORS.pipe, 1);
|
||||
gfx.fillRect(-w / 2, -height / 2, w, height);
|
||||
|
||||
// Pipe cap
|
||||
gfx.fillStyle(COLORS.pipeCap, 1);
|
||||
if (isTop) {
|
||||
gfx.fillRect(-w / 2 - capExtra / 2, height / 2 - capH, w + capExtra, capH);
|
||||
} else {
|
||||
gfx.fillRect(-w / 2 - capExtra / 2, -height / 2, w + capExtra, capH);
|
||||
}
|
||||
|
||||
// Highlight
|
||||
gfx.fillStyle(COLORS.pipeHighlight, 0.4);
|
||||
gfx.fillRect(-w / 2 + 4, -height / 2, 8, height);
|
||||
|
||||
return gfx;
|
||||
}
|
||||
|
||||
update() {
|
||||
// Move collision zones along with the container
|
||||
this.topZone.x = this.x;
|
||||
this.bottomZone.x = this.x;
|
||||
this.scoreZone.x = this.x + PIPE_CONFIG.width / 2;
|
||||
}
|
||||
|
||||
isOffScreen() {
|
||||
return this.x < -PIPE_CONFIG.width;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.topZone.destroy();
|
||||
this.bottomZone.destroy();
|
||||
this.scoreZone.destroy();
|
||||
super.destroy();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import Phaser from 'phaser';
|
||||
import config from './core/GameConfig.js';
|
||||
import { gameState } from './core/GameState.js';
|
||||
import { eventBus, Events } from './core/EventBus.js';
|
||||
import { initAudioBridge } from './audio/AudioBridge.js';
|
||||
|
||||
// Wire audio events before game starts
|
||||
initAudioBridge();
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
// Expose for Playwright QA
|
||||
window.__GAME__ = game;
|
||||
window.__GAME_STATE__ = gameState;
|
||||
window.__EVENT_BUS__ = eventBus;
|
||||
window.__EVENTS__ = Events;
|
||||
@@ -0,0 +1,12 @@
|
||||
import Phaser from 'phaser';
|
||||
|
||||
export default class BootScene extends Phaser.Scene {
|
||||
constructor() {
|
||||
super('BootScene');
|
||||
}
|
||||
|
||||
create() {
|
||||
// No external assets to load - using procedural graphics
|
||||
this.scene.start('MenuScene');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
import Phaser from 'phaser';
|
||||
import { GAME_CONFIG, COLORS, TRANSITION_CONFIG } from '../core/Constants.js';
|
||||
import { gameState } from '../core/GameState.js';
|
||||
import { eventBus, Events } from '../core/EventBus.js';
|
||||
import Background from '../systems/Background.js';
|
||||
|
||||
export default class GameOverScene extends Phaser.Scene {
|
||||
constructor() {
|
||||
super('GameOverScene');
|
||||
}
|
||||
|
||||
create() {
|
||||
const centerX = GAME_CONFIG.width / 2;
|
||||
const centerY = GAME_CONFIG.height / 2;
|
||||
|
||||
// Fade in
|
||||
this.cameras.main.fadeIn(TRANSITION_CONFIG.fadeDuration, 0, 0, 0);
|
||||
|
||||
// Play game over theme
|
||||
eventBus.emit(Events.MUSIC_GAMEOVER);
|
||||
|
||||
// Background (gradient sky + clouds + ground with grass)
|
||||
this.background = new Background(this);
|
||||
this.background.create();
|
||||
|
||||
// Score panel background
|
||||
const panel = this.add.graphics().setDepth(20);
|
||||
panel.fillStyle(COLORS.panelFill, 1);
|
||||
panel.fillRoundedRect(centerX - 110, centerY - 90, 220, 160, 12);
|
||||
panel.lineStyle(3, COLORS.panelBorder, 1);
|
||||
panel.strokeRoundedRect(centerX - 110, centerY - 90, 220, 160, 12);
|
||||
|
||||
// Game Over text
|
||||
this.add.text(centerX, centerY - 140, 'GAME OVER', {
|
||||
fontSize: '40px',
|
||||
fontFamily: 'Arial Black, Arial',
|
||||
color: COLORS.scoreText,
|
||||
stroke: COLORS.textStroke,
|
||||
strokeThickness: 5,
|
||||
}).setOrigin(0.5).setDepth(20);
|
||||
|
||||
// Score
|
||||
this.add.text(centerX - 80, centerY - 60, 'SCORE', {
|
||||
fontSize: '18px',
|
||||
fontFamily: 'Arial',
|
||||
color: COLORS.panelText,
|
||||
}).setDepth(20);
|
||||
|
||||
this.add.text(centerX + 80, centerY - 60, gameState.score.toString(), {
|
||||
fontSize: '24px',
|
||||
fontFamily: 'Arial Black, Arial',
|
||||
color: '#ffffff',
|
||||
stroke: '#000000',
|
||||
strokeThickness: 3,
|
||||
}).setOrigin(1, 0).setDepth(20);
|
||||
|
||||
// Best score
|
||||
this.add.text(centerX - 80, centerY - 10, 'BEST', {
|
||||
fontSize: '18px',
|
||||
fontFamily: 'Arial',
|
||||
color: COLORS.panelText,
|
||||
}).setDepth(20);
|
||||
|
||||
this.add.text(centerX + 80, centerY - 10, gameState.bestScore.toString(), {
|
||||
fontSize: '24px',
|
||||
fontFamily: 'Arial Black, Arial',
|
||||
color: '#ffffff',
|
||||
stroke: '#000000',
|
||||
strokeThickness: 3,
|
||||
}).setOrigin(1, 0).setDepth(20);
|
||||
|
||||
// New badge
|
||||
if (gameState.score === gameState.bestScore && gameState.score > 0) {
|
||||
const newBadge = this.add.text(centerX, centerY - 35, 'NEW!', {
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Arial Black, Arial',
|
||||
color: '#ff3333',
|
||||
stroke: '#000000',
|
||||
strokeThickness: 2,
|
||||
}).setOrigin(0.5).setDepth(20);
|
||||
|
||||
this.tweens.add({
|
||||
targets: newBadge,
|
||||
scaleX: 1.2,
|
||||
scaleY: 1.2,
|
||||
duration: 400,
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
ease: 'Sine.easeInOut',
|
||||
});
|
||||
}
|
||||
|
||||
// Restart button
|
||||
const btnY = centerY + 100;
|
||||
const btn = this.add.graphics().setDepth(20);
|
||||
btn.fillStyle(COLORS.btnFill, 1);
|
||||
btn.fillRoundedRect(centerX - 60, btnY - 20, 120, 40, 8);
|
||||
btn.lineStyle(2, COLORS.btnBorder, 1);
|
||||
btn.strokeRoundedRect(centerX - 60, btnY - 20, 120, 40, 8);
|
||||
|
||||
const btnText = this.add.text(centerX, btnY, 'PLAY', {
|
||||
fontSize: '22px',
|
||||
fontFamily: 'Arial Black, Arial',
|
||||
color: '#ffffff',
|
||||
stroke: '#000000',
|
||||
strokeThickness: 3,
|
||||
}).setOrigin(0.5).setDepth(20);
|
||||
|
||||
// Interactive button with hover/press feel
|
||||
const hitZone = this.add.zone(centerX, btnY, 120, 40).setInteractive({ useHandCursor: true }).setDepth(20);
|
||||
|
||||
hitZone.on('pointerover', () => {
|
||||
this.tweens.add({
|
||||
targets: [btn, btnText],
|
||||
scaleX: 1.08,
|
||||
scaleY: 1.08,
|
||||
duration: 100,
|
||||
ease: 'Quad.easeOut',
|
||||
});
|
||||
});
|
||||
|
||||
hitZone.on('pointerout', () => {
|
||||
this.tweens.add({
|
||||
targets: [btn, btnText],
|
||||
scaleX: 1,
|
||||
scaleY: 1,
|
||||
duration: 100,
|
||||
ease: 'Quad.easeOut',
|
||||
});
|
||||
});
|
||||
|
||||
hitZone.on('pointerdown', () => {
|
||||
this.tweens.add({
|
||||
targets: [btn, btnText],
|
||||
scaleX: 0.95,
|
||||
scaleY: 0.95,
|
||||
duration: 50,
|
||||
});
|
||||
});
|
||||
|
||||
hitZone.on('pointerup', () => {
|
||||
this.restartGame();
|
||||
});
|
||||
|
||||
// Also space to restart
|
||||
this.input.keyboard.on('keydown-SPACE', () => this.restartGame());
|
||||
|
||||
// Slide-in animation for panel
|
||||
panel.setAlpha(0);
|
||||
panel.y = 30;
|
||||
this.tweens.add({
|
||||
targets: panel,
|
||||
alpha: 1,
|
||||
y: 0,
|
||||
duration: 400,
|
||||
delay: 150,
|
||||
ease: 'Back.easeOut',
|
||||
});
|
||||
}
|
||||
|
||||
update(time, delta) {
|
||||
this.background.update(delta);
|
||||
}
|
||||
|
||||
restartGame() {
|
||||
eventBus.emit(Events.MUSIC_STOP);
|
||||
this.cameras.main.fadeOut(TRANSITION_CONFIG.fadeDuration, 0, 0, 0);
|
||||
this.cameras.main.once('camerafadeoutcomplete', () => {
|
||||
this.scene.start('GameScene');
|
||||
});
|
||||
}
|
||||
|
||||
shutdown() {
|
||||
this.background.destroy();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
import Phaser from 'phaser';
|
||||
import { eventBus, Events } from '../core/EventBus.js';
|
||||
import { gameState } from '../core/GameState.js';
|
||||
import { GAME_CONFIG, GROUND_CONFIG, BIRD_CONFIG, COLORS, TRANSITION_CONFIG } from '../core/Constants.js';
|
||||
import Bird from '../entities/Bird.js';
|
||||
import PipeSpawner from '../systems/PipeSpawner.js';
|
||||
import ScoreSystem from '../systems/ScoreSystem.js';
|
||||
import Background from '../systems/Background.js';
|
||||
import Particles from '../systems/Particles.js';
|
||||
|
||||
export default class GameScene extends Phaser.Scene {
|
||||
constructor() {
|
||||
super('GameScene');
|
||||
}
|
||||
|
||||
create() {
|
||||
gameState.reset();
|
||||
this.unsubscribers = [];
|
||||
|
||||
// Fade in
|
||||
this.cameras.main.fadeIn(TRANSITION_CONFIG.fadeDuration, 0, 0, 0);
|
||||
|
||||
// Background (gradient sky + clouds + ground with grass)
|
||||
this.background = new Background(this);
|
||||
this.background.create();
|
||||
|
||||
// Ground physics body
|
||||
const groundY = GAME_CONFIG.height - GROUND_CONFIG.height;
|
||||
this.ground = this.add.zone(GAME_CONFIG.width / 2, groundY + GROUND_CONFIG.height / 2, GAME_CONFIG.width, GROUND_CONFIG.height);
|
||||
this.physics.add.existing(this.ground, true);
|
||||
|
||||
// Bird
|
||||
this.bird = new Bird(this, BIRD_CONFIG.x, BIRD_CONFIG.startY);
|
||||
this.bird.setDepth(5);
|
||||
|
||||
// Pipe spawner
|
||||
this.pipeSpawner = new PipeSpawner(this);
|
||||
|
||||
// Score system
|
||||
this.scoreSystem = new ScoreSystem();
|
||||
this.scoreSystem.start();
|
||||
|
||||
// Particle system
|
||||
this.particles = new Particles(this);
|
||||
this.particles.start();
|
||||
|
||||
// Launch UI overlay
|
||||
this.scene.launch('UIScene');
|
||||
|
||||
// Emit flap dust particles on every flap
|
||||
this.unsubscribers.push(
|
||||
eventBus.on(Events.BIRD_FLAP, () => {
|
||||
eventBus.emit(Events.PARTICLES_FLAP, { x: this.bird.x - 10, y: this.bird.y + 8 });
|
||||
}),
|
||||
);
|
||||
|
||||
// Emit score particles when scoring
|
||||
this.unsubscribers.push(
|
||||
eventBus.on(Events.BIRD_PASSED_PIPE, () => {
|
||||
eventBus.emit(Events.PARTICLES_SCORE, { x: this.bird.x + 20, y: this.bird.y - 10 });
|
||||
}),
|
||||
);
|
||||
|
||||
// Input
|
||||
this.input.on('pointerdown', () => this.handleInput());
|
||||
this.spaceKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
|
||||
|
||||
// Collision check timer
|
||||
this.collisionActive = false;
|
||||
|
||||
// Start with a "get ready" state
|
||||
this.ready = false;
|
||||
this.showGetReady();
|
||||
}
|
||||
|
||||
showGetReady() {
|
||||
const centerX = GAME_CONFIG.width / 2;
|
||||
const centerY = GAME_CONFIG.height / 2 - 50;
|
||||
|
||||
this.getReadyText = this.add.text(centerX, centerY, 'GET READY', {
|
||||
fontSize: '36px',
|
||||
fontFamily: 'Arial Black, Arial',
|
||||
color: COLORS.scoreText,
|
||||
stroke: COLORS.textStroke,
|
||||
strokeThickness: 5,
|
||||
}).setOrigin(0.5).setDepth(20);
|
||||
|
||||
this.tapText = this.add.text(centerX, centerY + 60, 'TAP TO FLAP', {
|
||||
fontSize: '20px',
|
||||
fontFamily: 'Arial',
|
||||
color: COLORS.scoreText,
|
||||
stroke: COLORS.textStroke,
|
||||
strokeThickness: 3,
|
||||
}).setOrigin(0.5).setDepth(20);
|
||||
|
||||
this.tweens.add({
|
||||
targets: this.tapText,
|
||||
alpha: 0.3,
|
||||
duration: 600,
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
});
|
||||
|
||||
// Bob the bird while waiting
|
||||
this.tweens.add({
|
||||
targets: this.bird,
|
||||
y: BIRD_CONFIG.startY - 10,
|
||||
duration: 500,
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
ease: 'Sine.easeInOut',
|
||||
});
|
||||
}
|
||||
|
||||
startPlaying() {
|
||||
this.ready = true;
|
||||
gameState.started = true;
|
||||
|
||||
// Remove get ready text
|
||||
if (this.getReadyText) this.getReadyText.destroy();
|
||||
if (this.tapText) this.tapText.destroy();
|
||||
|
||||
// Stop bob tween
|
||||
this.tweens.killTweensOf(this.bird);
|
||||
|
||||
// Start gameplay music
|
||||
eventBus.emit(Events.MUSIC_GAMEPLAY);
|
||||
|
||||
// Enable bird gravity
|
||||
this.bird.enableGravity();
|
||||
this.bird.flap();
|
||||
|
||||
// Start spawning pipes
|
||||
this.pipeSpawner.start();
|
||||
|
||||
// Enable collisions
|
||||
this.collisionActive = true;
|
||||
}
|
||||
|
||||
handleInput() {
|
||||
if (gameState.gameOver) return;
|
||||
|
||||
if (!this.ready) {
|
||||
this.startPlaying();
|
||||
return;
|
||||
}
|
||||
|
||||
this.bird.flap();
|
||||
}
|
||||
|
||||
update(time, delta) {
|
||||
if (gameState.gameOver) return;
|
||||
|
||||
// Space key
|
||||
if (Phaser.Input.Keyboard.JustDown(this.spaceKey)) {
|
||||
this.handleInput();
|
||||
}
|
||||
|
||||
if (!this.ready) {
|
||||
this.background.update(delta);
|
||||
return;
|
||||
}
|
||||
|
||||
this.bird.update(time, delta);
|
||||
this.pipeSpawner.update();
|
||||
this.background.update(delta);
|
||||
|
||||
// Check collisions
|
||||
if (this.collisionActive) {
|
||||
this.checkCollisions();
|
||||
}
|
||||
|
||||
// Check if bird fell below ground
|
||||
const groundY = GAME_CONFIG.height - GROUND_CONFIG.height;
|
||||
if (this.bird.y >= groundY - BIRD_CONFIG.size) {
|
||||
this.bird.y = groundY - BIRD_CONFIG.size;
|
||||
this.handleGameOver();
|
||||
}
|
||||
|
||||
// Check if bird flew too high
|
||||
if (this.bird.y < -BIRD_CONFIG.size * 2) {
|
||||
this.handleGameOver();
|
||||
}
|
||||
}
|
||||
|
||||
checkCollisions() {
|
||||
const birdBounds = this.bird.body;
|
||||
const birdLeft = this.bird.x + birdBounds.offset.x;
|
||||
const birdRight = birdLeft + birdBounds.width;
|
||||
const birdTop = this.bird.y + birdBounds.offset.y;
|
||||
const birdBottom = birdTop + birdBounds.height;
|
||||
|
||||
for (const pipe of this.pipeSpawner.pipes) {
|
||||
// Check score zone
|
||||
if (!pipe.scored) {
|
||||
const sz = pipe.scoreZone;
|
||||
if (birdLeft > sz.x) {
|
||||
pipe.scored = true;
|
||||
eventBus.emit(Events.BIRD_PASSED_PIPE);
|
||||
}
|
||||
}
|
||||
|
||||
// Check pipe collision (top)
|
||||
const tz = pipe.topZone;
|
||||
if (this.rectsOverlap(birdLeft, birdTop, birdRight, birdBottom,
|
||||
tz.x - tz.width / 2, tz.y - tz.height / 2, tz.x + tz.width / 2, tz.y + tz.height / 2)) {
|
||||
this.handleGameOver();
|
||||
return;
|
||||
}
|
||||
|
||||
// Check pipe collision (bottom)
|
||||
const bz = pipe.bottomZone;
|
||||
if (this.rectsOverlap(birdLeft, birdTop, birdRight, birdBottom,
|
||||
bz.x - bz.width / 2, bz.y - bz.height / 2, bz.x + bz.width / 2, bz.y + bz.height / 2)) {
|
||||
this.handleGameOver();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rectsOverlap(l1, t1, r1, b1, l2, t2, r2, b2) {
|
||||
return l1 < r2 && r1 > l2 && t1 < b2 && b1 > t2;
|
||||
}
|
||||
|
||||
handleGameOver() {
|
||||
if (gameState.gameOver) return;
|
||||
gameState.gameOver = true;
|
||||
|
||||
this.bird.die();
|
||||
this.pipeSpawner.stop();
|
||||
this.collisionActive = false;
|
||||
|
||||
// Death effects
|
||||
this.cameras.main.flash(200, 255, 255, 255);
|
||||
this.cameras.main.shake(300, 0.015);
|
||||
eventBus.emit(Events.PARTICLES_DEATH, { x: this.bird.x, y: this.bird.y });
|
||||
eventBus.emit(Events.BIRD_DIED);
|
||||
eventBus.emit(Events.MUSIC_STOP);
|
||||
|
||||
// Brief slow-mo for dramatic effect
|
||||
this.time.timeScale = TRANSITION_CONFIG.deathSlowMoScale;
|
||||
this.time.delayedCall(TRANSITION_CONFIG.deathSlowMoDuration * TRANSITION_CONFIG.deathSlowMoScale, () => {
|
||||
this.time.timeScale = 1;
|
||||
});
|
||||
|
||||
eventBus.emit(Events.GAME_OVER);
|
||||
|
||||
this.time.delayedCall(800, () => {
|
||||
this.scene.stop('UIScene');
|
||||
// Fade out before transitioning
|
||||
this.cameras.main.fadeOut(TRANSITION_CONFIG.fadeDuration, 0, 0, 0);
|
||||
this.cameras.main.once('camerafadeoutcomplete', () => {
|
||||
this.scene.start('GameOverScene');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
shutdown() {
|
||||
this.unsubscribers.forEach(unsub => unsub());
|
||||
this.pipeSpawner.destroy();
|
||||
this.scoreSystem.destroy();
|
||||
this.particles.destroy();
|
||||
this.background.destroy();
|
||||
eventBus.clear();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import Phaser from 'phaser';
|
||||
import { GAME_CONFIG, COLORS, TRANSITION_CONFIG } from '../core/Constants.js';
|
||||
import { gameState } from '../core/GameState.js';
|
||||
import { eventBus, Events } from '../core/EventBus.js';
|
||||
import Background from '../systems/Background.js';
|
||||
|
||||
export default class MenuScene extends Phaser.Scene {
|
||||
constructor() {
|
||||
super('MenuScene');
|
||||
}
|
||||
|
||||
create() {
|
||||
gameState.reset();
|
||||
|
||||
const centerX = GAME_CONFIG.width / 2;
|
||||
const centerY = GAME_CONFIG.height / 2;
|
||||
|
||||
// Fade in
|
||||
this.cameras.main.fadeIn(TRANSITION_CONFIG.fadeDuration, 0, 0, 0);
|
||||
|
||||
// Background (gradient sky + clouds + ground with grass)
|
||||
this.background = new Background(this);
|
||||
this.background.create();
|
||||
|
||||
// Title
|
||||
this.add.text(centerX, centerY - 120, 'FLAPPY', {
|
||||
fontSize: '52px',
|
||||
fontFamily: 'Arial Black, Arial',
|
||||
color: COLORS.scoreText,
|
||||
stroke: COLORS.textStroke,
|
||||
strokeThickness: 6,
|
||||
}).setOrigin(0.5).setDepth(20);
|
||||
|
||||
this.add.text(centerX, centerY - 65, 'BIRD', {
|
||||
fontSize: '52px',
|
||||
fontFamily: 'Arial Black, Arial',
|
||||
color: COLORS.scoreText,
|
||||
stroke: COLORS.textStroke,
|
||||
strokeThickness: 6,
|
||||
}).setOrigin(0.5).setDepth(20);
|
||||
|
||||
// Bird preview
|
||||
const birdGfx = this.add.graphics().setDepth(20);
|
||||
birdGfx.fillStyle(COLORS.bird, 1);
|
||||
birdGfx.fillEllipse(centerX, centerY + 10, 40, 32);
|
||||
birdGfx.fillStyle(COLORS.birdWing, 1);
|
||||
birdGfx.fillEllipse(centerX - 2, centerY + 12, 20, 14);
|
||||
birdGfx.fillStyle(COLORS.birdEye, 1);
|
||||
birdGfx.fillCircle(centerX + 8, centerY + 6, 6);
|
||||
birdGfx.fillStyle(COLORS.birdPupil, 1);
|
||||
birdGfx.fillCircle(centerX + 10, centerY + 6, 3);
|
||||
birdGfx.fillStyle(COLORS.birdBeak, 1);
|
||||
birdGfx.fillTriangle(centerX + 12, centerY + 10, centerX + 24, centerY + 13, centerX + 12, centerY + 16);
|
||||
|
||||
// Bob animation
|
||||
this.tweens.add({
|
||||
targets: birdGfx,
|
||||
y: -10,
|
||||
duration: 600,
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
ease: 'Sine.easeInOut',
|
||||
});
|
||||
|
||||
// Instructions
|
||||
const tapText = this.add.text(centerX, centerY + 80, 'TAP OR PRESS SPACE', {
|
||||
fontSize: '20px',
|
||||
fontFamily: 'Arial',
|
||||
color: COLORS.scoreText,
|
||||
stroke: COLORS.textStroke,
|
||||
strokeThickness: 4,
|
||||
}).setOrigin(0.5).setDepth(20);
|
||||
|
||||
this.tweens.add({
|
||||
targets: tapText,
|
||||
alpha: 0.3,
|
||||
duration: 800,
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
});
|
||||
|
||||
// Best score
|
||||
if (gameState.bestScore > 0) {
|
||||
this.add.text(centerX, centerY + 130, `BEST: ${gameState.bestScore}`, {
|
||||
fontSize: '18px',
|
||||
fontFamily: 'Arial',
|
||||
color: COLORS.scoreText,
|
||||
stroke: COLORS.textStroke,
|
||||
strokeThickness: 3,
|
||||
}).setOrigin(0.5).setDepth(20);
|
||||
}
|
||||
|
||||
// Input — first tap inits audio + plays menu music, second tap starts game
|
||||
this.audioStarted = false;
|
||||
this.input.on('pointerdown', () => this.handleInput());
|
||||
this.input.keyboard.on('keydown-SPACE', () => this.handleInput());
|
||||
}
|
||||
|
||||
update(time, delta) {
|
||||
this.background.update(delta);
|
||||
}
|
||||
|
||||
handleInput() {
|
||||
if (!this.audioStarted) {
|
||||
// First interaction: init audio and start menu music (browser autoplay policy)
|
||||
this.audioStarted = true;
|
||||
eventBus.emit(Events.AUDIO_INIT);
|
||||
eventBus.emit(Events.MUSIC_MENU);
|
||||
return;
|
||||
}
|
||||
this.startGame();
|
||||
}
|
||||
|
||||
startGame() {
|
||||
eventBus.emit(Events.MUSIC_STOP);
|
||||
this.cameras.main.fadeOut(TRANSITION_CONFIG.fadeDuration, 0, 0, 0);
|
||||
this.cameras.main.once('camerafadeoutcomplete', () => {
|
||||
this.scene.start('GameScene');
|
||||
});
|
||||
}
|
||||
|
||||
shutdown() {
|
||||
this.background.destroy();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import Phaser from 'phaser';
|
||||
import { eventBus, Events } from '../core/EventBus.js';
|
||||
import { gameState } from '../core/GameState.js';
|
||||
import { GAME_CONFIG, COLORS } from '../core/Constants.js';
|
||||
|
||||
export default class UIScene extends Phaser.Scene {
|
||||
constructor() {
|
||||
super('UIScene');
|
||||
}
|
||||
|
||||
create() {
|
||||
const centerX = GAME_CONFIG.width / 2;
|
||||
|
||||
this.scoreText = this.add.text(centerX, 50, '0', {
|
||||
fontSize: '48px',
|
||||
fontFamily: 'Arial Black, Arial',
|
||||
color: COLORS.scoreText,
|
||||
stroke: COLORS.textStroke,
|
||||
strokeThickness: 6,
|
||||
}).setOrigin(0.5).setDepth(100);
|
||||
|
||||
this.unsubscribers = [
|
||||
eventBus.on(Events.SCORE_CHANGED, ({ score }) => {
|
||||
this.scoreText.setText(score.toString());
|
||||
|
||||
// Pop animation
|
||||
this.tweens.add({
|
||||
targets: this.scoreText,
|
||||
scaleX: 1.4,
|
||||
scaleY: 1.4,
|
||||
duration: 80,
|
||||
yoyo: true,
|
||||
ease: 'Quad.easeOut',
|
||||
});
|
||||
|
||||
// Floating "+1" text
|
||||
const floater = this.add.text(centerX + 40, 40, '+1', {
|
||||
fontSize: '22px',
|
||||
fontFamily: 'Arial Black, Arial',
|
||||
color: COLORS.scoreFloat,
|
||||
stroke: COLORS.scoreFloatStroke,
|
||||
strokeThickness: 3,
|
||||
}).setOrigin(0.5).setDepth(100);
|
||||
|
||||
this.tweens.add({
|
||||
targets: floater,
|
||||
y: floater.y - 40,
|
||||
alpha: 0,
|
||||
duration: 600,
|
||||
ease: 'Quad.easeOut',
|
||||
onComplete: () => floater.destroy(),
|
||||
});
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
shutdown() {
|
||||
this.unsubscribers.forEach(unsub => unsub());
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import Phaser from 'phaser';
|
||||
import { GAME_CONFIG, GROUND_CONFIG, SKY_CONFIG, COLORS } from '../core/Constants.js';
|
||||
|
||||
/**
|
||||
* Draws a vertical sky gradient with parallax scrolling clouds
|
||||
* and detailed ground with grass tufts.
|
||||
* Reusable across scenes — call create() in scene.create(), update() in scene.update().
|
||||
*/
|
||||
export default class Background {
|
||||
constructor(scene) {
|
||||
this.scene = scene;
|
||||
this.clouds = [];
|
||||
}
|
||||
|
||||
create() {
|
||||
const { width, height } = GAME_CONFIG;
|
||||
const groundY = height - GROUND_CONFIG.height;
|
||||
|
||||
// Sky gradient
|
||||
this.skyGfx = this.scene.add.graphics().setDepth(0);
|
||||
const topR = (SKY_CONFIG.topColor >> 16) & 0xff;
|
||||
const topG = (SKY_CONFIG.topColor >> 8) & 0xff;
|
||||
const topB = SKY_CONFIG.topColor & 0xff;
|
||||
const botR = (SKY_CONFIG.bottomColor >> 16) & 0xff;
|
||||
const botG = (SKY_CONFIG.bottomColor >> 8) & 0xff;
|
||||
const botB = SKY_CONFIG.bottomColor & 0xff;
|
||||
|
||||
for (let y = 0; y < groundY; y++) {
|
||||
const t = y / groundY;
|
||||
const r = Math.round(topR + (botR - topR) * t);
|
||||
const g = Math.round(topG + (botG - topG) * t);
|
||||
const b = Math.round(topB + (botB - topB) * t);
|
||||
this.skyGfx.fillStyle(Phaser.Display.Color.GetColor(r, g, b), 1);
|
||||
this.skyGfx.fillRect(0, y, width, 1);
|
||||
}
|
||||
|
||||
// Clouds
|
||||
for (let i = 0; i < SKY_CONFIG.cloudCount; i++) {
|
||||
const x = Phaser.Math.Between(0, width);
|
||||
const y = Phaser.Math.Between(SKY_CONFIG.cloudMinY, SKY_CONFIG.cloudMaxY);
|
||||
const scale = 0.5 + Math.random() * 0.7;
|
||||
this.clouds.push(this.createCloud(x, y, scale));
|
||||
}
|
||||
|
||||
// Ground with detail
|
||||
this.drawGround(groundY);
|
||||
}
|
||||
|
||||
createCloud(x, y, scale) {
|
||||
const gfx = this.scene.add.graphics().setDepth(1);
|
||||
const color = Phaser.Utils.Array.GetRandom(SKY_CONFIG.cloudColors);
|
||||
const alpha = SKY_CONFIG.cloudAlpha * (0.6 + scale * 0.4);
|
||||
|
||||
gfx.fillStyle(color, alpha);
|
||||
gfx.fillEllipse(0, 0, 60 * scale, 26 * scale);
|
||||
gfx.fillEllipse(22 * scale, -4 * scale, 48 * scale, 22 * scale);
|
||||
gfx.fillEllipse(-18 * scale, 4 * scale, 38 * scale, 18 * scale);
|
||||
gfx.fillEllipse(10 * scale, 6 * scale, 32 * scale, 16 * scale);
|
||||
|
||||
gfx.setPosition(x, y);
|
||||
|
||||
return { gfx, speed: SKY_CONFIG.cloudSpeed * scale, scale };
|
||||
}
|
||||
|
||||
drawGround(groundY) {
|
||||
const { width } = GAME_CONFIG;
|
||||
|
||||
this.groundGfx = this.scene.add.graphics().setDepth(10);
|
||||
|
||||
// Main ground fill
|
||||
this.groundGfx.fillStyle(COLORS.ground, 1);
|
||||
this.groundGfx.fillRect(0, groundY, width, GROUND_CONFIG.height);
|
||||
|
||||
// Grass tufts along top edge
|
||||
this.groundGfx.fillStyle(COLORS.grassGreen, 1);
|
||||
for (let x = 0; x < width; x += 10) {
|
||||
const h = 4 + Math.random() * 7;
|
||||
this.groundGfx.fillTriangle(x, groundY, x + 5, groundY - h, x + 10, groundY);
|
||||
}
|
||||
|
||||
// Darker grass accents
|
||||
this.groundGfx.fillStyle(COLORS.grassDarkGreen, 0.5);
|
||||
for (let x = 5; x < width; x += 20) {
|
||||
const h = 3 + Math.random() * 5;
|
||||
this.groundGfx.fillTriangle(x, groundY, x + 3, groundY - h, x + 6, groundY);
|
||||
}
|
||||
|
||||
// Ground top edge line
|
||||
this.groundGfx.lineStyle(2, COLORS.groundDark, 1);
|
||||
this.groundGfx.lineBetween(0, groundY, width, groundY);
|
||||
|
||||
// Subtle dirt texture lines
|
||||
this.groundGfx.lineStyle(1, COLORS.groundDark, 0.3);
|
||||
for (let y = groundY + 15; y < GAME_CONFIG.height; y += 12) {
|
||||
const startX = Math.random() * 40;
|
||||
this.groundGfx.lineBetween(startX, y, startX + 30 + Math.random() * 60, y);
|
||||
}
|
||||
}
|
||||
|
||||
update(delta) {
|
||||
const { width } = GAME_CONFIG;
|
||||
for (const cloud of this.clouds) {
|
||||
cloud.gfx.x -= cloud.speed * (delta / 1000);
|
||||
if (cloud.gfx.x < -80 * cloud.scale) {
|
||||
cloud.gfx.x = width + 80 * cloud.scale;
|
||||
cloud.gfx.y = Phaser.Math.Between(SKY_CONFIG.cloudMinY, SKY_CONFIG.cloudMaxY);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.clouds.forEach(c => c.gfx.destroy());
|
||||
this.clouds = [];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import Phaser from 'phaser';
|
||||
import { eventBus, Events } from '../core/EventBus.js';
|
||||
import { PARTICLES_CONFIG } from '../core/Constants.js';
|
||||
|
||||
/**
|
||||
* Tween-based particle system. Listens for particle events on EventBus
|
||||
* and creates burst effects at the given position.
|
||||
* Initialize in a scene's create() and call destroy() in shutdown().
|
||||
*/
|
||||
export default class Particles {
|
||||
constructor(scene) {
|
||||
this.scene = scene;
|
||||
this.unsubs = [];
|
||||
}
|
||||
|
||||
start() {
|
||||
this.unsubs.push(
|
||||
eventBus.on(Events.PARTICLES_SCORE, ({ x, y }) => this.scoreBurst(x, y)),
|
||||
eventBus.on(Events.PARTICLES_FLAP, ({ x, y }) => this.flapDust(x, y)),
|
||||
eventBus.on(Events.PARTICLES_DEATH, ({ x, y }) => this.deathBurst(x, y)),
|
||||
);
|
||||
}
|
||||
|
||||
scoreBurst(x, y) {
|
||||
const cfg = PARTICLES_CONFIG;
|
||||
for (let i = 0; i < cfg.scoreBurstCount; i++) {
|
||||
const angle = (Math.PI * 2 * i) / cfg.scoreBurstCount + (Math.random() - 0.5) * 0.4;
|
||||
const speed = cfg.scoreBurstSpeed * (0.6 + Math.random() * 0.4);
|
||||
const size = 2 + Math.random() * 3;
|
||||
const particle = this.scene.add.circle(x, y, size, cfg.scoreBurstColor, 1).setDepth(15);
|
||||
|
||||
this.scene.tweens.add({
|
||||
targets: particle,
|
||||
x: x + Math.cos(angle) * speed,
|
||||
y: y + Math.sin(angle) * speed - 20,
|
||||
alpha: 0,
|
||||
scale: 0.2,
|
||||
duration: cfg.scoreBurstDuration + Math.random() * 150,
|
||||
ease: 'Quad.easeOut',
|
||||
onComplete: () => particle.destroy(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
flapDust(x, y) {
|
||||
const cfg = PARTICLES_CONFIG;
|
||||
for (let i = 0; i < cfg.flapDustCount; i++) {
|
||||
const angle = Math.PI * 0.5 + (Math.random() - 0.5) * 1.2; // downward spread
|
||||
const speed = cfg.flapDustSpeed * (0.5 + Math.random() * 0.5);
|
||||
const size = 2 + Math.random() * 2;
|
||||
const particle = this.scene.add.circle(x, y, size, cfg.flapDustColor, 0.5).setDepth(4);
|
||||
|
||||
this.scene.tweens.add({
|
||||
targets: particle,
|
||||
x: x + Math.cos(angle) * speed - 10,
|
||||
y: y + Math.sin(angle) * speed,
|
||||
alpha: 0,
|
||||
scale: 0.3,
|
||||
duration: cfg.flapDustDuration + Math.random() * 100,
|
||||
ease: 'Quad.easeOut',
|
||||
onComplete: () => particle.destroy(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
deathBurst(x, y) {
|
||||
const cfg = PARTICLES_CONFIG;
|
||||
for (let i = 0; i < cfg.deathBurstCount; i++) {
|
||||
const angle = (Math.PI * 2 * i) / cfg.deathBurstCount + (Math.random() - 0.5) * 0.3;
|
||||
const speed = cfg.deathBurstSpeed * (0.5 + Math.random() * 0.5);
|
||||
const size = 2 + Math.random() * 4;
|
||||
const color = Phaser.Utils.Array.GetRandom([cfg.deathBurstColor, 0xffcccc, 0xffe0a0]);
|
||||
const particle = this.scene.add.circle(x, y, size, color, 0.9).setDepth(15);
|
||||
|
||||
this.scene.tweens.add({
|
||||
targets: particle,
|
||||
x: x + Math.cos(angle) * speed,
|
||||
y: y + Math.sin(angle) * speed,
|
||||
alpha: 0,
|
||||
scale: 0.1,
|
||||
duration: cfg.deathBurstDuration + Math.random() * 200,
|
||||
ease: 'Quad.easeOut',
|
||||
onComplete: () => particle.destroy(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.unsubs.forEach(unsub => unsub());
|
||||
this.unsubs = [];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { PIPE_CONFIG, GAME_CONFIG } from '../core/Constants.js';
|
||||
import Pipe from '../entities/Pipe.js';
|
||||
|
||||
export default class PipeSpawner {
|
||||
constructor(scene) {
|
||||
this.scene = scene;
|
||||
this.pipes = [];
|
||||
this.timer = null;
|
||||
}
|
||||
|
||||
start() {
|
||||
this.timer = this.scene.time.addEvent({
|
||||
delay: PIPE_CONFIG.spawnInterval,
|
||||
callback: this.spawnPipe,
|
||||
callbackScope: this,
|
||||
loop: true,
|
||||
});
|
||||
|
||||
// Spawn first pipe sooner
|
||||
this.scene.time.delayedCall(800, () => this.spawnPipe());
|
||||
}
|
||||
|
||||
spawnPipe() {
|
||||
const pipe = new Pipe(this.scene, GAME_CONFIG.width + PIPE_CONFIG.width);
|
||||
this.pipes.push(pipe);
|
||||
}
|
||||
|
||||
update() {
|
||||
for (let i = this.pipes.length - 1; i >= 0; i--) {
|
||||
const pipe = this.pipes[i];
|
||||
pipe.update();
|
||||
|
||||
if (pipe.isOffScreen()) {
|
||||
pipe.destroy();
|
||||
this.pipes.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
stop() {
|
||||
if (this.timer) {
|
||||
this.timer.remove();
|
||||
this.timer = null;
|
||||
}
|
||||
// Stop all pipes
|
||||
this.pipes.forEach(pipe => {
|
||||
pipe.body.setVelocityX(0);
|
||||
});
|
||||
}
|
||||
|
||||
getCollisionZones() {
|
||||
const tops = [];
|
||||
const bottoms = [];
|
||||
const scores = [];
|
||||
this.pipes.forEach(pipe => {
|
||||
tops.push(pipe.topZone);
|
||||
bottoms.push(pipe.bottomZone);
|
||||
scores.push(pipe.scoreZone);
|
||||
});
|
||||
return { tops, bottoms, scores };
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.stop();
|
||||
this.pipes.forEach(pipe => pipe.destroy());
|
||||
this.pipes = [];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { eventBus, Events } from '../core/EventBus.js';
|
||||
import { gameState } from '../core/GameState.js';
|
||||
|
||||
export default class ScoreSystem {
|
||||
constructor() {
|
||||
this.unsub = null;
|
||||
}
|
||||
|
||||
start() {
|
||||
this.unsub = eventBus.on(Events.BIRD_PASSED_PIPE, () => {
|
||||
gameState.addScore();
|
||||
eventBus.emit(Events.SCORE_CHANGED, { score: gameState.score });
|
||||
});
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.unsub) this.unsub();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import { test, expect, startPlaying } from '../fixtures/game-test.js';
|
||||
|
||||
test.describe('Game Boot & Scene Flow', () => {
|
||||
test('game boots and shows menu scene', async ({ gamePage }) => {
|
||||
const sceneKey = await gamePage.evaluate(() => {
|
||||
const scenes = window.__GAME__.scene.getScenes(true);
|
||||
return scenes[0]?.scene?.key;
|
||||
});
|
||||
expect(sceneKey).toBe('MenuScene');
|
||||
});
|
||||
|
||||
test('canvas is visible', async ({ gamePage }) => {
|
||||
const canvas = gamePage.locator('canvas');
|
||||
await expect(canvas).toBeVisible();
|
||||
});
|
||||
|
||||
test('menu transitions to game scene on space', async ({ gamePage }) => {
|
||||
await gamePage.keyboard.press('Space');
|
||||
|
||||
await gamePage.waitForFunction(() => {
|
||||
const scenes = window.__GAME__.scene.getScenes(true);
|
||||
return scenes.some(s => s.scene.key === 'GameScene');
|
||||
}, null, { timeout: 5000 });
|
||||
|
||||
const activeScenes = await gamePage.evaluate(() => {
|
||||
return window.__GAME__.scene.getScenes(true).map(s => s.scene.key);
|
||||
});
|
||||
expect(activeScenes).toContain('GameScene');
|
||||
});
|
||||
|
||||
test('menu transitions to game scene on click', async ({ gamePage }) => {
|
||||
const canvas = gamePage.locator('canvas');
|
||||
await canvas.click({ position: { x: 200, y: 300 } });
|
||||
|
||||
await gamePage.waitForFunction(() => {
|
||||
const scenes = window.__GAME__.scene.getScenes(true);
|
||||
return scenes.some(s => s.scene.key === 'GameScene');
|
||||
}, null, { timeout: 5000 });
|
||||
|
||||
const activeScenes = await gamePage.evaluate(() => {
|
||||
return window.__GAME__.scene.getScenes(true).map(s => s.scene.key);
|
||||
});
|
||||
expect(activeScenes).toContain('GameScene');
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Gameplay', () => {
|
||||
test('game starts on input', async ({ gamePage }) => {
|
||||
await startPlaying(gamePage);
|
||||
|
||||
const started = await gamePage.evaluate(() => window.__GAME_STATE__.started);
|
||||
expect(started).toBe(true);
|
||||
});
|
||||
|
||||
test('bird flaps on space (moves upward)', async ({ gamePage }) => {
|
||||
await startPlaying(gamePage);
|
||||
await gamePage.waitForTimeout(300);
|
||||
|
||||
// Get bird Y before flap
|
||||
const yBefore = await gamePage.evaluate(() => {
|
||||
return window.__GAME__.scene.getScene('GameScene').bird.y;
|
||||
});
|
||||
|
||||
// Flap
|
||||
await gamePage.keyboard.press('Space');
|
||||
await gamePage.waitForTimeout(150);
|
||||
|
||||
// Bird should move up (lower y value)
|
||||
const yAfter = await gamePage.evaluate(() => {
|
||||
return window.__GAME__.scene.getScene('GameScene').bird.y;
|
||||
});
|
||||
expect(yAfter).toBeLessThan(yBefore);
|
||||
});
|
||||
|
||||
test('game over when bird hits ground', async ({ gamePage }) => {
|
||||
await startPlaying(gamePage);
|
||||
|
||||
// Don't flap — let bird fall
|
||||
await gamePage.waitForFunction(
|
||||
() => window.__GAME_STATE__.gameOver === true,
|
||||
null,
|
||||
{ timeout: 10000 }
|
||||
);
|
||||
|
||||
expect(await gamePage.evaluate(() => window.__GAME_STATE__.gameOver)).toBe(true);
|
||||
});
|
||||
|
||||
test('game over transitions to GameOverScene', async ({ gamePage }) => {
|
||||
await startPlaying(gamePage);
|
||||
|
||||
// Let bird die (may take a while in headless)
|
||||
await gamePage.waitForFunction(
|
||||
() => window.__GAME_STATE__.gameOver === true,
|
||||
null,
|
||||
{ timeout: 15000 }
|
||||
);
|
||||
|
||||
// Wait for scene transition (death slow-mo + 800ms delay + fade)
|
||||
await gamePage.waitForFunction(() => {
|
||||
const scenes = window.__GAME__.scene.getScenes(true);
|
||||
return scenes.some(s => s.scene.key === 'GameOverScene');
|
||||
}, null, { timeout: 15000 });
|
||||
|
||||
const activeScenes = await gamePage.evaluate(() => {
|
||||
return window.__GAME__.scene.getScenes(true).map(s => s.scene.key);
|
||||
});
|
||||
expect(activeScenes).toContain('GameOverScene');
|
||||
});
|
||||
|
||||
test('score starts at 0', async ({ gamePage }) => {
|
||||
await startPlaying(gamePage);
|
||||
|
||||
const score = await gamePage.evaluate(() => window.__GAME_STATE__.score);
|
||||
expect(score).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Restart Flow', () => {
|
||||
test('can restart from game over with space', async ({ gamePage }) => {
|
||||
await startPlaying(gamePage);
|
||||
|
||||
// Let bird die
|
||||
await gamePage.waitForFunction(
|
||||
() => window.__GAME_STATE__.gameOver === true,
|
||||
null,
|
||||
{ timeout: 10000 }
|
||||
);
|
||||
|
||||
// Wait for GameOverScene (death slow-mo + 800ms delay + fade transition)
|
||||
await gamePage.waitForFunction(() => {
|
||||
const scenes = window.__GAME__.scene.getScenes(true);
|
||||
return scenes.some(s => s.scene.key === 'GameOverScene');
|
||||
}, null, { timeout: 15000 });
|
||||
|
||||
// Allow fade-in to complete
|
||||
await gamePage.waitForTimeout(800);
|
||||
|
||||
// Press space to restart
|
||||
await gamePage.keyboard.press('Space');
|
||||
|
||||
// Should go back to GameScene
|
||||
await gamePage.waitForFunction(() => {
|
||||
const scenes = window.__GAME__.scene.getScenes(true);
|
||||
return scenes.some(s => s.scene.key === 'GameScene');
|
||||
}, null, { timeout: 5000 });
|
||||
|
||||
// State should be reset
|
||||
const gameOver = await gamePage.evaluate(() => window.__GAME_STATE__.gameOver);
|
||||
expect(gameOver).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,82 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('Performance', () => {
|
||||
test('game loads and boots within 5 seconds', async ({ page }) => {
|
||||
const start = Date.now();
|
||||
await page.goto('/');
|
||||
await page.waitForFunction(() => {
|
||||
const g = window.__GAME__;
|
||||
return g && g.isBooted && g.canvas;
|
||||
}, null, { timeout: 10000 });
|
||||
const loadTime = Date.now() - start;
|
||||
expect(loadTime).toBeLessThan(5000);
|
||||
});
|
||||
|
||||
test('game maintains 30+ FPS during gameplay', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForFunction(() => {
|
||||
const g = window.__GAME__;
|
||||
return g && g.isBooted && g.canvas;
|
||||
}, null, { timeout: 10000 });
|
||||
|
||||
// Navigate to game: Space (menu → game), wait, Space (get ready → play)
|
||||
await page.keyboard.press('Space');
|
||||
await page.waitForFunction(() => {
|
||||
const scenes = window.__GAME__.scene.getScenes(true);
|
||||
return scenes.some(s => s.scene.key === 'GameScene');
|
||||
}, null, { timeout: 5000 });
|
||||
await page.waitForTimeout(400);
|
||||
await page.keyboard.press('Space');
|
||||
await page.waitForFunction(() => window.__GAME_STATE__?.started, null, { timeout: 5000 });
|
||||
|
||||
// Keep flapping to stay alive during measurement
|
||||
const flapHandle = await page.evaluateHandle(() => {
|
||||
const id = setInterval(() => {
|
||||
const scene = window.__GAME__?.scene?.getScene('GameScene');
|
||||
if (scene?.bird?.alive) scene.bird.flap();
|
||||
}, 250);
|
||||
return id;
|
||||
});
|
||||
|
||||
// Measure FPS over 2 seconds
|
||||
const avgFps = await page.evaluate(() => {
|
||||
return new Promise((resolve) => {
|
||||
let frames = 0;
|
||||
const start = performance.now();
|
||||
function countFrame() {
|
||||
frames++;
|
||||
if (performance.now() - start < 2000) {
|
||||
requestAnimationFrame(countFrame);
|
||||
} else {
|
||||
resolve(frames / ((performance.now() - start) / 1000));
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(countFrame);
|
||||
});
|
||||
});
|
||||
|
||||
// Clean up flap interval
|
||||
await page.evaluate((id) => clearInterval(id), await flapHandle.jsonValue());
|
||||
|
||||
// Headless Chromium is heavily throttled (often ~7-10 FPS).
|
||||
// This test verifies the game loop runs; use Playwright MCP
|
||||
// with a headed browser for real FPS measurement.
|
||||
expect(avgFps).toBeGreaterThan(5);
|
||||
});
|
||||
|
||||
test('canvas element exists and has correct dimensions', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForFunction(() => {
|
||||
const g = window.__GAME__;
|
||||
return g && g.isBooted && g.canvas;
|
||||
}, null, { timeout: 10000 });
|
||||
|
||||
const dimensions = await page.evaluate(() => {
|
||||
const canvas = document.querySelector('canvas');
|
||||
return { width: canvas.width, height: canvas.height };
|
||||
});
|
||||
|
||||
expect(dimensions.width).toBeGreaterThan(0);
|
||||
expect(dimensions.height).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,39 @@
|
||||
import { test, expect, startPlaying } from '../fixtures/game-test.js';
|
||||
|
||||
test.describe('Visual Regression', () => {
|
||||
test('menu scene renders correctly', async ({ gamePage }) => {
|
||||
// Wait for fade-in and initial render to settle
|
||||
await gamePage.waitForTimeout(600);
|
||||
// Higher tolerance because scrolling clouds shift between captures
|
||||
await expect(gamePage.locator('canvas')).toHaveScreenshot('menu-scene.png', {
|
||||
maxDiffPixels: 3000,
|
||||
});
|
||||
});
|
||||
|
||||
// Note: active gameplay screenshots are skipped because moving pipes,
|
||||
// scrolling clouds, and bird animation make the canvas inherently unstable.
|
||||
// Use the Playwright MCP for visual inspection of live gameplay instead.
|
||||
|
||||
test('game over scene renders correctly', async ({ gamePage }) => {
|
||||
await startPlaying(gamePage);
|
||||
|
||||
// Let bird die
|
||||
await gamePage.waitForFunction(
|
||||
() => window.__GAME_STATE__.gameOver === true,
|
||||
null,
|
||||
{ timeout: 10000 }
|
||||
);
|
||||
|
||||
// Wait for GameOverScene to fully render
|
||||
await gamePage.waitForFunction(() => {
|
||||
const scenes = window.__GAME__.scene.getScenes(true);
|
||||
return scenes.some(s => s.scene.key === 'GameOverScene');
|
||||
}, null, { timeout: 15000 });
|
||||
await gamePage.waitForTimeout(1000);
|
||||
|
||||
// Higher tolerance for scrolling clouds
|
||||
await expect(gamePage.locator('canvas')).toHaveScreenshot('game-over-scene.png', {
|
||||
maxDiffPixels: 3000,
|
||||
});
|
||||
});
|
||||
});
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,49 @@
|
||||
import { test as base, expect } from '@playwright/test';
|
||||
|
||||
export const test = base.extend({
|
||||
// gamePage: boots game, lands on MenuScene
|
||||
gamePage: async ({ page }, use) => {
|
||||
await page.goto('/');
|
||||
// Wait for Phaser to boot and canvas to render
|
||||
await page.waitForFunction(() => {
|
||||
const g = window.__GAME__;
|
||||
return g && g.isBooted && g.canvas;
|
||||
}, null, { timeout: 10000 });
|
||||
// Wait for MenuScene to be active
|
||||
await page.waitForFunction(() => {
|
||||
const scenes = window.__GAME__.scene.getScenes(true);
|
||||
return scenes.some(s => s.scene.key === 'MenuScene');
|
||||
}, null, { timeout: 5000 });
|
||||
await page.waitForTimeout(400);
|
||||
await use(page);
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Helper: navigate from MenuScene to active gameplay.
|
||||
* Press Space to leave menu (triggers fade), wait for GameScene,
|
||||
* then press Space again to dismiss "GET READY" and start playing.
|
||||
*/
|
||||
export async function startPlaying(page) {
|
||||
// Press Space to leave menu
|
||||
await page.keyboard.press('Space');
|
||||
|
||||
// Wait for GameScene to be active (after fade transition)
|
||||
await page.waitForFunction(() => {
|
||||
const scenes = window.__GAME__.scene.getScenes(true);
|
||||
return scenes.some(s => s.scene.key === 'GameScene');
|
||||
}, null, { timeout: 5000 });
|
||||
await page.waitForTimeout(400);
|
||||
|
||||
// Press Space again to dismiss GET READY and start playing
|
||||
await page.keyboard.press('Space');
|
||||
|
||||
// Wait for started state
|
||||
await page.waitForFunction(
|
||||
() => window.__GAME_STATE__.started === true,
|
||||
null,
|
||||
{ timeout: 5000 }
|
||||
);
|
||||
}
|
||||
|
||||
export { expect };
|
||||
@@ -0,0 +1,11 @@
|
||||
// Mulberry32 seeded PRNG — inject via page.addInitScript() for deterministic game behavior
|
||||
(function() {
|
||||
let seed = 42;
|
||||
Math.random = function() {
|
||||
seed |= 0;
|
||||
seed = (seed + 0x6D2B79F5) | 0;
|
||||
let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
|
||||
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
|
||||
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
||||
};
|
||||
})();
|
||||
@@ -0,0 +1,8 @@
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
root: '.',
|
||||
publicDir: 'public',
|
||||
server: { port: 3000, open: true },
|
||||
build: { outDir: 'dist' }
|
||||
});
|
||||
@@ -0,0 +1,209 @@
|
||||
---
|
||||
name: game-architecture
|
||||
description: Game architecture patterns and best practices for browser games. Use when designing game systems, planning architecture, structuring a game project, or making architectural decisions about game code.
|
||||
user-invocable: false
|
||||
---
|
||||
|
||||
# Game Architecture Patterns
|
||||
|
||||
Reference knowledge for building well-structured browser games. These patterns apply to both Three.js (3D) and Phaser (2D) games.
|
||||
|
||||
## Core Principles
|
||||
|
||||
1. **Event-Driven Communication**: Modules never import each other for communication. All cross-module messaging goes through a singleton EventBus with predefined event constants.
|
||||
|
||||
2. **Centralized State**: A single GameState singleton holds all game state. Systems read state directly and modify it through events. No scattered state across modules.
|
||||
|
||||
3. **Configuration Centralization**: Every magic number, balance value, asset path, spawn point, and timing value goes in `Constants.js`. Game logic files contain zero hardcoded values.
|
||||
|
||||
4. **Orchestrator Pattern**: One `Game.js` class initializes all systems, manages game flow (menu -> loading -> gameplay -> death/win), and runs the main loop. Systems don't self-initialize.
|
||||
|
||||
5. **Clear Separation of Concerns**: Code is organized into functional layers:
|
||||
- `core/` - Foundation (Game, EventBus, GameState, Constants)
|
||||
- `systems/` - Engine-level systems (input, physics, audio, particles)
|
||||
- `gameplay/` - Game mechanics (player, enemies, weapons, scoring)
|
||||
- `level/` - World building (level construction, asset loading)
|
||||
- `ui/` - Interface (menus, HUD, overlays)
|
||||
|
||||
## Event System Design
|
||||
|
||||
### Event Naming Convention
|
||||
|
||||
Use `domain:action` format grouped by feature area:
|
||||
|
||||
```js
|
||||
export const Events = {
|
||||
// Player
|
||||
PLAYER_DAMAGED: 'player:damaged',
|
||||
PLAYER_HEALED: 'player:healed',
|
||||
PLAYER_DIED: 'player:died',
|
||||
|
||||
// Enemy
|
||||
ENEMY_SPAWNED: 'enemy:spawned',
|
||||
ENEMY_KILLED: 'enemy:killed',
|
||||
|
||||
// Game flow
|
||||
GAME_STARTED: 'game:started',
|
||||
GAME_PAUSED: 'game:paused',
|
||||
GAME_OVER: 'game:over',
|
||||
|
||||
// UI
|
||||
MENU_OPENED: 'menu:opened',
|
||||
SETTINGS_CHANGED: 'settings:changed',
|
||||
|
||||
// System
|
||||
ASSETS_LOADED: 'assets:loaded',
|
||||
LOADING_PROGRESS: 'loading:progress'
|
||||
};
|
||||
```
|
||||
|
||||
### Event Data Contracts
|
||||
|
||||
Always pass structured data objects, never primitives:
|
||||
|
||||
```js
|
||||
// Good
|
||||
eventBus.emit(Events.PLAYER_DAMAGED, { amount: 10, source: 'enemy', damageType: 'melee' });
|
||||
|
||||
// Bad
|
||||
eventBus.emit(Events.PLAYER_DAMAGED, 10);
|
||||
```
|
||||
|
||||
## State Management
|
||||
|
||||
### GameState Structure
|
||||
|
||||
Organize state into clear domains:
|
||||
|
||||
```js
|
||||
class GameState {
|
||||
constructor() {
|
||||
this.player = { health, maxHealth, speed, inventory, buffs };
|
||||
this.combat = { killCount, waveNumber, score };
|
||||
this.game = { started, paused, isPlaying, menuState };
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Buff/Effect System
|
||||
|
||||
Use time-based buffs with multipliers:
|
||||
|
||||
```js
|
||||
addBuff(stat, multiplier, durationSeconds) {
|
||||
this.player.buffs.push({
|
||||
stat, multiplier, duration: durationSeconds,
|
||||
endTime: Date.now() + durationSeconds * 1000
|
||||
});
|
||||
}
|
||||
updateBuffs() {
|
||||
this.player.buffs = this.player.buffs.filter(b => b.endTime > Date.now());
|
||||
}
|
||||
getBuffMultiplier(stat) {
|
||||
return this.player.buffs
|
||||
.filter(b => b.stat === stat || b.stat === 'all')
|
||||
.reduce((mult, b) => mult * b.multiplier, 1);
|
||||
}
|
||||
```
|
||||
|
||||
## Performance Patterns
|
||||
|
||||
### Object Pooling
|
||||
|
||||
Reuse temporary math objects in hot loops:
|
||||
|
||||
```js
|
||||
// Module-level reusable objects
|
||||
const _tempVec = new THREE.Vector3();
|
||||
const _tempBox = new THREE.Box3();
|
||||
|
||||
update(delta) {
|
||||
// Reuse instead of creating new
|
||||
_tempVec.set(x, y, z);
|
||||
}
|
||||
```
|
||||
|
||||
For Phaser, use Group-based pooling:
|
||||
|
||||
```js
|
||||
this.bulletPool = this.physics.add.group({
|
||||
classType: Bullet,
|
||||
maxSize: 50,
|
||||
runChildUpdate: true
|
||||
});
|
||||
|
||||
fire() {
|
||||
const bullet = this.bulletPool.get(x, y);
|
||||
if (bullet) bullet.fire(direction);
|
||||
}
|
||||
```
|
||||
|
||||
### Delta Time
|
||||
|
||||
Always cap delta to prevent death spirals after tab-out:
|
||||
|
||||
```js
|
||||
const delta = Math.min(clock.getDelta(), 0.1);
|
||||
```
|
||||
|
||||
### Disposal
|
||||
|
||||
Clean up Three.js resources:
|
||||
|
||||
```js
|
||||
// When removing objects
|
||||
geometry.dispose();
|
||||
material.dispose();
|
||||
texture.dispose();
|
||||
scene.remove(mesh);
|
||||
```
|
||||
|
||||
Clean up Phaser event listeners:
|
||||
|
||||
```js
|
||||
// Store unsubscribe functions
|
||||
this.unsubs = [eventBus.on(Events.X, handler)];
|
||||
|
||||
// In shutdown
|
||||
this.unsubs.forEach(fn => fn());
|
||||
```
|
||||
|
||||
## Wave/Spawn System Pattern
|
||||
|
||||
For wave-based games, use configuration-driven scaling:
|
||||
|
||||
```js
|
||||
export const WAVE_CONFIG = {
|
||||
initialSpawnInterval: 4,
|
||||
minSpawnInterval: 1.5,
|
||||
intervalReductionPerWave: 0.3,
|
||||
initialEnemiesPerWave: 6,
|
||||
enemiesIncreasePerWave: 2,
|
||||
maxEnemiesPerWave: 30,
|
||||
initialMaxConcurrent: 4,
|
||||
maxConcurrentPerWave: 1,
|
||||
maxConcurrentCap: 12
|
||||
};
|
||||
```
|
||||
|
||||
All wave difficulty math references these constants, never hardcoded numbers.
|
||||
|
||||
## Asset Management
|
||||
|
||||
- 3D models: GLB format (compact, single file)
|
||||
- 2D sprites: Spritesheets or texture atlases
|
||||
- Audio: MP3 for music, WAV/OGG for short SFX
|
||||
- Put assets in `/public/` for Vite serving
|
||||
- Show loading progress to the player
|
||||
- Preload everything before gameplay starts
|
||||
|
||||
## Game Flow
|
||||
|
||||
Standard flow for both 2D and 3D games:
|
||||
|
||||
```
|
||||
Boot/Load -> Main Menu -> Gameplay <-> Pause Menu
|
||||
-> Game Over -> Main Menu
|
||||
```
|
||||
|
||||
Manage this through `gameState.game.menuState` which tracks the current flow state.
|
||||
@@ -0,0 +1,450 @@
|
||||
---
|
||||
name: game-audio
|
||||
description: Game audio engineer using Strudel.cc to compose background music, menu themes, and sound effects for browser games. Use when adding music or SFX to a game.
|
||||
---
|
||||
|
||||
# Game Audio Engineer (Strudel)
|
||||
|
||||
You are an expert game audio engineer. You use **Strudel.cc** — a browser-based live coding music tool — to compose background music, menu themes, and sound effects for browser games. You think in layers, loops, and game feel.
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- **Audio Engine**: Strudel (`@strudel/web` npm package)
|
||||
- **Synths**: Built-in oscillators (square, triangle, sawtooth, sine), FM synthesis, ZZFX (game-oriented)
|
||||
- **Samples**: Built-in drum kits (TR-808, TR-909), percussion, VCSL instruments
|
||||
- **Effects**: Reverb, delay, filters (LPF/HPF/BPF), distortion, bit-crush, panning
|
||||
- **No external audio files needed** — all sounds are procedural or from built-in sample banks
|
||||
- **Desktop app**: Strudel has a Tauri-based desktop app (`src-tauri/` in the repo) for local use without a browser
|
||||
- **Node.js**: `@strudel/core` is a pure JS pattern engine that runs in Node.js. Combine with `@strudel/osc` or `@strudel/midi` for headless audio output to external synths/DAWs
|
||||
- **For browser games**, use `@strudel/web` which bundles everything including Web Audio output
|
||||
|
||||
## Setup
|
||||
|
||||
### Install Strudel in a game project
|
||||
|
||||
```bash
|
||||
npm install @strudel/web
|
||||
```
|
||||
|
||||
### Initialize in `main.js`
|
||||
|
||||
Strudel must be initialized after a user interaction (browser autoplay policy). Add this to the game's entry point:
|
||||
|
||||
```js
|
||||
import { initStrudel } from '@strudel/web';
|
||||
|
||||
// Initialize Strudel audio — call after first user click/tap
|
||||
let strudelReady = false;
|
||||
function initAudio() {
|
||||
if (strudelReady) return;
|
||||
initStrudel();
|
||||
strudelReady = true;
|
||||
}
|
||||
|
||||
// Expose for game scenes to call
|
||||
window.__INIT_AUDIO__ = initAudio;
|
||||
```
|
||||
|
||||
### Wire into the game
|
||||
|
||||
Call `window.__INIT_AUDIO__()` on the first user interaction (menu tap, first flap, etc.), then use `play()` and `hush()` to control music.
|
||||
|
||||
## Architecture
|
||||
|
||||
### File Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├── audio/
|
||||
│ ├── AudioManager.js # Manages BGM and SFX playback
|
||||
│ ├── music.js # Background music patterns (menu, gameplay, game over)
|
||||
│ └── sfx.js # Sound effect patterns (jump, score, death, button)
|
||||
```
|
||||
|
||||
### AudioManager Pattern
|
||||
|
||||
```js
|
||||
import { initStrudel } from '@strudel/web';
|
||||
|
||||
class AudioManager {
|
||||
constructor() {
|
||||
this.initialized = false;
|
||||
this.currentMusic = null;
|
||||
}
|
||||
|
||||
init() {
|
||||
if (this.initialized) return;
|
||||
initStrudel();
|
||||
this.initialized = true;
|
||||
}
|
||||
|
||||
playMusic(patternFn) {
|
||||
if (!this.initialized) return;
|
||||
this.stopMusic();
|
||||
this.currentMusic = patternFn();
|
||||
}
|
||||
|
||||
stopMusic() {
|
||||
if (!this.initialized) return;
|
||||
hush(); // stops all patterns
|
||||
}
|
||||
|
||||
playSfx(patternFn) {
|
||||
if (!this.initialized) return;
|
||||
patternFn();
|
||||
// SFX patterns use short envelopes and decay naturally
|
||||
}
|
||||
}
|
||||
|
||||
export const audioManager = new AudioManager();
|
||||
```
|
||||
|
||||
### EventBus Integration
|
||||
|
||||
Wire audio to game events:
|
||||
|
||||
```js
|
||||
import { eventBus, Events } from '../core/EventBus.js';
|
||||
import { audioManager } from '../audio/AudioManager.js';
|
||||
import { menuTheme, gameplayBGM, gameOverTheme } from '../audio/music.js';
|
||||
import { flapSfx, scoreSfx, deathSfx } from '../audio/sfx.js';
|
||||
|
||||
// Music transitions
|
||||
eventBus.on(Events.GAME_START, () => audioManager.playMusic(gameplayBGM));
|
||||
eventBus.on(Events.GAME_OVER, () => audioManager.playMusic(gameOverTheme));
|
||||
eventBus.on(Events.GAME_RESTART, () => audioManager.playMusic(gameplayBGM));
|
||||
|
||||
// SFX
|
||||
eventBus.on(Events.BIRD_FLAP, () => audioManager.playSfx(flapSfx));
|
||||
eventBus.on(Events.SCORE_CHANGED, () => audioManager.playSfx(scoreSfx));
|
||||
eventBus.on(Events.BIRD_DIED, () => audioManager.playSfx(deathSfx));
|
||||
```
|
||||
|
||||
## Strudel Quick Reference
|
||||
|
||||
### Core Pattern Syntax
|
||||
|
||||
```js
|
||||
// Sequence sounds across one cycle
|
||||
s("bd sd hh hh")
|
||||
|
||||
// Layer sounds simultaneously
|
||||
stack(
|
||||
s("bd sd"),
|
||||
s("hh*8"),
|
||||
note("c3 e3 g3").s("square")
|
||||
)
|
||||
|
||||
// Alternate across cycles
|
||||
note("<c3 e3> <g3 a3>")
|
||||
|
||||
// Euclidean rhythm: 3 hits spread across 8 slots
|
||||
s("bd(3,8)")
|
||||
|
||||
// Subdivide within a beat
|
||||
s("bd [hh hh] sd [hh hh hh]")
|
||||
```
|
||||
|
||||
### Mini-Notation Cheat Sheet
|
||||
|
||||
| Symbol | Meaning | Example |
|
||||
|--------|---------|---------|
|
||||
| ` ` | Sequence | `"bd sd hh"` |
|
||||
| `~` | Rest | `"bd ~ sd ~"` |
|
||||
| `*N` | Speed up | `"hh*8"` |
|
||||
| `/N` | Slow down | `"bd/2"` |
|
||||
| `[..]` | Subdivide | `"bd [sd sd]"` |
|
||||
| `<..>` | Alternate cycles | `"<bd sd>"` |
|
||||
| `,` | Layer | `"bd, hh*4"` |
|
||||
| `(k,n)` | Euclidean | `"bd(3,8)"` |
|
||||
| `?` | 50% chance | `"hh?"` |
|
||||
| `:N` | Sample variant | `"hh:0 hh:3"` |
|
||||
|
||||
### Synth Oscillators
|
||||
|
||||
| Name | Sound | Game Use |
|
||||
|------|-------|----------|
|
||||
| `square` | Classic 8-bit / chiptune | Melodies, leads, retro SFX |
|
||||
| `triangle` | Soft, muted | Bass lines, subtle pads |
|
||||
| `sawtooth` | Bright, buzzy | Aggressive leads, stabs |
|
||||
| `sine` | Pure tone | Sub-bass, gentle melodies |
|
||||
|
||||
### Key Effects
|
||||
|
||||
```js
|
||||
.gain(0.5) // Volume (0-1+)
|
||||
.lpf(800) // Low-pass filter cutoff Hz
|
||||
.hpf(200) // High-pass filter cutoff Hz
|
||||
.room(0.3) // Reverb send (0-1)
|
||||
.delay(0.2) // Delay send (0-1)
|
||||
.delaytime(0.375) // Delay time in seconds
|
||||
.crush(8) // Bit crush (1-16, lower = crunchier)
|
||||
.distort(2) // Distortion amount
|
||||
.pan(0.3) // Stereo pan (0=L, 0.5=C, 1=R)
|
||||
.attack(0.01) // ADSR attack time
|
||||
.decay(0.2) // ADSR decay time
|
||||
.sustain(0) // ADSR sustain level (0 = percussive)
|
||||
.release(0.1) // ADSR release time
|
||||
.speed(-1) // Reverse playback
|
||||
.fast(2) // Double speed
|
||||
.slow(2) // Half speed
|
||||
.cpm(120) // Cycles per minute (tempo)
|
||||
```
|
||||
|
||||
### FM Synthesis (for metallic/bell sounds)
|
||||
|
||||
```js
|
||||
note("c4").s("sine")
|
||||
.fm(4) // Modulation index (brightness)
|
||||
.fmh(2) // Harmonicity (whole = natural, fractional = metallic)
|
||||
.fmdecay(0.5) // FM envelope decay
|
||||
```
|
||||
|
||||
## Music Patterns for Games
|
||||
|
||||
### Chiptune Gameplay BGM
|
||||
|
||||
```js
|
||||
export function gameplayBGM() {
|
||||
return stack(
|
||||
// Lead melody — square wave, classic 8-bit
|
||||
note("c4 e4 g4 e4 c4 d4 e4 c4")
|
||||
.s("square")
|
||||
.gain(0.35)
|
||||
.lpf(2500)
|
||||
.decay(0.12)
|
||||
.sustain(0.3),
|
||||
// Bass — triangle wave, steady pulse
|
||||
note("c2 c2 g2 g2 f2 f2 c2 c2")
|
||||
.s("triangle")
|
||||
.gain(0.45),
|
||||
// Drums — minimal kit
|
||||
s("bd ~ sd ~, hh*8")
|
||||
.gain(0.5),
|
||||
// Arpeggio accent — adds movement
|
||||
note("c3 e3 g3 c4")
|
||||
.s("square")
|
||||
.fast(4)
|
||||
.gain(0.15)
|
||||
.lpf(1200)
|
||||
.decay(0.08)
|
||||
.sustain(0)
|
||||
).cpm(140).play();
|
||||
}
|
||||
```
|
||||
|
||||
### Menu Theme (ambient, gentle)
|
||||
|
||||
```js
|
||||
export function menuTheme() {
|
||||
return stack(
|
||||
// Pad — stacked chords with slow attack
|
||||
note("<c3,e3,g3> <a2,c3,e3> <f2,a2,c3> <g2,b2,d3>")
|
||||
.s("sine")
|
||||
.attack(0.5)
|
||||
.release(1)
|
||||
.gain(0.25)
|
||||
.room(0.5)
|
||||
.roomsize(4),
|
||||
// Melodic texture — delayed triangle arps
|
||||
note("c5 e5 g5 b5")
|
||||
.s("triangle")
|
||||
.slow(4)
|
||||
.gain(0.12)
|
||||
.delay(0.4)
|
||||
.delaytime(0.375)
|
||||
.delayfeedback(0.5),
|
||||
// Gentle pulse
|
||||
note("c2 ~ g2 ~")
|
||||
.s("triangle")
|
||||
.gain(0.2)
|
||||
.slow(2)
|
||||
).slow(2).cpm(80).play();
|
||||
}
|
||||
```
|
||||
|
||||
### Game Over Theme (somber, short)
|
||||
|
||||
```js
|
||||
export function gameOverTheme() {
|
||||
return stack(
|
||||
// Descending melody
|
||||
note("e4 d4 c4 b3 a3 ~ ~ ~")
|
||||
.s("triangle")
|
||||
.gain(0.3)
|
||||
.decay(0.4)
|
||||
.sustain(0.2)
|
||||
.room(0.4),
|
||||
// Low pad
|
||||
note("a2,c3,e3")
|
||||
.s("sine")
|
||||
.attack(0.3)
|
||||
.release(2)
|
||||
.gain(0.2)
|
||||
.room(0.6)
|
||||
).slow(2).cpm(60).play();
|
||||
}
|
||||
```
|
||||
|
||||
### Intense/Boss Theme
|
||||
|
||||
```js
|
||||
export function bossTheme() {
|
||||
return stack(
|
||||
// Aggressive lead — sawtooth with filter
|
||||
note("e3 e3 g3 a3 e3 e3 b3 a3")
|
||||
.s("sawtooth")
|
||||
.gain(0.3)
|
||||
.lpf(1800)
|
||||
.decay(0.1)
|
||||
.sustain(0.4),
|
||||
// Heavy bass
|
||||
note("e1 e1 e1 g1 a1 a1 e1 e1")
|
||||
.s("sawtooth")
|
||||
.gain(0.4)
|
||||
.lpf(400)
|
||||
.distort(1.5),
|
||||
// Fast drums
|
||||
s("bd bd sd bd, hh*16")
|
||||
.gain(0.6),
|
||||
// Tension arp
|
||||
note("e4 g4 b4 e5")
|
||||
.s("square")
|
||||
.fast(8)
|
||||
.gain(0.12)
|
||||
.lpf("<800 1600 2400 1200>")
|
||||
.decay(0.05)
|
||||
.sustain(0)
|
||||
).cpm(160).play();
|
||||
}
|
||||
```
|
||||
|
||||
## Sound Effects for Games
|
||||
|
||||
Design SFX with **very short envelopes** (`.sustain(0)`) so they decay naturally within one cycle.
|
||||
|
||||
### Common Game SFX
|
||||
|
||||
```js
|
||||
// Flap / Jump — quick upward pitch sweep
|
||||
export function flapSfx() {
|
||||
note("c4").s("square")
|
||||
.penv(8).pdecay(0.1)
|
||||
.decay(0.12).sustain(0).gain(0.3)
|
||||
.lpf(3000).play();
|
||||
}
|
||||
|
||||
// Score / Coin — bright two-tone ding
|
||||
export function scoreSfx() {
|
||||
note("e5 b5").s("square")
|
||||
.fast(6).decay(0.1).sustain(0).gain(0.4)
|
||||
.lpf(4000).play();
|
||||
}
|
||||
|
||||
// Death / Fail — descending crushed notes
|
||||
export function deathSfx() {
|
||||
note("g4 e4 c4 a3").s("square")
|
||||
.fast(3).decay(0.2).sustain(0)
|
||||
.crush(8).gain(0.35).play();
|
||||
}
|
||||
|
||||
// Button Click — short noise burst
|
||||
export function clickSfx() {
|
||||
s("white").decay(0.02).sustain(0)
|
||||
.lpf(4000).gain(0.25).play();
|
||||
}
|
||||
|
||||
// Power Up — ascending arpeggio
|
||||
export function powerUpSfx() {
|
||||
note("c4 e4 g4 c5 e5").s("square")
|
||||
.fast(5).decay(0.12).sustain(0)
|
||||
.gain(0.35).lpf(5000).play();
|
||||
}
|
||||
|
||||
// Whoosh — filtered noise sweep
|
||||
export function whooshSfx() {
|
||||
s("white").hpf(1000).lpf(8000)
|
||||
.decay(0.25).sustain(0).gain(0.2)
|
||||
.pan(sine).play();
|
||||
}
|
||||
|
||||
// Hit / Damage — distorted low thump
|
||||
export function hitSfx() {
|
||||
note("c2").s("square")
|
||||
.fm(2).fmh(0.5).fmdecay(0.1)
|
||||
.decay(0.15).sustain(0)
|
||||
.distort(3).gain(0.3).play();
|
||||
}
|
||||
|
||||
// Menu Select — soft confirmation tone
|
||||
export function selectSfx() {
|
||||
note("c5").s("sine")
|
||||
.decay(0.2).sustain(0)
|
||||
.gain(0.3).room(0.2).play();
|
||||
}
|
||||
```
|
||||
|
||||
## Style Guidelines
|
||||
|
||||
### Retro / Chiptune (Flappy Bird, platformers)
|
||||
- Use `square` and `triangle` oscillators
|
||||
- Short `.decay()`, `.sustain(0)` for percussive feel
|
||||
- `.crush(8-12)` for lo-fi crunch
|
||||
- `.lpf(1000-3000)` to tame harshness
|
||||
- Simple melodies: pentatonic or major scale
|
||||
- Tempo: 120-160 cpm
|
||||
|
||||
### Ambient / Atmospheric (puzzle games, menus)
|
||||
- Use `sine` oscillators
|
||||
- Long `.attack()` and `.release()`
|
||||
- Heavy `.room()` and `.delay()`
|
||||
- Stacked chords with `.slow(4-8)`
|
||||
- Tempo: 60-80 cpm
|
||||
|
||||
### Intense / Action (boss fights, racing)
|
||||
- Use `sawtooth` with `.lpf()` sweeps
|
||||
- `.distort()` on bass
|
||||
- Fast drums: `s("bd bd sd bd, hh*16")`
|
||||
- `.every(4, fast(2))` for variation
|
||||
- Tempo: 140-180 cpm
|
||||
|
||||
### Minimal / Casual (mobile games)
|
||||
- Light percussion only: `s("hh*4, ~ sd")`
|
||||
- Sparse melody: mostly rests
|
||||
- `.gain(0.2-0.3)` — keep it quiet
|
||||
- Heavy `.room()` for space
|
||||
- Tempo: 90-110 cpm
|
||||
|
||||
## Volume Mixing
|
||||
|
||||
Game audio should never overpower gameplay. Use these gain levels as defaults:
|
||||
|
||||
| Element | Gain |
|
||||
|---------|------|
|
||||
| BGM Lead | 0.25-0.35 |
|
||||
| BGM Bass | 0.3-0.45 |
|
||||
| BGM Drums | 0.4-0.5 |
|
||||
| BGM Arp/Texture | 0.10-0.15 |
|
||||
| SFX (score, jump) | 0.3-0.4 |
|
||||
| SFX (death, hit) | 0.3-0.35 |
|
||||
| SFX (button, UI) | 0.2-0.25 |
|
||||
|
||||
## Integration Checklist
|
||||
|
||||
1. `npm install @strudel/web`
|
||||
2. Create `src/audio/AudioManager.js` with init/play/stop
|
||||
3. Create `src/audio/music.js` with BGM patterns for each scene
|
||||
4. Create `src/audio/sfx.js` with SFX patterns for each event
|
||||
5. Wire AudioManager to EventBus events
|
||||
6. Call `audioManager.init()` on first user interaction
|
||||
7. Add audio events to `EventBus.js` if needed (`MUSIC_START`, `MUSIC_STOP`)
|
||||
8. Add volume/mute config to `Constants.js`
|
||||
9. Test: music loops seamlessly, SFX are responsive, nothing clips
|
||||
|
||||
## Important Notes
|
||||
|
||||
- **Browser autoplay**: Audio MUST be initiated from a user click/tap. Always call `initStrudel()` inside a click handler.
|
||||
- **`hush()` stops everything**: When switching BGM, `hush()` kills all patterns including SFX. For independent control, use `.orbit(n)` to separate BGM and SFX buses, or time SFX to play after the new BGM starts.
|
||||
- **SFX latency**: Strudel's scheduler has ~50-150ms latency. For frame-precise SFX, consider using the Web Audio API directly for critical sounds.
|
||||
- **License**: Strudel is AGPL-3.0. Projects using it must be open source under a compatible license.
|
||||
- **No external audio files needed**: Everything is synthesized or uses built-in sample banks.
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
name: game-deploy
|
||||
description: Deploy browser games to GitHub Pages or other hosting. Use when deploying a game, setting up hosting, or publishing a game build.
|
||||
disable-model-invocation: true
|
||||
---
|
||||
|
||||
# Game Deployment
|
||||
|
||||
Deploy your browser game for public access.
|
||||
|
||||
## GitHub Pages Deployment
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- GitHub CLI installed (`gh`)
|
||||
- Git repository initialized and pushed to GitHub
|
||||
|
||||
### Quick Deploy
|
||||
|
||||
```bash
|
||||
npm run build && npx gh-pages -d dist
|
||||
```
|
||||
|
||||
### Full Setup
|
||||
|
||||
1. **Build the game**:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
2. **Ensure `vite.config.js` has the correct base path** if deploying to a subdirectory:
|
||||
|
||||
```js
|
||||
export default defineConfig({
|
||||
base: '/<repo-name>/',
|
||||
// ... rest of config
|
||||
});
|
||||
```
|
||||
|
||||
3. **Deploy with GitHub CLI**:
|
||||
|
||||
```bash
|
||||
gh repo create <game-name> --public --source=. --push
|
||||
npm install -D gh-pages
|
||||
npx gh-pages -d dist
|
||||
```
|
||||
|
||||
4. **Enable GitHub Pages** in repo settings (should auto-detect the `gh-pages` branch).
|
||||
|
||||
Your game is live at: `https://<username>.github.io/<repo-name>/`
|
||||
|
||||
### Automated Deploys
|
||||
|
||||
Add to `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"deploy": "npm run build && npx gh-pages -d dist"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Play.fun Registration
|
||||
|
||||
After deploying, register your game on Play.fun for monetization. Use the `/game-creator:playdotfun` skill for integration details.
|
||||
|
||||
The deployed URL becomes your `gameUrl` when registering:
|
||||
|
||||
```typescript
|
||||
await client.games.register({
|
||||
name: 'Your Game Name',
|
||||
gameUrl: 'https://<username>.github.io/<repo-name>/',
|
||||
maxScorePerSession: 500,
|
||||
maxSessionsPerDay: 20,
|
||||
maxCumulativePointsPerDay: 5000
|
||||
});
|
||||
```
|
||||
|
||||
## Other Hosting Options
|
||||
|
||||
- **Vercel**: `npx vercel --prod` (auto-detects Vite)
|
||||
- **Netlify**: Connect repo, set build command to `npm run build`, publish dir to `dist`
|
||||
- **Railway**: Use the Railway skill for deployment
|
||||
- **itch.io**: Upload the `dist/` folder as an HTML5 game
|
||||
|
||||
## Pre-Deploy Checklist
|
||||
|
||||
- [ ] `npm run build` succeeds with no errors
|
||||
- [ ] Test the production build with `npm run preview`
|
||||
- [ ] Remove any `console.log` debug statements
|
||||
- [ ] Verify all assets are included in the build
|
||||
- [ ] Check mobile/responsive behavior if applicable
|
||||
- [ ] Set appropriate `<title>` and meta tags in `index.html`
|
||||
@@ -0,0 +1,313 @@
|
||||
---
|
||||
name: game-designer
|
||||
description: Game UI/UX designer that analyzes and improves the visual polish, atmosphere, and player experience of browser games. Use when a game needs visual improvements, better backgrounds, particles, animations, screen transitions, juice/feel, or overall aesthetic upgrades.
|
||||
---
|
||||
|
||||
# Game UI/UX Designer
|
||||
|
||||
You are an expert game UI/UX designer specializing in browser games. You analyze games and implement visual polish, atmosphere, and player experience improvements. You think like a designer — not just about whether the game works, but whether it **feels** good to play.
|
||||
|
||||
## Philosophy
|
||||
|
||||
A scaffolded game is functional but visually flat. A designed game has:
|
||||
- **Atmosphere**: Backgrounds that set mood, not just flat colors
|
||||
- **Juice**: Screen shake, tweens, particles, flash effects on key moments
|
||||
- **Visual hierarchy**: The player's eye goes where it should
|
||||
- **Cohesive palette**: Colors that work together, not random hex values
|
||||
- **Satisfying feedback**: Every action has a visible (and audible) reaction
|
||||
- **Smooth transitions**: Scenes flow into each other, not jump-cut
|
||||
|
||||
## Design Process
|
||||
|
||||
When invoked, follow this process:
|
||||
|
||||
### Step 1: Audit the game
|
||||
|
||||
- Read `package.json` to identify the engine (Phaser or Three.js)
|
||||
- Read `src/core/Constants.js` to see the current color palette and config values
|
||||
- Read all scene files to understand the game flow and current visuals
|
||||
- Read entity files to understand the visual elements
|
||||
- Run the game mentally: what does the player see at each stage?
|
||||
- **If Playwright MCP is available**: Use `browser_navigate` to open the game, then `browser_take_screenshot` to capture each scene. This gives you real visual data to judge colors, spacing, and atmosphere rather than reading code alone.
|
||||
|
||||
### Step 2: Generate a design report
|
||||
|
||||
Evaluate these areas and score each 1-5:
|
||||
|
||||
| Area | What to look for |
|
||||
|------|-----------------|
|
||||
| **Background & Atmosphere** | Is it a flat color or a living world? Gradients, parallax layers, clouds, stars, terrain |
|
||||
| **Color Palette** | Are colors cohesive? Do they evoke the right mood? Contrast and readability |
|
||||
| **Animations & Tweens** | Do things move smoothly? Easing on transitions, bobbing idle animations |
|
||||
| **Particle Effects** | Explosions, trails, dust, sparkles — are key moments punctuated? |
|
||||
| **Screen Transitions** | Fade in/out, slide, zoom — or hard cuts between scenes? |
|
||||
| **Typography & HUD** | Score/health readable? Consistent font choices? Visual hierarchy? |
|
||||
| **Game Feel / Juice** | Screen shake on impact, flash on hit, scale pop on score, haptic feedback |
|
||||
| **Menu & Game Over** | Polished or placeholder? Buttons feel clickable? Clear call to action? |
|
||||
|
||||
Present the scores as a table, then list the top improvements ranked by visual impact.
|
||||
|
||||
### Step 3: Implement improvements
|
||||
|
||||
After presenting the report, implement the improvements. Follow these rules:
|
||||
|
||||
1. **All new values go in `Constants.js`** — new color palettes, sizes, timing values, particle counts
|
||||
2. **Use the EventBus** for triggering effects (e.g., `Events.SCREEN_SHAKE`, `Events.PARTICLES_EMIT`)
|
||||
3. **Don't break gameplay** — visual changes are additive, never alter collision, physics, or scoring
|
||||
4. **Prefer procedural graphics** — gradients, shapes, particles over external image assets
|
||||
5. **Add new events** to `EventBus.js` for any new visual systems
|
||||
6. **Create new files** in the appropriate directories (`systems/`, `entities/`, `ui/`)
|
||||
|
||||
## Visual Improvement Catalog
|
||||
|
||||
Reference these patterns when designing improvements. Apply what fits the game.
|
||||
|
||||
### Backgrounds & Atmosphere
|
||||
|
||||
#### Sky Gradient (Phaser)
|
||||
```js
|
||||
// In Constants.js
|
||||
export const SKY_CONFIG = {
|
||||
topColor: 0x4ec0ca,
|
||||
bottomColor: 0xa2d9e7,
|
||||
cloudCount: 6,
|
||||
cloudSpeed: 20,
|
||||
cloudAlpha: 0.6,
|
||||
cloudColors: [0xffffff, 0xf0f0f0, 0xe8e8e8],
|
||||
};
|
||||
|
||||
// Background system - create gradient + clouds
|
||||
const bg = scene.add.graphics();
|
||||
const { width, height } = GAME_CONFIG;
|
||||
for (let y = 0; y < height; y++) {
|
||||
const t = y / height;
|
||||
const r = Phaser.Math.Interpolation.Linear([(topColor >> 16) & 0xff, (bottomColor >> 16) & 0xff], t);
|
||||
const g = Phaser.Math.Interpolation.Linear([(topColor >> 8) & 0xff, (bottomColor >> 8) & 0xff], t);
|
||||
const b = Phaser.Math.Interpolation.Linear([topColor & 0xff, bottomColor & 0xff], t);
|
||||
bg.fillStyle(Phaser.Display.Color.GetColor(r, g, b), 1);
|
||||
bg.fillRect(0, y, width, 1);
|
||||
}
|
||||
```
|
||||
|
||||
#### Parallax Scrolling Clouds
|
||||
```js
|
||||
// Cloud entity — simple ellipse clusters that scroll
|
||||
class Cloud extends Phaser.GameObjects.Graphics {
|
||||
constructor(scene, x, y, scale) {
|
||||
super(scene);
|
||||
this.speed = SKY_CONFIG.cloudSpeed * scale;
|
||||
const color = Phaser.Utils.Array.GetRandom(SKY_CONFIG.cloudColors);
|
||||
this.fillStyle(color, SKY_CONFIG.cloudAlpha * scale);
|
||||
// Draw cloud as overlapping ellipses
|
||||
this.fillEllipse(0, 0, 60 * scale, 30 * scale);
|
||||
this.fillEllipse(25 * scale, -5 * scale, 50 * scale, 25 * scale);
|
||||
this.fillEllipse(-20 * scale, 5 * scale, 40 * scale, 20 * scale);
|
||||
this.setPosition(x, y);
|
||||
scene.add.existing(this);
|
||||
}
|
||||
update(delta) {
|
||||
this.x -= this.speed * (delta / 1000);
|
||||
if (this.x < -80) this.x = GAME_CONFIG.width + 80;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Starfield Background (Three.js)
|
||||
```js
|
||||
// For space/night games
|
||||
const starGeometry = new THREE.BufferGeometry();
|
||||
const starPositions = new Float32Array(STAR_COUNT * 3);
|
||||
for (let i = 0; i < STAR_COUNT; i++) {
|
||||
starPositions[i * 3] = (Math.random() - 0.5) * 200;
|
||||
starPositions[i * 3 + 1] = (Math.random() - 0.5) * 200;
|
||||
starPositions[i * 3 + 2] = -50 - Math.random() * 100;
|
||||
}
|
||||
starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
|
||||
```
|
||||
|
||||
### Color Palette Design
|
||||
|
||||
Use these approaches to create cohesive palettes:
|
||||
|
||||
```js
|
||||
// In Constants.js — define palette as a system, not individual colors
|
||||
export const PALETTE = {
|
||||
// Primary mood colors
|
||||
sky: { top: 0x4ec0ca, bottom: 0xa2d9e7 },
|
||||
// Game object colors with highlight/shadow variants
|
||||
primary: { base: 0xf5d742, light: 0xfce878, dark: 0xc4a820 },
|
||||
secondary: { base: 0x73bf2e, light: 0x8ad432, dark: 0x5a9a23 },
|
||||
danger: { base: 0xe84040, light: 0xff6060, dark: 0xb82020 },
|
||||
// UI colors
|
||||
ui: { text: '#ffffff', stroke: '#000000', panel: 0xdeb858, panelBorder: 0x846830 },
|
||||
// Ambient/atmosphere
|
||||
ambient: { cloud: 0xffffff, cloudShadow: 0xe0e0e0, ground: 0xded895, groundDark: 0xb8a850 },
|
||||
};
|
||||
```
|
||||
|
||||
### Juice & Game Feel
|
||||
|
||||
#### Screen Shake
|
||||
```js
|
||||
// Trigger via EventBus
|
||||
eventBus.on(Events.SCREEN_SHAKE, ({ intensity, duration }) => {
|
||||
scene.cameras.main.shake(duration, intensity);
|
||||
});
|
||||
```
|
||||
|
||||
#### Score Pop Animation
|
||||
```js
|
||||
// On score change — scale pop + optional floating text
|
||||
eventBus.on(Events.SCORE_CHANGED, ({ score }) => {
|
||||
// Pop the score text
|
||||
scene.tweens.add({
|
||||
targets: scoreText,
|
||||
scaleX: 1.4, scaleY: 1.4,
|
||||
duration: 80,
|
||||
yoyo: true,
|
||||
ease: 'Quad.easeOut',
|
||||
});
|
||||
// Floating "+1" text
|
||||
const floater = scene.add.text(birdX + 30, birdY - 20, '+1', {
|
||||
fontSize: '20px', fontFamily: 'Arial Black',
|
||||
color: '#ffff00', stroke: '#000000', strokeThickness: 3,
|
||||
}).setOrigin(0.5);
|
||||
scene.tweens.add({
|
||||
targets: floater,
|
||||
y: floater.y - 40,
|
||||
alpha: 0,
|
||||
duration: 600,
|
||||
ease: 'Quad.easeOut',
|
||||
onComplete: () => floater.destroy(),
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
#### Death Flash & Slow-Mo
|
||||
```js
|
||||
// On game over — white flash + brief time scale dip
|
||||
eventBus.on(Events.GAME_OVER, () => {
|
||||
scene.cameras.main.flash(200, 255, 255, 255);
|
||||
scene.cameras.main.shake(300, 0.015);
|
||||
// Brief slow-mo for dramatic effect
|
||||
scene.time.timeScale = 0.3;
|
||||
scene.time.delayedCall(400, () => { scene.time.timeScale = 1; });
|
||||
});
|
||||
```
|
||||
|
||||
#### Button Hover / Press Feel
|
||||
```js
|
||||
// Make buttons feel alive
|
||||
button.on('pointerover', () => {
|
||||
scene.tweens.add({ targets: button, scaleX: 1.08, scaleY: 1.08, duration: 100 });
|
||||
});
|
||||
button.on('pointerout', () => {
|
||||
scene.tweens.add({ targets: button, scaleX: 1, scaleY: 1, duration: 100 });
|
||||
});
|
||||
button.on('pointerdown', () => {
|
||||
scene.tweens.add({ targets: button, scaleX: 0.95, scaleY: 0.95, duration: 50 });
|
||||
});
|
||||
button.on('pointerup', () => {
|
||||
scene.tweens.add({ targets: button, scaleX: 1.08, scaleY: 1.08, duration: 50 });
|
||||
});
|
||||
```
|
||||
|
||||
### Particle Effects
|
||||
|
||||
#### Simple Particle Burst (Phaser — No Plugin)
|
||||
```js
|
||||
// For games without the particle plugin, use tweened sprites
|
||||
function emitBurst(scene, x, y, count, color) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
const angle = (Math.PI * 2 * i) / count + Math.random() * 0.3;
|
||||
const speed = 60 + Math.random() * 80;
|
||||
const particle = scene.add.circle(x, y, 3 + Math.random() * 3, color, 1);
|
||||
scene.tweens.add({
|
||||
targets: particle,
|
||||
x: x + Math.cos(angle) * speed,
|
||||
y: y + Math.sin(angle) * speed,
|
||||
alpha: 0,
|
||||
scale: 0.2,
|
||||
duration: 400 + Math.random() * 200,
|
||||
ease: 'Quad.easeOut',
|
||||
onComplete: () => particle.destroy(),
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Scene Transitions
|
||||
|
||||
#### Fade Transition
|
||||
```js
|
||||
// Fade out current scene, start next
|
||||
scene.cameras.main.fadeOut(300, 0, 0, 0);
|
||||
scene.cameras.main.once('camerafadeoutcomplete', () => {
|
||||
scene.scene.start('NextScene');
|
||||
});
|
||||
|
||||
// In the new scene's create():
|
||||
this.cameras.main.fadeIn(300, 0, 0, 0);
|
||||
```
|
||||
|
||||
#### Curtain Wipe
|
||||
```js
|
||||
// Black rectangle that slides across
|
||||
const curtain = scene.add.rectangle(0, GAME_CONFIG.height / 2, 0, GAME_CONFIG.height, 0x000000).setOrigin(0, 0.5).setDepth(1000);
|
||||
scene.tweens.add({
|
||||
targets: curtain,
|
||||
width: GAME_CONFIG.width,
|
||||
duration: 300,
|
||||
onComplete: () => scene.scene.start('NextScene'),
|
||||
});
|
||||
```
|
||||
|
||||
### Ground & Terrain Detail
|
||||
|
||||
#### Scrolling Ground with Texture Lines
|
||||
```js
|
||||
// Add visual detail to flat ground
|
||||
const ground = scene.add.graphics();
|
||||
ground.fillStyle(GROUND_CONFIG.color, 1);
|
||||
ground.fillRect(0, groundY, width, GROUND_CONFIG.height);
|
||||
// Grass tufts along the top edge
|
||||
ground.fillStyle(0x8ec63f, 1);
|
||||
for (let x = 0; x < width; x += 12) {
|
||||
const h = 4 + Math.random() * 6;
|
||||
ground.fillTriangle(x, groundY, x + 4, groundY - h, x + 8, groundY);
|
||||
}
|
||||
// Dirt line
|
||||
ground.lineStyle(2, GROUND_CONFIG.darkColor, 1);
|
||||
ground.lineBetween(0, groundY, width, groundY);
|
||||
```
|
||||
|
||||
## When NOT to Change
|
||||
|
||||
- **Physics values** (gravity, velocity, collision boxes) — those are gameplay, not design
|
||||
- **Scoring logic** — never alter point values or conditions
|
||||
- **Input handling** — don't change controls
|
||||
- **Game flow** (scene order, win/lose conditions) — don't restructure
|
||||
- **Spawn timing or difficulty curves** — gameplay balance, not visual
|
||||
|
||||
## Using Playwright MCP for Visual Inspection
|
||||
|
||||
If the Playwright MCP is available (`claude mcp add playwright npx '@playwright/mcp@latest'`), use it for a real visual audit:
|
||||
|
||||
1. **`browser_navigate`** to the game URL (e.g., `http://localhost:3000`)
|
||||
2. **`browser_take_screenshot`** — capture the menu scene and analyze colors, layout, atmosphere
|
||||
3. **`browser_press_key`** (Space) — start the game
|
||||
4. **`browser_take_screenshot`** — capture gameplay, check background, pipes, bird, score HUD
|
||||
5. Let the bird die, **`browser_take_screenshot`** — check game over screen polish
|
||||
6. **`browser_press_key`** (Space) — restart and verify transitions
|
||||
|
||||
This gives you real visual data to base your design audit on, rather than imagining the game from code alone. Screenshots let you judge color cohesion, visual hierarchy, and atmosphere with your own eyes.
|
||||
|
||||
## Output
|
||||
|
||||
After implementing, summarize what changed:
|
||||
1. List every file modified or created
|
||||
2. Show before/after for each visual area improved
|
||||
3. Note any new Constants, Events, or State added
|
||||
4. Suggest the user run the game to see the changes
|
||||
5. Recommend running `/game-creator:review-game` to verify nothing broke
|
||||
6. If MCP is available, take before/after screenshots to demonstrate the visual improvements
|
||||
@@ -0,0 +1,471 @@
|
||||
---
|
||||
name: game-qa
|
||||
description: Game QA testing with Playwright — visual regression, gameplay verification, performance, and accessibility for browser games
|
||||
---
|
||||
|
||||
# Game QA with Playwright
|
||||
|
||||
You are an expert QA engineer for browser games. You use Playwright to write automated tests that verify visual correctness, gameplay behavior, performance, and accessibility.
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- **Test Runner**: Playwright Test (`@playwright/test`)
|
||||
- **Visual Regression**: Playwright built-in `toHaveScreenshot()`
|
||||
- **Accessibility**: `@axe-core/playwright`
|
||||
- **Build Tool Integration**: Vite dev server via `webServer` config
|
||||
- **Language**: JavaScript ES modules
|
||||
|
||||
## Project Setup
|
||||
|
||||
When adding Playwright to a game project:
|
||||
|
||||
```bash
|
||||
npm install -D @playwright/test @axe-core/playwright
|
||||
npx playwright install chromium
|
||||
```
|
||||
|
||||
Add to `package.json` scripts:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"test": "npx playwright test",
|
||||
"test:ui": "npx playwright test --ui",
|
||||
"test:headed": "npx playwright test --headed",
|
||||
"test:update-snapshots": "npx playwright test --update-snapshots"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Required Directory Structure
|
||||
|
||||
```
|
||||
tests/
|
||||
├── e2e/
|
||||
│ ├── game.spec.js # Core game tests (boot, scenes, input, score)
|
||||
│ ├── visual.spec.js # Visual regression screenshots
|
||||
│ └── perf.spec.js # Performance and FPS tests
|
||||
├── fixtures/
|
||||
│ ├── game-test.js # Custom test fixture with game helpers
|
||||
│ └── screenshot.css # CSS to mask dynamic elements for visual tests
|
||||
├── helpers/
|
||||
│ └── seed-random.js # Seeded PRNG for deterministic game behavior
|
||||
playwright.config.js
|
||||
```
|
||||
|
||||
## Playwright Config
|
||||
|
||||
```js
|
||||
import { defineConfig, devices } from '@playwright/test';
|
||||
|
||||
export default defineConfig({
|
||||
testDir: './tests',
|
||||
fullyParallel: true,
|
||||
forbidOnly: !!process.env.CI,
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
workers: process.env.CI ? 1 : undefined,
|
||||
reporter: [['html', { open: 'never' }], ['list']],
|
||||
|
||||
use: {
|
||||
baseURL: 'http://localhost:3000',
|
||||
trace: 'on-first-retry',
|
||||
screenshot: 'only-on-failure',
|
||||
video: 'retain-on-failure',
|
||||
},
|
||||
|
||||
expect: {
|
||||
toHaveScreenshot: {
|
||||
maxDiffPixels: 200,
|
||||
threshold: 0.3,
|
||||
},
|
||||
},
|
||||
|
||||
projects: [
|
||||
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
|
||||
],
|
||||
|
||||
webServer: {
|
||||
command: 'npm run dev',
|
||||
url: 'http://localhost:3000',
|
||||
reuseExistingServer: !process.env.CI,
|
||||
timeout: 30000,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Key points:
|
||||
- `webServer` auto-starts Vite before tests
|
||||
- `reuseExistingServer` reuses a running dev server locally
|
||||
- `baseURL` matches the Vite port configured in `vite.config.js`
|
||||
- Screenshot tolerance is generous (games have minor render variance)
|
||||
|
||||
## Testability Requirements
|
||||
|
||||
For Playwright to inspect game state, the game MUST expose state on `window`. Add this to `main.js`:
|
||||
|
||||
```js
|
||||
import Phaser from 'phaser';
|
||||
import config from './core/GameConfig.js';
|
||||
import { gameState } from './core/GameState.js';
|
||||
import { eventBus, Events } from './core/EventBus.js';
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
// Expose for Playwright QA
|
||||
window.__GAME__ = game;
|
||||
window.__GAME_STATE__ = gameState;
|
||||
window.__EVENT_BUS__ = eventBus;
|
||||
window.__EVENTS__ = Events;
|
||||
```
|
||||
|
||||
For Three.js games, expose the `Game` orchestrator instance similarly.
|
||||
|
||||
## Custom Test Fixture
|
||||
|
||||
Create a reusable fixture with game-specific helpers:
|
||||
|
||||
```js
|
||||
import { test as base, expect } from '@playwright/test';
|
||||
|
||||
export const test = base.extend({
|
||||
gamePage: async ({ page }, use) => {
|
||||
await page.goto('/');
|
||||
// Wait for Phaser to boot and canvas to render
|
||||
await page.waitForFunction(() => {
|
||||
const g = window.__GAME__;
|
||||
return g && g.isBooted && g.canvas;
|
||||
}, null, { timeout: 10000 });
|
||||
await use(page);
|
||||
},
|
||||
});
|
||||
|
||||
export { expect };
|
||||
```
|
||||
|
||||
## Core Testing Patterns
|
||||
|
||||
### 1. Game Boot & Scene Flow
|
||||
|
||||
Test that the game initializes and scenes transition correctly.
|
||||
|
||||
```js
|
||||
import { test, expect } from '../fixtures/game-test.js';
|
||||
|
||||
test('game boots to menu scene', async ({ gamePage }) => {
|
||||
const sceneKey = await gamePage.evaluate(() => {
|
||||
return window.__GAME__.scene.getScenes(true)[0]?.scene?.key;
|
||||
});
|
||||
expect(sceneKey).toBe('MenuScene');
|
||||
});
|
||||
|
||||
test('menu transitions to game on input', async ({ gamePage }) => {
|
||||
await gamePage.keyboard.press('Space');
|
||||
await gamePage.waitForFunction(() => {
|
||||
const scenes = window.__GAME__.scene.getScenes(true);
|
||||
return scenes.some(s => s.scene.key === 'GameScene');
|
||||
});
|
||||
const sceneKey = await gamePage.evaluate(() => {
|
||||
return window.__GAME__.scene.getScenes(true)[0]?.scene?.key;
|
||||
});
|
||||
expect(sceneKey).toBe('GameScene');
|
||||
});
|
||||
```
|
||||
|
||||
### 2. Gameplay Verification
|
||||
|
||||
Test that game mechanics work — input affects state, scoring works, game over triggers.
|
||||
|
||||
```js
|
||||
test('bird flaps on space press', async ({ gamePage }) => {
|
||||
// Start game
|
||||
await gamePage.keyboard.press('Space');
|
||||
await gamePage.waitForFunction(() => window.__GAME_STATE__.started);
|
||||
|
||||
// Record position before flap
|
||||
const yBefore = await gamePage.evaluate(() => {
|
||||
const scene = window.__GAME__.scene.getScene('GameScene');
|
||||
return scene.bird.y;
|
||||
});
|
||||
|
||||
// Flap
|
||||
await gamePage.keyboard.press('Space');
|
||||
await gamePage.waitForTimeout(100);
|
||||
|
||||
// Bird should have moved up (lower y)
|
||||
const yAfter = await gamePage.evaluate(() => {
|
||||
const scene = window.__GAME__.scene.getScene('GameScene');
|
||||
return scene.bird.y;
|
||||
});
|
||||
expect(yAfter).toBeLessThan(yBefore);
|
||||
});
|
||||
|
||||
test('game over triggers on collision', async ({ gamePage }) => {
|
||||
await gamePage.keyboard.press('Space');
|
||||
await gamePage.waitForFunction(() => window.__GAME_STATE__.started);
|
||||
|
||||
// Don't flap — let bird fall to ground
|
||||
await gamePage.waitForFunction(
|
||||
() => window.__GAME_STATE__.gameOver,
|
||||
null,
|
||||
{ timeout: 10000 }
|
||||
);
|
||||
|
||||
expect(await gamePage.evaluate(() => window.__GAME_STATE__.gameOver)).toBe(true);
|
||||
});
|
||||
```
|
||||
|
||||
### 3. Scoring
|
||||
|
||||
```js
|
||||
test('score increments when passing pipes', async ({ gamePage }) => {
|
||||
await gamePage.keyboard.press('Space');
|
||||
await gamePage.waitForFunction(() => window.__GAME_STATE__.started);
|
||||
|
||||
// Keep flapping to survive
|
||||
const flapInterval = setInterval(async () => {
|
||||
await gamePage.keyboard.press('Space').catch(() => {});
|
||||
}, 300);
|
||||
|
||||
// Wait for at least 1 score
|
||||
await gamePage.waitForFunction(
|
||||
() => window.__GAME_STATE__.score > 0,
|
||||
null,
|
||||
{ timeout: 15000 }
|
||||
);
|
||||
|
||||
clearInterval(flapInterval);
|
||||
|
||||
const score = await gamePage.evaluate(() => window.__GAME_STATE__.score);
|
||||
expect(score).toBeGreaterThan(0);
|
||||
});
|
||||
```
|
||||
|
||||
### 4. Visual Regression
|
||||
|
||||
Screenshot-based tests to catch unintended visual changes.
|
||||
|
||||
```js
|
||||
test('menu scene renders correctly', async ({ gamePage }) => {
|
||||
// Wait a beat for animations to settle
|
||||
await gamePage.waitForTimeout(500);
|
||||
await expect(gamePage.locator('canvas')).toHaveScreenshot('menu-scene.png', {
|
||||
maxDiffPixels: 300,
|
||||
});
|
||||
});
|
||||
|
||||
test('game over scene renders correctly', async ({ gamePage }) => {
|
||||
await gamePage.keyboard.press('Space');
|
||||
await gamePage.waitForFunction(() => window.__GAME_STATE__.started);
|
||||
|
||||
// Let bird die
|
||||
await gamePage.waitForFunction(
|
||||
() => window.__GAME_STATE__.gameOver,
|
||||
null,
|
||||
{ timeout: 10000 }
|
||||
);
|
||||
|
||||
// Wait for game over scene
|
||||
await gamePage.waitForFunction(() => {
|
||||
const scenes = window.__GAME__.scene.getScenes(true);
|
||||
return scenes.some(s => s.scene.key === 'GameOverScene');
|
||||
});
|
||||
await gamePage.waitForTimeout(600); // transitions
|
||||
|
||||
await expect(gamePage.locator('canvas')).toHaveScreenshot('game-over-scene.png', {
|
||||
maxDiffPixels: 300,
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
**Masking dynamic elements** — use `screenshot.css` to hide particles, clouds, or animated elements that cause non-deterministic screenshots:
|
||||
|
||||
```css
|
||||
/* tests/fixtures/screenshot.css */
|
||||
/* No CSS rules needed for canvas games — canvas is opaque to CSS.
|
||||
Instead, use window.__TEST_MODE__ flag in game code to freeze animations. */
|
||||
```
|
||||
|
||||
### 5. Performance & FPS
|
||||
|
||||
```js
|
||||
test('game loads within 3 seconds', async ({ page }) => {
|
||||
const start = Date.now();
|
||||
await page.goto('/');
|
||||
await page.waitForFunction(() => {
|
||||
const g = window.__GAME__;
|
||||
return g && g.isBooted && g.canvas;
|
||||
});
|
||||
const loadTime = Date.now() - start;
|
||||
expect(loadTime).toBeLessThan(3000);
|
||||
});
|
||||
|
||||
test('game maintains 30+ FPS during gameplay', async ({ gamePage }) => {
|
||||
await gamePage.keyboard.press('Space');
|
||||
await gamePage.waitForFunction(() => window.__GAME_STATE__.started);
|
||||
|
||||
const avgFps = await gamePage.evaluate(() => {
|
||||
return new Promise((resolve) => {
|
||||
let frames = 0;
|
||||
const start = performance.now();
|
||||
function countFrame() {
|
||||
frames++;
|
||||
if (performance.now() - start < 2000) {
|
||||
requestAnimationFrame(countFrame);
|
||||
} else {
|
||||
resolve(frames / ((performance.now() - start) / 1000));
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(countFrame);
|
||||
});
|
||||
});
|
||||
|
||||
expect(avgFps).toBeGreaterThan(30);
|
||||
});
|
||||
```
|
||||
|
||||
### 6. Accessibility
|
||||
|
||||
Canvas games are inherently opaque to screen readers, but test the surrounding HTML:
|
||||
|
||||
```js
|
||||
import AxeBuilder from '@axe-core/playwright';
|
||||
|
||||
test('page has no accessibility violations', async ({ gamePage }) => {
|
||||
const results = await new AxeBuilder({ page: gamePage })
|
||||
.exclude('canvas')
|
||||
.analyze();
|
||||
expect(results.violations).toEqual([]);
|
||||
});
|
||||
```
|
||||
|
||||
## Deterministic Testing
|
||||
|
||||
For reproducible tests, seed the game's RNG before page load:
|
||||
|
||||
```js
|
||||
// tests/helpers/seed-random.js
|
||||
// Mulberry32 seeded PRNG — inject via page.addInitScript()
|
||||
(function() {
|
||||
let seed = 42;
|
||||
Math.random = function() {
|
||||
seed |= 0;
|
||||
seed = (seed + 0x6D2B79F5) | 0;
|
||||
let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
|
||||
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
|
||||
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
||||
};
|
||||
})();
|
||||
```
|
||||
|
||||
Use it in tests:
|
||||
|
||||
```js
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.addInitScript({ path: './tests/helpers/seed-random.js' });
|
||||
});
|
||||
```
|
||||
|
||||
Phaser also supports seeded RNG via config:
|
||||
|
||||
```js
|
||||
const config = {
|
||||
seed: ['qa-test-seed'],
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
## Clock Control for Frame-Precise Testing
|
||||
|
||||
Playwright's Clock API controls `requestAnimationFrame`, giving you frame-precise game control:
|
||||
|
||||
```js
|
||||
test('bird falls after 1 second without input', async ({ page }) => {
|
||||
await page.clock.install();
|
||||
await page.goto('/');
|
||||
await page.waitForFunction(() => window.__GAME__?.isBooted);
|
||||
|
||||
// Start game
|
||||
await page.keyboard.press('Space');
|
||||
await page.waitForFunction(() => window.__GAME_STATE__.started);
|
||||
|
||||
const yBefore = await page.evaluate(() => {
|
||||
return window.__GAME__.scene.getScene('GameScene').bird.y;
|
||||
});
|
||||
|
||||
// Advance exactly 1 second
|
||||
await page.clock.runFor(1000);
|
||||
|
||||
const yAfter = await page.evaluate(() => {
|
||||
return window.__GAME__.scene.getScene('GameScene').bird.y;
|
||||
});
|
||||
|
||||
expect(yAfter).toBeGreaterThan(yBefore); // bird fell
|
||||
});
|
||||
```
|
||||
|
||||
## When Adding QA to a Game
|
||||
|
||||
1. Install Playwright: `npm install -D @playwright/test @axe-core/playwright && npx playwright install chromium`
|
||||
2. Create `playwright.config.js` with the game's dev server port
|
||||
3. Expose `window.__GAME__`, `window.__GAME_STATE__`, `window.__EVENT_BUS__` in `main.js`
|
||||
4. Create `tests/fixtures/game-test.js` with the `gamePage` fixture
|
||||
5. Create `tests/helpers/seed-random.js` for deterministic behavior
|
||||
6. Write tests in `tests/e2e/`:
|
||||
- `game.spec.js` — boot, scene flow, input, scoring, game over
|
||||
- `visual.spec.js` — screenshot regression for each scene
|
||||
- `perf.spec.js` — load time, FPS budget
|
||||
7. Add npm scripts: `test`, `test:ui`, `test:headed`, `test:update-snapshots`
|
||||
8. Generate initial baselines: `npm run test:update-snapshots`
|
||||
|
||||
## Playwright MCP — Interactive Visual QA
|
||||
|
||||
In addition to automated tests, use the **Playwright MCP** for interactive visual inspection. This gives Claude direct browser control via a visible Chrome window.
|
||||
|
||||
### Setup
|
||||
|
||||
```bash
|
||||
claude mcp add playwright npx '@playwright/mcp@latest'
|
||||
```
|
||||
|
||||
### When to Use MCP vs Automated Tests
|
||||
|
||||
| Task | Use |
|
||||
|------|-----|
|
||||
| "Does this look right?" | **MCP** — take a screenshot, analyze visually |
|
||||
| "Did this change break boot flow?" | **Automated test** — assert scene transitions |
|
||||
| "Are the colors cohesive?" | **MCP** — screenshot + visual judgment |
|
||||
| "Does scoring still work?" | **Automated test** — assert gameState.score |
|
||||
| "How does the death animation feel?" | **MCP** — navigate, die, watch in real-time |
|
||||
| "Regression after refactor" | **Automated test** — run full suite |
|
||||
| "Check FPS on real browser" | **MCP** — headed browser gives accurate FPS |
|
||||
| "CI/CD gate" | **Automated test** — headless, pass/fail |
|
||||
| "Evaluate visual polish" | **MCP** — designer uses screenshots to judge atmosphere |
|
||||
| "Active gameplay screenshot" | **MCP** — animated scenes are unstable for automated screenshots |
|
||||
|
||||
### MCP Visual Inspection Flow
|
||||
|
||||
When using MCP for QA:
|
||||
|
||||
1. Navigate to the game URL with `browser_navigate`
|
||||
2. Take a screenshot with `browser_take_screenshot` — analyze the menu scene
|
||||
3. Click or press Space with `browser_click` or `browser_press_key` to start
|
||||
4. Take screenshots during gameplay to check visuals
|
||||
5. Let the bird die, take a screenshot of the game over screen
|
||||
6. Report findings with specific visual observations
|
||||
|
||||
### MCP + Automated: Best of Both
|
||||
|
||||
The recommended workflow is:
|
||||
|
||||
1. **Write automated tests** for all objective checks (boot, scenes, input, scoring, game over, regression)
|
||||
2. **Use MCP** for subjective visual evaluation (does it look good? feel right? color palette working?)
|
||||
3. Run automated tests in CI; run MCP inspections during design passes
|
||||
|
||||
## What NOT to Test (Automated)
|
||||
|
||||
- **Exact pixel positions** of animated objects (non-deterministic without clock control)
|
||||
- **Active gameplay screenshots** — moving objects make stable screenshots impossible; use MCP instead
|
||||
- **Audio playback** (Playwright has no audio inspection; test that audio objects exist via evaluate)
|
||||
- **Touch gestures on desktop** (test touch in mobile-emulated projects only)
|
||||
- **External API calls** unless mocked (e.g., Play.fun SDK — mock with `page.route()`)
|
||||
- **Subjective visual quality** — use MCP for "does this look good?" evaluations
|
||||
@@ -0,0 +1,289 @@
|
||||
---
|
||||
name: phaser-game
|
||||
description: Build 2D browser games with Phaser using scene-based architecture and centralized state. Use when creating a new 2D game, adding 2D game features, working with Phaser, or building sprite-based games.
|
||||
---
|
||||
|
||||
# Phaser Game Development
|
||||
|
||||
You are an expert Phaser game developer. Follow these opinionated patterns when building 2D browser games.
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- **Engine**: Phaser 3 (latest stable)
|
||||
- **Build Tool**: Vite
|
||||
- **Language**: JavaScript ES modules (no TypeScript unless requested)
|
||||
- **Package Manager**: npm
|
||||
|
||||
## Project Setup
|
||||
|
||||
When scaffolding a new Phaser game:
|
||||
|
||||
```bash
|
||||
mkdir <game-name> && cd <game-name>
|
||||
npm init -y
|
||||
npm install phaser
|
||||
npm install -D vite
|
||||
```
|
||||
|
||||
Create `vite.config.js`:
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
root: '.',
|
||||
publicDir: 'public',
|
||||
server: { port: 3000, open: true },
|
||||
build: { outDir: 'dist' }
|
||||
});
|
||||
```
|
||||
|
||||
Add to `package.json` scripts:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Required Architecture
|
||||
|
||||
Every Phaser game MUST use this directory structure:
|
||||
|
||||
```
|
||||
src/
|
||||
├── core/
|
||||
│ ├── GameConfig.js # Phaser config object + game creation
|
||||
│ ├── EventBus.js # Singleton pub/sub (same pattern as 3D games)
|
||||
│ ├── GameState.js # Centralized state singleton
|
||||
│ └── Constants.js # ALL config values, balance numbers, asset paths
|
||||
├── scenes/ # Phaser scenes
|
||||
│ ├── BootScene.js # Asset loading, progress bar
|
||||
│ ├── MenuScene.js # Main menu
|
||||
│ ├── GameScene.js # Main gameplay
|
||||
│ ├── UIScene.js # HUD overlay scene (runs parallel to GameScene)
|
||||
│ └── GameOverScene.js # End screen
|
||||
├── entities/ # Game objects
|
||||
│ ├── Player.js # Player sprite/physics
|
||||
│ └── ... # Enemies, projectiles, items, etc.
|
||||
├── systems/ # Game systems
|
||||
│ └── ... # Spawning, scoring, waves, etc.
|
||||
├── ui/ # UI components
|
||||
│ └── ... # Buttons, health bars, dialogs
|
||||
└── main.js # Entry point
|
||||
```
|
||||
|
||||
## Core Patterns (Non-Negotiable)
|
||||
|
||||
### 1. EventBus Singleton
|
||||
|
||||
Same EventBus pattern as Three.js games. ALL cross-scene and cross-system communication goes through EventBus. Scenes never reference each other directly.
|
||||
|
||||
```js
|
||||
class EventBus {
|
||||
constructor() { this.listeners = new Map(); }
|
||||
on(event, callback) {
|
||||
if (!this.listeners.has(event)) this.listeners.set(event, new Set());
|
||||
this.listeners.get(event).add(callback);
|
||||
return () => this.off(event, callback);
|
||||
}
|
||||
emit(event, data) {
|
||||
const cbs = this.listeners.get(event);
|
||||
if (cbs) cbs.forEach(cb => { try { cb(data); } catch (e) { console.error(`EventBus error [${event}]:`, e); } });
|
||||
}
|
||||
off(event, callback) {
|
||||
const cbs = this.listeners.get(event);
|
||||
if (cbs) { cbs.delete(callback); if (cbs.size === 0) this.listeners.delete(event); }
|
||||
}
|
||||
clear(event) { event ? this.listeners.delete(event) : this.listeners.clear(); }
|
||||
}
|
||||
export const eventBus = new EventBus();
|
||||
export const Events = { /* domain:action constants */ };
|
||||
```
|
||||
|
||||
### 2. Centralized GameState
|
||||
|
||||
```js
|
||||
import { PLAYER_CONFIG } from './Constants.js';
|
||||
|
||||
class GameState {
|
||||
constructor() {
|
||||
this.player = { health: PLAYER_CONFIG.health, score: 0 };
|
||||
this.game = { started: false, paused: false, level: 1 };
|
||||
}
|
||||
reset() { /* restore defaults */ }
|
||||
}
|
||||
export const gameState = new GameState();
|
||||
```
|
||||
|
||||
### 3. Constants File
|
||||
|
||||
```js
|
||||
export const PLAYER_CONFIG = { health: 100, speed: 200, jumpForce: -400 };
|
||||
export const ENEMY_CONFIG = { /* ... */ };
|
||||
export const GAME_CONFIG = { width: 800, height: 600, gravity: 800 };
|
||||
export const ASSET_KEYS = { /* sprite keys, audio keys */ };
|
||||
```
|
||||
|
||||
### 4. Phaser Config
|
||||
|
||||
```js
|
||||
import Phaser from 'phaser';
|
||||
import { GAME_CONFIG } from './Constants.js';
|
||||
import BootScene from '../scenes/BootScene.js';
|
||||
import MenuScene from '../scenes/MenuScene.js';
|
||||
import GameScene from '../scenes/GameScene.js';
|
||||
import UIScene from '../scenes/UIScene.js';
|
||||
import GameOverScene from '../scenes/GameOverScene.js';
|
||||
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: GAME_CONFIG.width,
|
||||
height: GAME_CONFIG.height,
|
||||
parent: 'game-container',
|
||||
pixelArt: true, // Enable for pixel art games (nearest-neighbor scaling)
|
||||
physics: {
|
||||
default: 'arcade',
|
||||
arcade: {
|
||||
gravity: { y: GAME_CONFIG.gravity },
|
||||
debug: false
|
||||
}
|
||||
},
|
||||
scene: [BootScene, MenuScene, GameScene, UIScene, GameOverScene],
|
||||
scale: {
|
||||
mode: Phaser.Scale.FIT,
|
||||
autoCenter: Phaser.Scale.CENTER_BOTH
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
||||
|
||||
## Scene Patterns
|
||||
|
||||
### Boot Scene (Asset Loading)
|
||||
|
||||
```js
|
||||
export default class BootScene extends Phaser.Scene {
|
||||
constructor() { super('BootScene'); }
|
||||
preload() {
|
||||
// Progress bar
|
||||
const bar = this.add.graphics();
|
||||
this.load.on('progress', (value) => {
|
||||
bar.clear();
|
||||
bar.fillStyle(0xffffff, 1);
|
||||
bar.fillRect(100, 290, 600 * value, 20);
|
||||
});
|
||||
// Load all assets here
|
||||
this.load.image('player', 'assets/player.png');
|
||||
this.load.spritesheet('player-run', 'assets/player-run.png', { frameWidth: 32, frameHeight: 32 });
|
||||
this.load.audio('bgm', 'assets/music.mp3');
|
||||
}
|
||||
create() { this.scene.start('MenuScene'); }
|
||||
}
|
||||
```
|
||||
|
||||
### Game Scene
|
||||
|
||||
```js
|
||||
import { eventBus, Events } from '../core/EventBus.js';
|
||||
import { gameState } from '../core/GameState.js';
|
||||
import Player from '../entities/Player.js';
|
||||
|
||||
export default class GameScene extends Phaser.Scene {
|
||||
constructor() { super('GameScene'); }
|
||||
create() {
|
||||
this.player = new Player(this, 400, 300);
|
||||
// Launch UI scene in parallel
|
||||
this.scene.launch('UIScene');
|
||||
// Listen for events
|
||||
this.unsubscribers = [
|
||||
eventBus.on(Events.PLAYER_DIED, () => this.handleGameOver())
|
||||
];
|
||||
gameState.game.started = true;
|
||||
gameState.game.paused = false;
|
||||
}
|
||||
update(time, delta) {
|
||||
if (gameState.game.paused) return;
|
||||
this.player.update(delta);
|
||||
}
|
||||
handleGameOver() {
|
||||
this.scene.stop('UIScene');
|
||||
this.scene.start('GameOverScene');
|
||||
}
|
||||
shutdown() {
|
||||
// Clean up event listeners
|
||||
this.unsubscribers.forEach(unsub => unsub());
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### UI Scene (Parallel Overlay)
|
||||
|
||||
Run the UI as a separate parallel scene so it overlays the game and has its own update loop:
|
||||
|
||||
```js
|
||||
export default class UIScene extends Phaser.Scene {
|
||||
constructor() { super('UIScene'); }
|
||||
create() {
|
||||
this.healthText = this.add.text(16, 16, '', { fontSize: '18px', fill: '#fff' });
|
||||
this.unsubscribers = [
|
||||
eventBus.on(Events.PLAYER_DAMAGED, () => this.updateHealth()),
|
||||
eventBus.on(Events.PLAYER_HEALED, () => this.updateHealth())
|
||||
];
|
||||
this.updateHealth();
|
||||
}
|
||||
updateHealth() {
|
||||
this.healthText.setText(`HP: ${gameState.player.health}`);
|
||||
}
|
||||
shutdown() { this.unsubscribers.forEach(unsub => unsub()); }
|
||||
}
|
||||
```
|
||||
|
||||
## Entity Pattern
|
||||
|
||||
Extend `Phaser.GameObjects.Sprite` or `Phaser.Physics.Arcade.Sprite`:
|
||||
|
||||
```js
|
||||
export default class Player extends Phaser.Physics.Arcade.Sprite {
|
||||
constructor(scene, x, y) {
|
||||
super(scene, x, y, 'player');
|
||||
scene.add.existing(this);
|
||||
scene.physics.add.existing(this);
|
||||
this.setCollideWorldBounds(true);
|
||||
this.cursors = scene.input.keyboard.createCursorKeys();
|
||||
}
|
||||
update(delta) {
|
||||
const speed = PLAYER_CONFIG.speed;
|
||||
this.setVelocityX(0);
|
||||
if (this.cursors.left.isDown) this.setVelocityX(-speed);
|
||||
else if (this.cursors.right.isDown) this.setVelocityX(speed);
|
||||
if (this.cursors.up.isDown && this.body.touching.down) {
|
||||
this.setVelocityY(PLAYER_CONFIG.jumpForce);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Performance Rules
|
||||
|
||||
- **Use object pooling** via `Phaser.GameObjects.Group` for bullets, enemies, particles
|
||||
- **Prefer spritesheets** over individual images
|
||||
- **Use texture atlases** for complex sprite collections
|
||||
- **Clean up event listeners** in scene `shutdown()`
|
||||
- **Use Arcade physics** unless you specifically need Matter.js complexity
|
||||
- **Set `pixelArt: true`** for pixel art games to avoid blurry scaling
|
||||
|
||||
## When Adding Features
|
||||
|
||||
1. Create entity in `entities/` or system in `systems/`
|
||||
2. Define new events in `EventBus.js` Events enum
|
||||
3. Add configuration to `Constants.js`
|
||||
4. Add state to `GameState.js` if needed
|
||||
5. Wire up in the appropriate Scene
|
||||
6. Communicate with other systems ONLY through EventBus
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../skills/skills
|
||||
@@ -0,0 +1,240 @@
|
||||
---
|
||||
name: threejs-game
|
||||
description: Build 3D browser games with Three.js using event-driven modular architecture. Use when creating a new 3D game, adding 3D game features, setting up Three.js scenes, or working on any Three.js game project.
|
||||
---
|
||||
|
||||
# Three.js Game Development
|
||||
|
||||
You are an expert Three.js game developer. Follow these opinionated patterns when building 3D browser games.
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- **Renderer**: Three.js (latest stable, ESM imports)
|
||||
- **Build Tool**: Vite
|
||||
- **Language**: JavaScript ES modules (no TypeScript unless requested)
|
||||
- **Package Manager**: npm
|
||||
|
||||
## Project Setup
|
||||
|
||||
When scaffolding a new Three.js game:
|
||||
|
||||
```bash
|
||||
mkdir <game-name> && cd <game-name>
|
||||
npm init -y
|
||||
npm install three
|
||||
npm install -D vite
|
||||
```
|
||||
|
||||
Create `vite.config.js`:
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
root: '.',
|
||||
publicDir: 'public',
|
||||
server: { port: 3000, open: true },
|
||||
build: { outDir: 'dist' }
|
||||
});
|
||||
```
|
||||
|
||||
Add to `package.json` scripts:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Required Architecture
|
||||
|
||||
Every Three.js game MUST use this directory structure:
|
||||
|
||||
```
|
||||
src/
|
||||
├── core/
|
||||
│ ├── Game.js # Main orchestrator - init systems, render loop
|
||||
│ ├── EventBus.js # Singleton pub/sub for all module communication
|
||||
│ ├── GameState.js # Centralized state singleton
|
||||
│ └── Constants.js # ALL config values, balance numbers, asset paths
|
||||
├── systems/ # Low-level engine systems
|
||||
│ ├── InputSystem.js # Keyboard/mouse/gamepad input
|
||||
│ ├── PhysicsSystem.js # Collision detection
|
||||
│ └── ... # Audio, particles, etc.
|
||||
├── gameplay/ # Game mechanics
|
||||
│ └── ... # Player, enemies, weapons, etc.
|
||||
├── level/ # Level/world building
|
||||
│ ├── LevelBuilder.js # Constructs the game world
|
||||
│ └── AssetLoader.js # Loads models, textures, audio
|
||||
├── ui/ # User interface
|
||||
│ └── ... # Menus, HUD, overlays
|
||||
└── main.js # Entry point - creates Game instance
|
||||
```
|
||||
|
||||
## Core Patterns (Non-Negotiable)
|
||||
|
||||
### 1. EventBus Singleton
|
||||
|
||||
ALL inter-module communication goes through an EventBus. Modules never import each other directly for communication.
|
||||
|
||||
```js
|
||||
class EventBus {
|
||||
constructor() { this.listeners = new Map(); }
|
||||
on(event, callback) {
|
||||
if (!this.listeners.has(event)) this.listeners.set(event, new Set());
|
||||
this.listeners.get(event).add(callback);
|
||||
return () => this.off(event, callback);
|
||||
}
|
||||
once(event, callback) {
|
||||
const wrapper = (...args) => { this.off(event, wrapper); callback(...args); };
|
||||
this.on(event, wrapper);
|
||||
}
|
||||
off(event, callback) {
|
||||
const cbs = this.listeners.get(event);
|
||||
if (cbs) { cbs.delete(callback); if (cbs.size === 0) this.listeners.delete(event); }
|
||||
}
|
||||
emit(event, data) {
|
||||
const cbs = this.listeners.get(event);
|
||||
if (cbs) cbs.forEach(cb => { try { cb(data); } catch (e) { console.error(`EventBus error [${event}]:`, e); } });
|
||||
}
|
||||
clear(event) { event ? this.listeners.delete(event) : this.listeners.clear(); }
|
||||
}
|
||||
|
||||
export const eventBus = new EventBus();
|
||||
|
||||
// Define ALL events as constants
|
||||
export const Events = {
|
||||
// Group by domain: player:*, enemy:*, game:*, ui:*, etc.
|
||||
};
|
||||
```
|
||||
|
||||
### 2. Centralized GameState
|
||||
|
||||
One singleton holds ALL game state. Systems read from it, events update it.
|
||||
|
||||
```js
|
||||
class GameState {
|
||||
constructor() {
|
||||
this.player = { health: 100, /* ... */ };
|
||||
this.combat = { /* wave/enemy tracking */ };
|
||||
this.game = { started: false, paused: false, isPlaying: false, menuState: 'main' };
|
||||
this.setupEventListeners();
|
||||
}
|
||||
setupEventListeners() { /* subscribe to events that modify state */ }
|
||||
reset() { /* restore all state to defaults */ }
|
||||
}
|
||||
export const gameState = new GameState();
|
||||
```
|
||||
|
||||
### 3. Constants File
|
||||
|
||||
Every magic number, balance value, asset path, and configuration goes in `Constants.js`. Never hardcode values in game logic.
|
||||
|
||||
```js
|
||||
export const PLAYER_CONFIG = { health: 100, speed: 5, /* ... */ };
|
||||
export const ENEMY_CONFIG = { /* ... */ };
|
||||
export const ASSET_PATHS = { /* ... */ };
|
||||
```
|
||||
|
||||
### 4. Game.js Orchestrator
|
||||
|
||||
The Game class initializes everything and runs the render loop:
|
||||
|
||||
```js
|
||||
class Game {
|
||||
constructor() {
|
||||
this.scene = null;
|
||||
this.camera = null;
|
||||
this.renderer = null;
|
||||
this.clock = new THREE.Clock();
|
||||
this.init();
|
||||
}
|
||||
init() {
|
||||
this.setupRenderer();
|
||||
this.setupScene();
|
||||
this.setupCamera();
|
||||
this.setupSystems();
|
||||
this.setupUI();
|
||||
this.setupEventListeners();
|
||||
this.animate();
|
||||
}
|
||||
setupRenderer() {
|
||||
this.renderer = new THREE.WebGLRenderer({ antialias: false, powerPreference: 'high-performance' });
|
||||
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
document.getElementById('game-container').appendChild(this.renderer.domElement);
|
||||
window.addEventListener('resize', () => this.onWindowResize());
|
||||
}
|
||||
animate() {
|
||||
requestAnimationFrame(() => this.animate());
|
||||
const delta = Math.min(this.clock.getDelta(), 0.1); // Cap delta to prevent spiral
|
||||
// Update all systems with delta
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Performance Rules
|
||||
|
||||
- **Cap delta time**: `Math.min(clock.getDelta(), 0.1)` to prevent death spirals
|
||||
- **Object pooling**: Reuse `Vector3`, `Box3`, temp objects in hot loops to minimize GC
|
||||
- **Disable shadows** unless specifically needed and performant
|
||||
- **Use `powerPreference: 'high-performance'`** on the renderer
|
||||
- **Dispose properly**: Call `.dispose()` on geometries, materials, textures when removing objects
|
||||
- **Frustum culling**: Let Three.js handle it (enabled by default) but set bounding spheres on custom geometry
|
||||
|
||||
## Asset Loading
|
||||
|
||||
- Place static assets in `/public/` for Vite
|
||||
- Use GLB format for 3D models (smaller, single file)
|
||||
- Use `THREE.TextureLoader`, `GLTFLoader` from `three/addons`
|
||||
- Show loading progress via callbacks to UI
|
||||
|
||||
## Common Three.js Setup
|
||||
|
||||
```js
|
||||
// Scene with fog
|
||||
this.scene = new THREE.Scene();
|
||||
this.scene.fog = new THREE.FogExp2(0x000000, 0.04);
|
||||
|
||||
// Camera
|
||||
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 100);
|
||||
|
||||
// Lighting - always add ambient + directional minimum
|
||||
this.scene.add(new THREE.AmbientLight(0x404040, 0.5));
|
||||
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
|
||||
dirLight.position.set(5, 10, 5);
|
||||
this.scene.add(dirLight);
|
||||
```
|
||||
|
||||
## Input Handling
|
||||
|
||||
Use a dedicated InputSystem singleton that maps raw inputs to game actions:
|
||||
|
||||
```js
|
||||
class InputSystem {
|
||||
constructor() {
|
||||
this.keys = {};
|
||||
this.actions = new Map();
|
||||
document.addEventListener('keydown', e => this.keys[e.code] = true);
|
||||
document.addEventListener('keyup', e => this.keys[e.code] = false);
|
||||
}
|
||||
isPressed(code) { return !!this.keys[code]; }
|
||||
onAction(name, callback) { this.actions.set(name, callback); }
|
||||
}
|
||||
export const inputSystem = new InputSystem();
|
||||
```
|
||||
|
||||
## When Adding Features
|
||||
|
||||
1. Create a new module in the appropriate `src/` subdirectory
|
||||
2. Define new events in `EventBus.js` Events enum
|
||||
3. Add configuration to `Constants.js`
|
||||
4. Add state to `GameState.js` if needed
|
||||
5. Wire it up in `Game.js` orchestrator
|
||||
6. Communicate with other systems ONLY through EventBus
|
||||
Reference in New Issue
Block a user