🍭 Sugar Rush Game Component

An interactive canvas-based game where you control a player (circle) by moving your mouse to collect sugary treats while avoiding healthy foods!

How to Play

• Move your mouse to control the yellow player circle
• Collect sugar items (🍭 🧁 🥤) to gain health (+1 each, max 5)
• Avoid healthy foods (🥦 🥕 🥒) which damage you (-1 health each)
• Clear all sugar from the level to advance
• Game over when health reaches 0 - but don't worry, you'll restart!

Each level increases the number of items and the healthy:sugar ratio, making it progressively more challenging.

Demo

Features

• Canvas-based rendering with smooth 60fps animation
• Physics simulation with bouncing items that reflect off walls
• Progressive difficulty - each level adds more items
• Responsive design - adapts to container size
• Clean HUD showing level, remaining sugar count, and health hearts

Technical Implementation

This component is built as a vanilla Web Component extending HTMLElement:

• No shadow DOM - injects a canvas directly
• requestAnimationFrame main loop for smooth animation
• Euclidean distance collision detection
• Item physics with velocity-based movement and edge bouncing
• Level progression system with configurable item counts

The component automatically registers as <sugar-rush> and can be embedded anywhere in your content.