Asteroid Dodger

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.