Files

82 lines
7.2 KiB
Markdown
Raw Permalink Normal View History

# Progress
## Game Concept
- **Name**: example-game (Asteroid Dodger)
- **Engine**: Phaser 3
- **Description**: Asteroid Dodger — dodge falling asteroids in a spaceship. Side-to-side movement at bottom of screen, asteroids fall from top with increasing speed and frequency, collision = death, score increases by dodging.
## Step 1: Scaffold
- **Entities**: Ship (src/entities/Ship.js), Asteroid (src/entities/Asteroid.js)
- **Events**: ship:move, ship:hit, asteroid:spawn, asteroid:passed, game:start, game:over, game:restart, score:changed, particles:emit, audio:init, music:menu, music:gameplay, music:gameover, music:stop
- **Constants keys**: GAME (dimensions), SAFE_ZONE (Play.fun widget), SHIP (size/speed/position/colors), ASTEROID (radius/speed/spawn/pool/colors), SCORING (points per dodge), STARS (background starfield), COLORS (space theme + UI), UI (fonts/buttons), TRANSITION (fade durations)
- **Scoring system**: +1 point for each asteroid that passes the bottom of the screen without hitting the ship. Difficulty scales with score: asteroid speed increases by SPEED_PER_SCORE per point, spawn interval decreases by SPAWN_INTERVAL_PER_SCORE ms per point, both capped.
- **Fail condition**: Ship collides with any asteroid -> game over -> camera shake -> transition to GameOverScene
- **Input scheme**: Mobile-first tap zones (left half = move left, right half = move right) + keyboard (arrow keys / A+D). No jump — horizontal movement only.
## Decisions / Known Issues
- No gravity system: Ship stays fixed at Y position near bottom, asteroids use explicit downward velocity instead of global gravity
- Asteroid pool size of 30 prevents runaway object creation at high difficulty
- Ship hitbox shrunk to 70% for forgiving collision feel
- Asteroid textures are procedurally generated (5 variants) with jagged circles and craters
- Scrolling starfield background for space atmosphere
- Score system wired via EventBus: asteroid deactivates at bottom -> emits asteroid:passed -> ScoreSystem increments -> emits score:changed
- isMuted added to GameState for future audio integration
- No title screen — boots directly into gameplay per conventions
- No in-game score HUD — Play.fun widget handles display
## Step 1.5: Assets
- **Palette**: DARK (space-themed) with 16 colors: dark outline, shadow, red accent, gold highlight, ship blue, cockpit cyan, engine orange, white, purple (nebula), rock browns (3 shades), gray-blue metal, bright orange/yellow (explosion)
- **Sprites created**:
- `src/sprites/palette.js` — DARK palette (16 colors, index 0 = transparent)
- `src/sprites/ship.js` — 16x16 spaceship, 2 frames (engine flicker: normal glow + bright glow). Pointed nose, widening body, side fins, cockpit window, rear engine exhaust
- `src/sprites/asteroids.js` — 16x16 asteroid rocks, 4 variants (round boulder, tall angular, wide flat, small irregular). Each has craters (dark/light spots) and jagged edges
- `src/sprites/explosion.js` — 8x8 explosion effect, 3 frames (small burst, medium fireball, fading smoke). Plays on ship-asteroid collision
- `src/sprites/tiles.js` — 16x16 star cluster tiles (3 variants: sparse/dense/faint), 8x8 nebula decorations (2 variants: purple wisp, blue wisp)
- **Renderer**: `src/core/PixelRenderer.js``renderPixelArt()` for static textures, `renderSpriteSheet()` for animated spritesheets
- **Dimension changes**: Sprite scale is dynamically computed from Constants values (SHIP.WIDTH/HEIGHT, ASTEROID.MAX_RADIUS) so no Constants changes were needed. Ship uses `setDisplaySize(SHIP.WIDTH, SHIP.HEIGHT)`. Asteroids use `setDisplaySize(radius*2, radius*2)`.
- **Animations**: Ship has `ship-engine` animation (2 frames, 8fps, looping). Explosion has `explosion-anim` (3 frames, 10fps, plays once on collision).
- **Physics bodies**: Ship hitbox set to 70% of display size with centered offset. Asteroid hitbox set to circular 70% of radius for forgiving collision.
- **Background layers**: Gradient (-100) -> pixel star tiles (-95, scattered 40% density, alpha 0.4-0.8) -> nebula wisps (-92, 15-25 scattered, alpha 0.15-0.35) -> scrolling dot stars (-90) -> entities (default) -> explosion (50)
- **No raw fillCircle/generateTexture calls remain** in entity constructors — all replaced with PixelRenderer
## Step 2: Design
- **Visual audit scores** (before/after):
- Background & Atmosphere: 4/5 (unchanged — already strong)
- Color Palette: 4/5 (unchanged — cohesive DARK theme)
- Animations & Tweens: 2 -> 4/5 (added ship tilt, title bounce, score count-up, button entrance)
- Particle Effects: 1 -> 4/5 (added engine trail, death burst, asteroid debris, score sparkles)
- Screen Transitions: 3 -> 5/5 (added slow-mo death, screen flash, fade-out before scene switch)
- Typography: 3 -> 4/5 (floating "+1" score text, "NEW BEST!" indicator, hint text)
- Game Feel / Juice: 2 -> 5/5 (screen shake, screen flash, slow-mo, ship tilt, floating text, particles everywhere)
- Game Over: 3 -> 5/5 (title drop-bounce entrance, score count-up, button slide-in with glow, ambient floating particles, "NEW BEST!" pulse)
- **New effects added**:
- **Engine trail particles** — orange/gold particles stream from ship exhaust, throttled to ~20 emissions/sec for performance
- **Ship tilt** — ship rotates toward movement direction (~11 degrees), smooth lerp interpolation
- **Floating score text** — gold "+1" floats up and fades at the asteroid's exit position when scored
- **Score sparkle particles** — 5 gold particles burst at score location
- **Asteroid debris particles** — 6 rock-colored particles burst when asteroid exits screen bottom
- **Death explosion burst** — 16 multi-colored particles (orange, gold, red, white) at collision point
- **Screen shake** — 300ms, intensity 0.02, triggered via SCREEN_SHAKE event on death
- **Screen flash** — 250ms white flash on death via SCREEN_FLASH event
- **Slow-mo death** — time scale drops to 0.3 for 500ms, then restores before fade-out transition
- **Smooth death transition** — fade-out (350ms) instead of hard cut to GameOverScene
- **Title drop-bounce** — "GAME OVER" drops in with Bounce.easeOut ease (600ms)
- **Score count-up** — score counts from 0 to final value over 800ms with pulse at end
- **Button slide-in** — "PLAY AGAIN" slides up with Back.easeOut after 600ms delay
- **Button hover glow** — purple glow effect appears behind button on hover
- **"NEW BEST!" indicator** — pulsing gold text when current score equals best score
- **Ambient game over particles** — 20 floating particles drift upward on game over screen
- **Hint text** — "or press SPACE" fades in below the button
- **New files created**:
- `src/systems/VisualEffects.js` — centralized particle and screen effect system, all EventBus-driven
- **New Constants sections**: PARTICLES (engine trail, debris, death burst, score sparkle), EFFECTS (shake, flash, slow-mo, float text, ship tilt), GAMEOVER_UI (animation timings, button glow, ambient particles)
- **New Events**: `screen:shake`, `screen:flash`, `float:text`, `engine:trail`
- **Files modified**: Constants.js, EventBus.js, GameScene.js, GameOverScene.js, Ship.js, ScoreSystem.js
- **No gameplay changes**: Physics, scoring, collision, spawn timing, and input all untouched. All changes are purely visual/additive.