An engaging endless balloon shooting game with multiple mechanics, scoring systems, and performance optimizations.
- Multiple Balloon Types: Solid, striped, dotted.
- Different Movement Patterns: Straight, zigzag, sine wave.
- Behavior:
- Continuous flow from bottom to top.
- Auto-respawns when popped or reaches the top.
- Random sizes (30-50px).
- Random colors from a predefined palette.
- Points based on size (smaller = more points).
- Click-to-shoot projectiles traveling upward.
- Collision detection with balloons.
- Red projectile visualization.
- Custom crosshair following the mouse.
- Base points per balloon.
- Combo multiplier system.
- High score tracking with localStorage.
- Combo timeout (2 seconds).
Creates new balloon objects.
- Parameters:
yPos(starting Y position). - Properties:
- Random pattern, direction, size, color.
- Calculated points.
- Movement parameters (amplitude, frequency, phase).
Renders balloons with different patterns.
- Patterns:
- Solid: Single color fill.
- Striped: Gradient effect.
- Dotted: Base color with white dots.
Main game loop handling:
- Canvas clearing.
- Balloon movement.
- Projectile updates.
- Collision detection.
- Score updates.
- Drawing all elements.
- Tracks mouse position.
- Updates crosshair position.
- Creates new projectiles.
- Handles game restart.
- Score Display:
- Current score.
- Combo multiplier.
- High score.
- Visual Elements:
- Custom crosshair.
- Projectile trails.
- Balloon patterns.
- Background.
- Responsive sizing.
- Window resize handling.
- Efficient clearing and redrawing.
- Game state tracking.
- Score persistence.
- Balloon array management.
- Projectile tracking.
requestAnimationFramefor smooth animation.- Efficient collision detection.
- Automatic cleanup of off-screen projectiles.
- Local storage for high scores.
- Session maintenance.
const projectileSpeed = 10;
const balloonSpawnRate = 1000; // in ms
const maxBalloons = 15;
const comboTimeout = 2000; // in ms
const colorPalette = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD', '#D4A5A5'];interface Balloon {
id: number;
x: number;
y: number;
color: string;
speed: number;
size: number;
points: number;
pattern: 'solid' | 'striped' | 'dotted';
direction: 'straight' | 'zigzag' | 'sine';
amplitude?: number;
frequency?: number;
phase?: number;
}interface Projectile {
id: number;
x: number;
y: number;
speed: number;
}- Move the mouse to aim.
- Click to shoot projectiles.
- Pop balloons to earn points.
- Maintain combos for higher scores.
- Track your highest score!
This project is licensed under the MIT License.
Enjoy popping balloons and setting high scores! 🎯🎈