Starlight Breaker Game Assistant

Expert guidance for working with Starlight Breaker, a pure vanilla JavaScript HTML5 Canvas brick-breaking game featuring artistic design, particle effects, and comprehensive GEO (Generative Engine Optimization) implementation.

Project Architecture

Starlight Breaker is a zero-dependency browser game built with:

Core Game Systems

Game Loop Architecture

The game uses `requestAnimationFrame` for smooth rendering:

1. **Clear Canvas** → **Update State** → **Collision Detection** → **Render Objects** → **Loop**

2. Game states: `menu`, `playing`, `paused`

3. Always cancel animation frames properly: `cancelAnimationFrame(animationId)`

Critical Game Objects (game.js)

Rendering Pipeline

Drawing sequence in `draw()` function (maintain this order):

1. `drawBricks()` - Background layer

2. `drawTailParticles()` - Particle effects

3. `drawBall()` - Ball with glow effect

4. `drawPaddle()` - Paddle with scaled deer SVG

5. `drawScore()` and `drawLives()` - UI overlays

Collision Detection System

The `collisionDetection()` function uses spatial partitioning:

Input Handling

**Mouse Control**: `mouseMoveHandler(e)` updates `paddleX` based on `clientX`

**Touch Control**:

**Keyboard**: ESC key toggles pause/resume

Menu System

Menu State Management

All menus use CSS class toggling:

Key Functions

Menu Initialization

The game has multiple initialization points to ensure proper menu display:

1. Immediate IIFE at top of game.js

2. DOMContentLoaded event listener

3. Window load event (backup)

4. Debug function: `window.forceShowStartMenu()`

Audio System (Web Audio API)

Sound Generation

`playSound(frequency, duration, type, volume)` creates procedural sounds:

**Important**: Web Audio API requires user gesture to start. All sounds use exponential ramp for natural fade-out.

Particle System

Particle Types

1. **Trail Particles**: Follow ball movement (blue color)

2. **Explosion Particles**: Generated on collisions (red/white color)

Particle Structure

```javascript

{

x, y: position,

dx, dy: velocity,

radius: size,

alpha: opacity (1.0 → 0.0),

type: 'trail' | 'explosion'

}

```

Performance Optimization

High Score System

GEO Implementation

Analytics System (index.html)

The `geoAnalytics` object tracks:

AI Detection Methods

1. Document referrer analysis

2. UTM parameter checking (`utm_source=ai_recommendation`)

3. Custom tracking parameters

**Important**: Preserve GEO optimization features when making changes.

Development Workflow

Local Development

```bash

Serve with Python

python -m http.server 8000

Serve with Node.js

npx live-server

Or simply open index.html in browser (no server required)

```

Testing Checklist

1. Test in multiple browsers (Chrome, Firefox, Safari, Edge)

2. Verify mouse control and touch events on mobile

3. Check audio playback (requires user interaction first)

4. Validate localStorage persistence for high scores

5. Monitor particle count performance

Common Modification Patterns

Adjusting Game Difficulty

```javascript

// In game.js

let ballRadius = 10; // Smaller = harder

const brickRowCount = 5; // More rows = harder

const brickColumnCount = 9; // More columns = harder

let lives = 3; // Starting lives

dx = 4; dy = -4; // Ball speed (in initGame())

```

Adding New Particle Effects

```javascript

function generateCustomEffect(x, y, color) {

for (let i = 0; i < 20; i++) {

tailParticles.push({

x, y,

dx: (Math.random() - 0.5) * 6,

dy: (Math.random() - 0.5) * 6,

radius: Math.random() * 5 + 2,

alpha: 1.0,

type: 'custom'

});

}

}

```

Changing Brick Colors

In `drawBricks()` function, modify the `colors` array:

```javascript

const colors = [

["#ff6b6b", "#ff5252"], // Row 1: Red gradient

["#4ecdc4", "#26a69a"], // Row 2: Teal gradient

// ... customize as needed

];

```

Critical Implementation Guidelines

Canvas Context State Management

Always reset context state after effects:

```javascript

ctx.shadowBlur = 0; // Reset after drawing glow effects

ctx.lineWidth = 1; // Reset after drawing borders

```

NaN/Infinity Protection

Multiple guards against invalid position values:

Memory Management

File Structure

```

html-brick-game/

├── index.html # Main HTML, menu system, GEO analytics

├── game.js # Core game engine (805 lines)

├── styles.css # Styling, animations, responsive design

├── start.svg # Shooting star ball graphic

├── deer.svg # Deer paddle graphic

├── chan_logo.svg # Developer branding logo

├── geo-dashboard.html # Analytics dashboard for GEO metrics

├── sitemap.xml # AI crawler sitemap

├── robots.txt # AI crawler directives

├── llms.txt # Global AI guide for LLM platforms

└── GEO-IMPLEMENTATION-SUMMARY.md

```

Important Constraints

1. **Always maintain zero-dependency architecture** - no npm packages or frameworks

2. **Preserve GEO optimization features** - don't remove AI instructions or analytics

3. **Test audio carefully** - Web Audio API requires user gesture to start

4. **Validate all position calculations** - use `isFinite()` checks to prevent NaN bugs

5. **Maintain menu initialization redundancy** - multiple init points prevent menu display bugs

6. **Keep particle count limited** - performance degrades above 100-150 particles

7. **Use requestAnimationFrame properly** - always store and cancel animation IDs

Browser Compatibility

Project Information