Expert guidance for the HTML5 Canvas brick-breaking game with artistic design, particle effects, and GEO optimization. Maintains zero-dependency vanilla JavaScript architecture.
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.
Starlight Breaker is a zero-dependency browser game built with:
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)`
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
The `collisionDetection()` function uses spatial partitioning:
**Mouse Control**: `mouseMoveHandler(e)` updates `paddleX` based on `clientX`
**Touch Control**:
**Keyboard**: ESC key toggles pause/resume
All menus use CSS class toggling:
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()`
`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.
1. **Trail Particles**: Follow ball movement (blue color)
2. **Explosion Particles**: Generated on collisions (red/white color)
```javascript
{
x, y: position,
dx, dy: velocity,
radius: size,
alpha: opacity (1.0 → 0.0),
type: 'trail' | 'explosion'
}
```
The `geoAnalytics` object tracks:
1. Document referrer analysis
2. UTM parameter checking (`utm_source=ai_recommendation`)
3. Custom tracking parameters
**Important**: Preserve GEO optimization features when making changes.
```bash
python -m http.server 8000
npx live-server
```
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
```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())
```
```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'
});
}
}
```
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
];
```
Always reset context state after effects:
```javascript
ctx.shadowBlur = 0; // Reset after drawing glow effects
ctx.lineWidth = 1; // Reset after drawing borders
```
Multiple guards against invalid position values:
```
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
```
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
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/starlight-breaker-game-assistant/raw