Spaces:

LukasBe
/

chaos-cannon-turbo

Running

File size: 49,974 Bytes

6e2e189

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chaos Cannon | MAYHEM EDITION</title> <!-- Changed Title -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* CSS remains the same as before */
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700&display=swap');

        body {
            font-family: 'Orbitron', sans-serif;
            background: linear-gradient(135deg, #111 0%, #222 100%);
            overflow: hidden;
            user-select: none;
            margin: 0; padding: 0; display: flex;
            min-height: 100vh; align-items: center; justify-content: center;
            flex-direction: column;
        }
        #game-container { position: relative; width: 800px; height: 600px; margin-top: 1rem; }
        #game {
            background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 100%);
            box-shadow: 0 0 40px rgba(0, 180, 255, 0.4); /* Enhanced glow */
            border-radius: 8px;
            border: 3px solid rgba(0, 180, 255, 0.6); /* Brighter border */
            display: block; cursor: crosshair;
        }
        .title-text { font-family: 'Press Start 2P', cursive; text-shadow: 0 0 15px #ff6600, 0 0 25px #ff6600, 0 0 5px #fff; /* Added white core */ letter-spacing: 3px; /* More spacing */ }
        .btn-glow { box-shadow: 0 0 15px rgba(255, 102, 0, 0.7); transition: all 0.3s ease; }
        .btn-glow:hover { box-shadow: 0 0 30px rgba(255, 102, 0, 1.0); /* Stronger hover */ transform: translateY(-3px) scale(1.05); /* Add scale */}
        .btn-glow:active { transform: translateY(1px) scale(1.0); }
        .score-display { background: rgba(0, 0, 0, 0.75); border: 2px solid rgba(0, 180, 255, 0.7); border-radius: 8px; text-shadow: 0 0 6px #00ff00, 0 0 10px #00ff00; /* Brighter score */ }
        .game-over { background: rgba(0, 0, 0, 0.9); border: 3px solid rgba(255, 0, 0, 0.7); box-shadow: 0 0 40px rgba(255, 0, 0, 0.6); }
        .star { position: absolute; background: white; border-radius: 50%; pointer-events: none; }
        #titleScreen, #gameOverScreen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.85); border-radius: 8px; z-index: 20; }
        #titleScreen { opacity: 1; transition: opacity 0.5s ease-out; pointer-events: auto; }
        #gameOverScreen { opacity: 0; transition: opacity 0.5s ease-in, background-color 0.5s ease-in; pointer-events: none; }
        #gameOverScreen.visible { opacity: 1; pointer-events: auto; background-color: rgba(0, 0, 0, 0.9); }
        /* Twinkle animation (no changes needed) */
        @keyframes twinkle { from { opacity: 0.1; } to { opacity: ${Math.random() * 0.5 + 0.5}; } }
    </style>
</head>
<body class="p-4 text-white">
    <div class="absolute top-0 left-0 w-full h-full overflow-hidden z-0" id="stars"></div>

    <div class="text-center mb-4 z-10">
        <!-- Title updated -->
        <h1 class="title-text text-4xl md:text-5xl mb-2">CHAOS CANNON</h1>
        <div class="flex justify-center gap-4">
            <div class="score-display px-4 py-2 text-xl">
                <i class="fas fa-trophy mr-2 text-yellow-400"></i>
                <span id="highScore">0</span>
            </div>
            <div class="score-display px-4 py-2 text-xl">
                <i class="fas fa-bolt mr-2 text-orange-500"></i>
                <span id="streak">0x</span>
            </div>
        </div>
    </div>

    <div id="game-container" class="z-10">
        <canvas id="game" width="800" height="600"></canvas>
        <div id="titleScreen">
            <h2 class="title-text text-5xl mb-8">CHAOS CANNON</h2>
            <p class="text-xl mb-8 text-orange-400">MAYHEM EDITION</p> <!-- Subtitle -->
            <button id="startBtn" class="btn-glow bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-8 rounded-full text-xl mb-4">
                <i class="fas fa-play mr-2"></i>START MAYHEM
            </button>
            <div class="text-gray-400 mt-4">
                <p class="mb-2"><i class="fas fa-mouse-pointer mr-2"></i>Aim with mouse</p>
                <p><i class="fas fa-mouse mr-2"></i>Click to SHOOT A LOT</p>
            </div>
        </div>
        <div id="gameOverScreen">
            <div class="game-over p-8 rounded-lg text-center max-w-md">
                <h2 class="title-text text-4xl text-red-500 mb-6">GAME OVER</h2>
                <p class="text-2xl mb-2">Your Score:</p>
                <p id="finalScore" class="text-4xl font-bold text-orange-500 mb-6">0</p>
                 <p class="text-lg mb-6 text-gray-300">The mayhem subsided... for now.</p>
                <button id="restartBtn" class="btn-glow bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-8 rounded-full text-xl">
                    <i class="fas fa-redo mr-2"></i>RESTART MAYHEM
                </button>
            </div>
        </div>
    </div>

    <div class="mt-6 text-gray-400 text-sm z-10">
        <p>Made with <i class="fas fa-burn text-orange-500"></i> <!-- Changed icon --> for particle lovers</p>
    </div>

    <script>
        // --- Star Background (Same) ---
        const starsContainer = document.getElementById('stars');
        for (let i = 0; i < 250; i++) { // More stars
            const star = document.createElement('div');
            star.className = 'star';
            star.style.width = `${Math.random() * 3.5}px`; // Slightly bigger max
            star.style.height = star.style.width;
            star.style.left = `${Math.random() * 100}%`;
            star.style.top = `${Math.random() * 100}%`;
            const initialOpacity = Math.random() * 0.7 + 0.1;
            star.style.opacity = initialOpacity;
            star.style.animation = `twinkle ${1.5 + Math.random() * 5}s infinite alternate ease-in-out`; // Faster min twinkle
            starsContainer.appendChild(star);
        }
        const style = document.createElement('style');
        style.textContent = ` @keyframes twinkle { from { opacity: 0.1; } to { opacity: ${Math.random() * 0.6 + 0.4}; } } `;
        document.head.appendChild(style);

        // --- Game Setup (Same) ---
        const canvas = document.getElementById('game');
        const ctx = canvas.getContext('2d');
        let audioContext;
        const titleScreen = document.getElementById('titleScreen');
        const gameOverScreen = document.getElementById('gameOverScreen');
        const startBtn = document.getElementById('startBtn');
        const restartBtn = document.getElementById('restartBtn');
        const finalScore = document.getElementById('finalScore');
        const highScoreDisplay = document.getElementById('highScore');
        const streakDisplay = document.getElementById('streak');
        let canvasRect = canvas.getBoundingClientRect();
        let highScore = localStorage.getItem('chaosCannonHighScore') || 0;
        highScoreDisplay.textContent = highScore;
        let game;
        let lastTime = 0;
        let animationFrameId = null;
        let mousePos = { x: canvas.width / 2, y: 0 };

        // --- Audio Context Initialization (Same) ---
        function initAudioContext() { if (!audioContext && (window.AudioContext || window.webkitAudioContext)) { try { audioContext = new (window.AudioContext || window.webkitAudioContext)(); if (audioContext.state === 'suspended') { audioContext.resume(); } } catch (e) { console.error("Audio Error", e); audioContext = null; } } }
        document.addEventListener('DOMContentLoaded', initAudioContext);

        // --- Particle Class (MAYHEM Edition) ---
        class Particle {
            constructor(x, y, vx, vy, color, lifespan, size, gravity = 0.05, friction = 0.99, blendMode = 'source-over') { // Added blendMode
                this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.color = color;
                this.initialLifespan = lifespan; this.lifespan = lifespan;
                this.size = size; this.dead = false; this.opacity = 1;
                this.gravity = gravity; this.friction = friction;
                this.blendMode = blendMode; // Store blend mode
            }

            update(deltaTime) {
                const dtFactor = Math.min(deltaTime / 16.67, 4);
                this.x += this.vx * dtFactor; this.y += this.vy * dtFactor;
                this.vy += this.gravity * dtFactor;
                // Apply friction less aggressively for more hang time
                const frictionFactor = Math.pow(this.friction, dtFactor);
                this.vx *= frictionFactor; this.vy *= frictionFactor;
                this.lifespan -= deltaTime;
                // Fade out more slowly initially, then faster
                this.opacity = Math.max(0, Math.pow(this.lifespan / this.initialLifespan, 0.5));
                if (this.lifespan <= 0) this.dead = true;
            }

            draw(ctx) {
                ctx.globalCompositeOperation = this.blendMode; // Set blend mode
                ctx.fillStyle = this.color;
                ctx.globalAlpha = this.opacity;
                ctx.beginPath();
                const currentSize = Math.max(0, this.size * (this.opacity * 1.1)); // Size shrinks slightly slower than opacity
                ctx.arc(this.x, this.y, currentSize, 0, Math.PI * 2);
                ctx.fill();
                ctx.globalAlpha = 1.0;
                ctx.globalCompositeOperation = 'source-over'; // Reset blend mode
            }
        }

        // --- Explosion Class (MAYHEM Edition) ---
        class Explosion {
            constructor(x, y, type, game) {
                this.x = x; this.y = y; this.dead = false; this.type = type;
                this.game = game; this.duration = 600; // Slightly longer duration

                const isBoss = type === 'boss';
                // MORE POWER
                const basePower = isBoss ? 15 : 9;
                const particleMultiplier = isBoss ? 3.0 : 1.8; // MOOORE PARTICLES

                 // 0. Central Flash
                 const flashSize = isBoss ? 60 : 35;
                 game.particles.push(new Particle(this.x, this.y, 0, 0, 'rgba(255, 255, 255, 0.9)', 80, flashSize, 0, 1, 'lighter')); // Short life, big size, lighter blend
                 game.particles.push(new Particle(this.x, this.y, 0, 0, `hsl(${Math.random()*60}, 100%, 70%)`, 120, flashSize * 0.7, 0, 1, 'lighter')); // Colored flash under white

                // 1. Fireball Core Particles
                const coreCount = Math.floor(35 * particleMultiplier); // MORE
                for (let i = 0; i < coreCount; i++) {
                    const angle = Math.random() * Math.PI * 2;
                    const speed = Math.random() * basePower * 1.8 + basePower * 0.6; // Faster max speed
                    const vx = Math.cos(angle) * speed; const vy = Math.sin(angle) * speed;
                    const color = `hsl(${Math.random() * 40 + 10}, 100%, ${65 + Math.random() * 35}%)`; // Brighter range
                    const lifespan = Math.random() * 300 + 150; // Longer short lifespan
                    const size = Math.random() * (isBoss ? 12 : 8) + 5;
                    game.particles.push(new Particle(this.x, this.y, vx, vy, color, lifespan, size, 0.03, 0.96, 'lighter')); // Lighter blend for core
                }

                // 2. Sparks / Debris Particles
                const sparkCount = Math.floor(60 * particleMultiplier); // MORE
                for (let i = 0; i < sparkCount; i++) {
                    const angle = Math.random() * Math.PI * 2;
                    const speed = Math.random() * basePower * 1.2; // Slightly faster debris
                    const vx = Math.cos(angle) * speed; const vy = Math.sin(angle) * speed - Math.random() * 1.5;
                    const color = `hsl(${Math.random() * 45}, 100%, ${55 + Math.random() * 25}%)`; // More vibrant reds/oranges
                    const lifespan = Math.random() * 600 + 400; // Longer medium lifespan
                    const size = Math.random() * (isBoss ? 5 : 4) + 1.5;
                    game.particles.push(new Particle(this.x, this.y, vx, vy, color, lifespan, size, 0.06, 0.97)); // More friction
                }

                // 3. Smoke Particles
                const smokeCount = Math.floor(45 * particleMultiplier); // MORE
                for (let i = 0; i < smokeCount; i++) {
                    const angle = Math.random() * Math.PI * 2;
                    const speed = Math.random() * basePower * 0.5 + 0.5; // Slightly faster smoke base
                    const vx = Math.cos(angle) * speed + (Math.random() - 0.5) * 1.5; // More drift
                    const vy = Math.sin(angle) * speed - Math.random() * 0.8 - 0.3; // Stronger upward drift
                    const gray = 10 + Math.random() * 50; // Darker range
                    const color = `rgba(${gray}, ${gray}, ${gray+5}, ${0.5 + Math.random() * 0.4})`; // More opaque max
                    const lifespan = Math.random() * 1500 + 1000; // Even longer lifespan
                    const size = Math.random() * (isBoss ? 18 : 12) + 8; // Bigger smoke
                    game.particles.push(new Particle(this.x, this.y, vx, vy, color, lifespan, size, -0.015, 0.95)); // More anti-grav, more friction
                }
            }

            update(game, deltaTime) { this.duration -= deltaTime; if (this.duration <= 0) this.dead = true; }
            draw(ctx) { /* Only particles draw */ }
        }


        // --- Game Class (MAYHEM Edition) ---
        class Game {
             // Constructor remains largely the same
            constructor() {
                this.state = 'title'; this.score = 0; this.shake = 0; this.turret = new Turret();
                this.projectiles = []; this.enemies = []; this.particles = []; this.explosions = []; this.powerUps = [];
                this.streak = 0; this.lastHitTime = 0; this.stars = []; this.enemySpawnTimer = 0; this.powerUpSpawnTimer = 0;
                this.enemySpawnInterval = 1600; // Slightly faster initial spawn
                this.powerUpSpawnInterval = 9000; // Faster powerups
                this.difficultyTimer = 0;

                this.boundClickHandler = this.clickHandler.bind(this);
                this.boundMouseMoveHandler = this.mouseMoveHandler.bind(this);
                canvas.addEventListener('click', this.boundClickHandler);
                canvas.addEventListener('mousemove', this.boundMouseMoveHandler);
                startBtn.addEventListener('click', () => this.start());
                restartBtn.addEventListener('click', () => this.restart());

                for(let i = 0; i < 70; i++) { // More background stars
                    this.stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, size: Math.random() * 2.5 + 0.5, opacity: Math.random() * 0.5 + 0.1, speed: Math.random() * 0.15 + 0.05 }); // Slightly faster stars
                }
            }

            // clickHandler, mouseMoveHandler, start, restart (remain the same)
            clickHandler(e) { if (!audioContext) initAudioContext(); if (audioContext && audioContext.state === 'suspended') { audioContext.resume(); } if (this.state === 'playing') { this.turret.shoot(this); } }
            mouseMoveHandler(e) { canvasRect = canvas.getBoundingClientRect(); mousePos.x = e.clientX - canvasRect.left; mousePos.y = e.clientY - canvasRect.top; const MIN_ANGLE = -Math.PI * 0.95; const MAX_ANGLE = -Math.PI * 0.05; let targetAngle = Math.atan2(mousePos.y - this.turret.y, mousePos.x - this.turret.x); this.turret.angle = Math.max(MIN_ANGLE, Math.min(MAX_ANGLE, targetAngle)); }
            start() { if (animationFrameId) { cancelAnimationFrame(animationFrameId); animationFrameId = null; } if (!audioContext) initAudioContext(); if (audioContext && audioContext.state === 'suspended') { audioContext.resume(); } this.state = 'playing'; this.score = 0; this.streak = 0; this.lastHitTime = 0; this.enemySpawnTimer = 0; this.powerUpSpawnTimer = 0; this.enemySpawnInterval = 1600; this.powerUpSpawnInterval = 9000; this.difficultyTimer = 0; this.shake = 0; this.turret = new Turret(); this.projectiles = []; this.enemies = []; this.particles = []; this.explosions = []; this.powerUps = []; this.updateScoreDisplay(); streakDisplay.textContent = `0x`; titleScreen.style.opacity = '0'; titleScreen.style.pointerEvents = 'none'; gameOverScreen.classList.remove('visible'); lastTime = performance.now(); this.animate(); }
            restart() { this.start(); }


            spawnEnemies(deltaTime) {
                this.enemySpawnTimer += deltaTime;
                if (this.enemySpawnTimer >= this.enemySpawnInterval) {
                    this.enemySpawnTimer -= this.enemySpawnInterval;

                    const isBoss = Math.random() < (0.12 + this.difficultyTimer / 250000); // Faster boss scaling
                    const type = isBoss ? 'boss' : 'normal';
                    const edgeBuffer = type === 'boss' ? 50 : 30;
                    // Faster base speed, faster scaling
                    const speed = (isBoss ? 0.8 : 1.2) * (Math.random() * 1.8 + 1.0 + (this.difficultyTimer / 60000));

                    const newEnemy = new Enemy( Math.random() * (canvas.width - edgeBuffer * 2) + edgeBuffer, -60, speed, type );
                    this.enemies.push(newEnemy);
                }
            }

            spawnPowerUps(deltaTime) {
                this.powerUpSpawnTimer += deltaTime;
                if (this.powerUpSpawnTimer >= this.powerUpSpawnInterval) {
                     this.powerUpSpawnTimer = 0;
                     if(Math.random() > 0.4) { // Even more powerups!
                        const edgeBuffer = 40;
                        this.powerUps.push(new PowerUp( Math.random() * (canvas.width - edgeBuffer * 2) + edgeBuffer, -30, ['rapid', 'explosive', 'multi'][Math.floor(Math.random() * 3)] ));
                    }
                }
            }

            increaseDifficulty(deltaTime) {
                this.difficultyTimer += deltaTime;
                const decreaseFactor = 1 - (deltaTime / 200000); // Faster difficulty scaling (interval decrease)
                this.enemySpawnInterval = Math.max(250, this.enemySpawnInterval * decreaseFactor); // Lower min interval (0.25s)
            }

            endGame() { if (this.state === 'gameover') return; this.state = 'gameover'; this.playGameOverSound(); if(this.score > highScore) { highScore = this.score; localStorage.setItem('chaosCannonHighScore', highScore); highScoreDisplay.textContent = highScore; } finalScore.textContent = this.score; gameOverScreen.classList.add('visible'); }

            update(deltaTime) {
                if(this.state !== 'playing') return;

                 this.increaseDifficulty(deltaTime);
                 this.spawnEnemies(deltaTime);
                 this.spawnPowerUps(deltaTime);

                // Update entities (pass deltaTime) - Turret needs it for idle particles now
                this.turret.update(deltaTime, this); // Pass game reference for particles
                [...this.projectiles, ...this.enemies, ...this.particles, ...this.explosions, ...this.powerUps].forEach(e => e.update(this, deltaTime));

                streakDisplay.textContent = `${this.streak}x`;
                if(this.streak > 0 && Date.now() - this.lastHitTime > 3000) this.streak = 0;

                // --- Collision Detection ---
                for (let i = this.projectiles.length - 1; i >= 0; i--) {
                    const projectile = this.projectiles[i];
                    if (projectile.dead) continue;

                    for (let j = this.enemies.length - 1; j >= 0; j--) {
                        const enemy = this.enemies[j];
                        const enemyRadius = enemy.type === 'boss' ? 40 : 20;
                        if (Math.hypot(projectile.x - enemy.x, projectile.y - enemy.y) < (enemyRadius + projectile.size)) {

                            enemy.health--; // Health reduced earlier, easier enemies!
                            if (enemy.health <= 0) {
                                // Enemy destroyed
                                if (Date.now() - this.lastHitTime < 3000) this.streak++; else this.streak = 1;
                                this.lastHitTime = Date.now();

                                this.explosions.push(new Explosion(enemy.x, enemy.y, enemy.type, this)); // MAYHEM explosion

                                const basePoints = enemy.type === 'boss' ? 250 : 50; // Less points needed as they die faster
                                this.score += Math.round(basePoints * (1 + this.streak * 0.20)); // Higher streak bonus
                                this.updateScoreDisplay();

                                this.enemies.splice(j, 1);
                                this.shake = enemy.type === 'boss' ? 25 : 12; // MORE SHAKE
                                this.playExplosionSound(enemy.type);

                                if(enemy.type === 'boss' && Math.random() > 0.3) { // Very high powerup drop chance
                                    this.powerUps.push(new PowerUp( enemy.x, enemy.y, ['rapid', 'explosive', 'multi'][Math.floor(Math.random() * 3)] ));
                                }
                            } else {
                                // --- Enemy Hit Spark Particles ---
                                this.playHitSound();
                                this.shake = 6; // Keep small hit shake
                                const impactAngle = Math.atan2(projectile.y - enemy.y, projectile.x - enemy.x);
                                for (let k = 0; k < 5 + Math.random() * 5; k++) { // 5-10 sparks
                                     const angle = impactAngle + (Math.random() - 0.5) * 1.5; // Spread sparks
                                     const speed = Math.random() * 3 + 1;
                                     const vx = Math.cos(angle) * speed;
                                     const vy = Math.sin(angle) * speed;
                                     const color = `hsl(${Math.random()*20 + 20}, 80%, ${50 + Math.random()*20}%)`; // Orange/Yellow sparks
                                     const lifespan = Math.random() * 150 + 50; // Short life
                                     const size = Math.random() * 2 + 0.5;
                                     this.particles.push(new Particle(projectile.x, projectile.y, vx, vy, color, lifespan, size, 0.1, 0.96)); // More gravity
                                }
                            }

                            if (projectile.explosive) {
                                this.explosions.push(new Explosion(projectile.x, projectile.y, 'normal', this)); // Explosive projectiles also get MAYHEM explosions
                                this.playExplosionSound('normal');
                            }
                            projectile.dead = true;
                            break;
                        }
                    }
                }

                // Powerup vs Turret (Same logic)
                for (let i = this.powerUps.length - 1; i >= 0; i--) { const powerUp = this.powerUps[i]; if (Math.hypot(powerUp.x - this.turret.x, powerUp.y - (this.turret.y + 10)) < (30 + powerUp.size / 2)) { this.turret.activatePowerUp(powerUp.type); this.powerUps.splice(i, 1); this.playPowerUpSound(); this.score += 100; this.updateScoreDisplay(); } }

                // --- Cleanup --- Filter dead entities
                this.projectiles = this.projectiles.filter(p => !p.dead && p.y > -150 && p.y < canvas.height + 150 && p.x > -150 && p.x < canvas.width + 150); // Even wider bounds
                this.particles = this.particles.filter(p => !p.dead);
                // Limit total particles if needed (optional performance safeguard)
                // const MAX_PARTICLES = 3000;
                // if (this.particles.length > MAX_PARTICLES) {
                //     this.particles.splice(0, this.particles.length - MAX_PARTICLES);
                // }
                this.explosions = this.explosions.filter(e => !e.dead);
                this.powerUps = this.powerUps.filter(p => !p.dead);

                 // Update in-game stars (Same)
                 this.stars.forEach(star => { star.y += star.speed * (deltaTime / 16.67); if (star.y > canvas.height) { star.y = -star.size; star.x = Math.random() * canvas.width; } });
            }

            // Draw method (minor adjustments for mayhem feel)
            draw() {
                ctx.save();
                if(this.shake > 0) { const shakeX = Math.random() * this.shake - this.shake / 2; const shakeY = Math.random() * this.shake - this.shake / 2; ctx.translate(shakeX, shakeY); this.shake *= 0.92; if (this.shake < 0.5) this.shake = 0; }

                // Background Color
                ctx.fillStyle = '#080814'; // Even darker
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                // Background Moving Stars
                 this.stars.forEach(star => { ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity * 1.2})`; ctx.fillRect(star.x, star.y, star.size, star.size); }); // Brighter stars

                // Grid Lines (Fainter)
                ctx.strokeStyle = 'rgba(0, 150, 255, 0.06)'; ctx.lineWidth = 0.8;
                for(let x = 0; x < canvas.width; x += 50) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); }
                for(let y = 0; y < canvas.height; y += 50) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke(); }

                // Game Entities (Order matters for layering)
                this.powerUps.forEach(p => p.draw(ctx));
                this.turret.draw(ctx);
                this.enemies.forEach(e => e.draw(ctx));
                this.projectiles.forEach(p => p.draw(ctx));
                this.particles.forEach(p => p.draw(ctx)); // Draw ALL particles last

                ctx.restore(); // Restore before UI

                // --- UI (Drawn after restoring context) ---
                // Score Box
                ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; ctx.strokeStyle = 'rgba(0, 180, 255, 0.7)'; ctx.lineWidth = 2;
                ctx.strokeRect(10, 10, 200, 40); ctx.fillRect(10, 10, 200, 40);
                ctx.font = '18px Orbitron'; ctx.fillStyle = '#00ff00'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
                ctx.shadowColor = '#0f0'; ctx.shadowBlur = 5; // Add glow to score text
                ctx.fillText(`SCORE: ${this.score}`, 20, 30);
                ctx.shadowBlur = 0; // Reset shadow

                // Powerup Timer (minor visual tweaks)
                if(this.turret.powerUpActive) { const remaining = (this.turret.powerUpEnd - Date.now()) / 1000; if(remaining > 0) { const powerColor = this.turret.getPowerUpColor(); ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; ctx.strokeStyle = powerColor; ctx.lineWidth = 2.5; /* Thicker border */ const timerWidth = 220; const timerHeight = 30; const timerX = canvas.width - timerWidth - 10; const timerY = 10; ctx.strokeRect(timerX, timerY, timerWidth, timerHeight); ctx.fillRect(timerX, timerY, timerWidth, timerHeight); ctx.fillStyle = powerColor; ctx.font = '14px Orbitron'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; ctx.shadowColor = powerColor; ctx.shadowBlur = 8; /* Glow for timer text */ if (remaining < 3 && Math.floor(Date.now() / 150) % 2 === 0) { ctx.fillStyle = '#FFFFFF'; ctx.shadowColor = '#FFF'; } /* Faster flash */ ctx.fillText(`${this.turret.powerUpType.toUpperCase()} ACTIVE: ${remaining.toFixed(1)}s`, timerX + 10, timerY + timerHeight / 2); ctx.shadowBlur = 0; } }
            }

            // updateScoreDisplay, Sound Effects, animate, drawStaticBackground, drawUI (remain same structure)
             updateScoreDisplay() { /* Optional direct DOM update */ }
            _playSound(oscType, freqStart, freqEnd, gainVal, duration, filterType = null, filterFreqStart = 20000, filterFreqEnd = 20000) { if (!audioContext || audioContext.state !== 'running') return; const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); let lastNode = oscillator; if (filterType) { const filter = audioContext.createBiquadFilter(); filter.type = filterType; filter.frequency.setValueAtTime(filterFreqStart, audioContext.currentTime); filter.frequency.exponentialRampToValueAtTime(filterFreqEnd, audioContext.currentTime + duration); oscillator.connect(filter); lastNode = filter; } lastNode.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.type = oscType; oscillator.frequency.setValueAtTime(freqStart, audioContext.currentTime); if (freqStart !== freqEnd) { oscillator.frequency.exponentialRampToValueAtTime(freqEnd, audioContext.currentTime + duration * 0.8); } gainNode.gain.setValueAtTime(gainVal, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.0001, audioContext.currentTime + duration); oscillator.start(audioContext.currentTime); oscillator.stop(audioContext.currentTime + duration); }
            playShootSound() { this._playSound('triangle', 700, 120, 0.10, 0.12); } // Slightly adjusted pitch/vol
            playHitSound() { this._playSound('square', 500, 400, 0.06, 0.08); } // Lower pitch hit
            playPowerUpSound() { this._playSound('sine', 440, 1300, 0.18, 0.4); }
            playGameOverSound() { this._playSound('sawtooth', 100, 40, 0.3, 1.2); this._playSound('square', 90, 35, 0.3, 1.2); }
            playExplosionSound(type) { const isBoss = type === 'boss'; this._playSound(isBoss ? 'noise' : 'square', isBoss ? 50 : 80 + Math.random() * 50, isBoss ? 20 : 40, isBoss ? 0.35 : 0.18, isBoss ? 0.6 : 0.45, 'lowpass', isBoss ? 1800 : 3500, 80); } // Use 'noise' for boss, louder/longer, lower filter end

            animate() { animationFrameId = requestAnimationFrame((ts) => this.animate(ts)); const now = performance.now(); const deltaTime = Math.min(now - lastTime, 100); lastTime = now; ctx.clearRect(0, 0, canvas.width, canvas.height); if (this.state === 'playing') { this.update(deltaTime); this.draw(); } else if (this.state === 'gameover') { this.drawStaticBackground(); this.particles.forEach(p => p.update(this, deltaTime)); this.particles = this.particles.filter(p => !p.dead); this.particles.forEach(p => p.draw(ctx)); this.turret.draw(ctx); this.drawUI(); } else if (this.state === 'title') { this.drawStaticBackground(); } }
            drawStaticBackground() { ctx.save(); ctx.fillStyle = '#080814'; ctx.fillRect(0, 0, canvas.width, canvas.height); this.stars.forEach(star => { ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity * 1.2})`; ctx.fillRect(star.x, star.y, star.size, star.size); }); ctx.strokeStyle = 'rgba(0, 150, 255, 0.06)'; ctx.lineWidth = 0.8; for (let x = 0; x < canvas.width; x += 50) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); } for (let y = 0; y < canvas.height; y += 50) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke(); } ctx.restore(); }
            drawUI() { ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; ctx.strokeStyle = 'rgba(0, 180, 255, 0.7)'; ctx.lineWidth = 2; ctx.strokeRect(10, 10, 200, 40); ctx.fillRect(10, 10, 200, 40); ctx.font = '18px Orbitron'; ctx.fillStyle = '#00ff00'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; ctx.shadowColor = '#0f0'; ctx.shadowBlur = 5; ctx.fillText(`SCORE: ${this.score}`, 20, 30); ctx.shadowBlur = 0; }
        }

        // --- Turret Class (MAYHEM Edition) ---
        class Turret {
            // Constructor and angle setter/getter same
            constructor() { this.x = canvas.width / 2; this.y = canvas.height - 30; this.angle = -Math.PI / 2; this.cooldown = 0; this.powerUpActive = false; this.powerUpType = null; this.powerUpEnd = 0; this.barrelLength = 45; this.recoil = 0; this.targetAngle = -Math.PI / 2; this.aimSpeed = 0.2; this._currentAngle = -Math.PI/2; this.idleParticleTimer = 0; } // Add idle timer
             set angle(target) { this.targetAngle = target; }
             get angle() { return this._currentAngle || -Math.PI / 2; }

            update(deltaTime, game) { // Added game reference
                const current = this.angle; const target = this.targetAngle; let diff = target - current; while (diff < -Math.PI) diff += Math.PI * 2; while (diff > Math.PI) diff -= Math.PI * 2;
                this._currentAngle = current + diff * this.aimSpeed * (deltaTime / 16.67);

                if (this.cooldown > 0) this.cooldown -= deltaTime;
                if (this.recoil > 0) this.recoil -= deltaTime * 0.4; // Even faster recoil recovery
                if (this.recoil < 0) this.recoil = 0;
                if(this.powerUpActive && Date.now() > this.powerUpEnd) { this.powerUpActive = false; this.powerUpType = null; }

                // --- Idle Turret Particles ---
                 this.idleParticleTimer += deltaTime;
                 const idleInterval = this.powerUpActive ? 30 : 150; // Faster sparks when powered up
                 if (this.idleParticleTimer > idleInterval) {
                     this.idleParticleTimer -= idleInterval;
                     const angle = Math.random() * Math.PI * 2; // Emit from base
                     const speed = Math.random() * 0.5 + 0.1;
                     const vx = Math.cos(angle) * speed;
                     const vy = Math.sin(angle) * speed;
                     const color = this.powerUpActive ? this.getPowerUpColor() + '80' : 'rgba(100, 150, 255, 0.5)'; // Use powerup color or default blue
                     const lifespan = Math.random() * 300 + 200;
                     const size = Math.random() * 1.5 + 0.5;
                     game.particles.push(new Particle(this.x + Math.cos(angle) * 20, this.y + Math.sin(angle) * 10, vx, vy, color, lifespan, size, 0.01, 0.98));
                 }
            }

            shoot(game) {
                if(this.cooldown <= 0) {
                     game.playShootSound();
                     this.recoil = 10; // More recoil visual

                    const shootAngle = this.angle;
                    const muzzleOffsetX = Math.cos(shootAngle) * (this.barrelLength - this.recoil);
                    const muzzleOffsetY = Math.sin(shootAngle) * (this.barrelLength - this.recoil);
                    const startX = this.x + muzzleOffsetX;
                    const startY = this.y + muzzleOffsetY;

                    // --- Muzzle Flash Particles ---
                    const flashCount = this.powerUpActive && this.powerUpType === 'explosive' ? 25 : 15; // More flash for explosive
                    const flashPower = this.powerUpActive && this.powerUpType === 'explosive' ? 6 : 4;
                    const flashBaseColor = this.powerUpActive && this.powerUpType === 'explosive' ? 15 : 40; // Orange/Red for explosive, Yellow otherwise
                    for (let i = 0; i < flashCount; i++) {
                        const angle = shootAngle + (Math.random() - 0.5) * 0.8; // Cone shape
                        const speed = Math.random() * flashPower + 1.0;
                        const vx = Math.cos(angle) * speed;
                        const vy = Math.sin(angle) * speed;
                        const color = `hsl(${flashBaseColor + Math.random()*20 - 10}, 100%, ${70 + Math.random()*30}%)`; // Bright yellow/orange/white
                        const lifespan = Math.random() * 80 + 40; // Very short life
                        const size = Math.random() * 4 + 1;
                        game.particles.push(new Particle(startX, startY, vx, vy, color, lifespan, size, 0.02, 0.92, 'lighter')); // Lighter blend
                    }

                    // --- Projectile Spawning ---
                    const projectileSpeed = 14; // Faster projectiles
                    const vx = Math.cos(shootAngle) * projectileSpeed;
                    const vy = Math.sin(shootAngle) * projectileSpeed;
                    const isExplosive = this.powerUpActive && this.powerUpType === 'explosive';

                    if(this.powerUpActive && this.powerUpType === 'multi') {
                        const spreadAngle = 0.2; // Even wider multi
                        for(let i = -1; i <= 1; i++) {
                            const angle = shootAngle + (i * spreadAngle);
                            game.projectiles.push(new Projectile( startX, startY, Math.cos(angle) * projectileSpeed, Math.sin(angle) * projectileSpeed, isExplosive ));
                        }
                        this.cooldown = 250; // Keep multi cooldown reasonable
                    } else {
                        game.projectiles.push(new Projectile(startX, startY, vx, vy, isExplosive));
                        // Much faster firing rate!
                        this.cooldown = this.powerUpActive && this.powerUpType === 'rapid' ? 40 : 100; // RAPID FIRE!
                    }
                }
            }

            // activatePowerUp, getPowerUpColor, draw (remain same structure, visuals already good)
            activatePowerUp(type) { this.powerUpActive = true; this.powerUpType = type; this.powerUpEnd = Date.now() + 9000; } // Longer powerup duration
            getPowerUpColor() { switch(this.powerUpType) { case 'rapid': return '#00ffff'; case 'explosive': return '#ff3300'; case 'multi': return '#ffff00'; default: return '#ffffff'; } }
            draw(ctx) { ctx.save(); ctx.translate(this.x, this.y); ctx.fillStyle = 'rgba(60, 60, 80, 0.9)'; ctx.strokeStyle = 'rgba(100, 100, 120, 1)'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(-50, 20); ctx.lineTo(50, 20); ctx.arc(0, 20, 50, 0, Math.PI, false); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.rotate(this.angle); const barrelX = -this.recoil; const gradient = ctx.createLinearGradient(barrelX, -6, barrelX + this.barrelLength, 6); gradient.addColorStop(0, '#AAA'); gradient.addColorStop(0.5, '#888'); gradient.addColorStop(1, '#777'); ctx.fillStyle = gradient; ctx.strokeStyle = '#555'; ctx.lineWidth = 1; ctx.beginPath(); ctx.rect(barrelX, -6, this.barrelLength, 12); ctx.fill(); ctx.stroke(); const baseGradient = ctx.createRadialGradient(0, 0, 5, 0, 0, 25); baseGradient.addColorStop(0, '#888'); baseGradient.addColorStop(1, '#555'); ctx.fillStyle = baseGradient; ctx.strokeStyle = '#444'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(0, 0, 25, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); const coreRadius = 12; let powerColor = '#555'; let glow = false; if(this.powerUpActive) { powerColor = this.getPowerUpColor(); glow = true; } ctx.fillStyle = powerColor; ctx.beginPath(); ctx.arc(0, 0, coreRadius, 0, Math.PI * 2); ctx.fill(); if (glow) { ctx.shadowColor = powerColor; ctx.shadowBlur = 30; /* More intense glow */ ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'; ctx.beginPath(); ctx.arc(0, 0, coreRadius * 0.6, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; } ctx.restore(); }
        }

        // --- Projectile Class (MAYHEM Edition) ---
        class Projectile {
             constructor(x, y, vx, vy, explosive) {
                 this.x = x; this.y = y; this.vx = vx; this.vy = vy;
                 this.dead = false; this.explosive = explosive;
                 this.size = explosive ? 8 : 5; // Slightly larger base size
                 this.trailTimer = 0;
                 this.trailInterval = 8; // FASTER trail emission
             }

             update(game, deltaTime) {
                 const dtFactor = Math.min(deltaTime / 16.67, 4);
                 this.x += this.vx * dtFactor; this.y += this.vy * dtFactor;
                 if(this.y < -150 || this.y > canvas.height + 150 || this.x < -150 || this.x > canvas.width + 150) this.dead = true;

                 this.trailTimer += deltaTime;
                 if (this.trailTimer >= this.trailInterval) {
                     this.trailTimer -= this.trailInterval;
                     const trailColor = this.explosive ?
                         `hsl(${Math.random() * 25 + 2}, 100%, ${65 + Math.random() * 25}%)` : // More intense red/orange
                         `hsl(${Math.random() * 25 + 30}, 100%, ${75 + Math.random() * 25}%)`; // Brighter yellow/orange

                     game.particles.push(new Particle(
                         this.x + (Math.random()-0.5)*this.size, // Emit from within projectile area
                         this.y + (Math.random()-0.5)*this.size,
                         this.vx * -0.05 + Math.random() * 1 - 0.5, // Less opposing velocity
                         this.vy * -0.05 + Math.random() * 1 - 0.5,
                         trailColor,
                         200 + Math.random() * 150, // Longer trail lifespan
                         this.explosive ? 5 : 3, // Slightly larger trail particles
                         0.01, 0.97, 'lighter' // Use lighter blend for trails too
                     ));
                 }
             }

            // Draw method (same structure, lighter blend will make it brighter)
            draw(ctx) {
                 const coreColor = this.explosive ? '#ffeecc' : '#ffffdd';
                 const outerColor1 = this.explosive ? '#ff6600' : '#ffaa00';
                 const outerColor2 = this.explosive ? '#cc2200' : '#dd6600';
                 const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
                 gradient.addColorStop(0, coreColor); gradient.addColorStop(0.4, outerColor1); gradient.addColorStop(1, outerColor2);

                 ctx.globalCompositeOperation = 'lighter'; // Draw projectile with lighter blend
                 ctx.fillStyle = gradient;
                 ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill();
                 ctx.shadowColor = this.explosive ? '#ff3300' : '#ff9900';
                 ctx.shadowBlur = this.explosive ? 22 : 15; // More glow
                 ctx.fill(); // Draw again with shadow enabled
                 ctx.shadowBlur = 0;
                 ctx.globalCompositeOperation = 'source-over'; // Reset blend mode
            }
        }

        // --- Enemy Class (MAYHEM Edition - Health Change!) ---
        class Enemy {
            constructor(x, y, speed, type) {
                this.x = x; this.y = y; this.speed = speed; this.type = type || 'normal';
                // --- HEALTH CHANGE ---
                this.initialHealth = type === 'boss' ? 3 : 1; // BOSS: 3 HP, NORMAL: 1 HP
                this._health = this.initialHealth; // Initialize private health
                // --------------------
                this.wobble = Math.random() * Math.PI * 2; this.wobbleSpeed = type === 'boss' ? 0.05 : 0.08; // Faster wobble
                this.wobbleAmount = type === 'boss' ? 8 : 5; // More wobble
                this.angle = 0; this.hitTimer = 0; this.hitDuration = 80; // Shorter hit flash
            }

            set health(value) { if (value < this._health) { this.hitTimer = this.hitDuration; } this._health = value; }
            get health() { return this._health; } // No need for default here anymore

            // Update method (same logic, checks remain)
            update(game, deltaTime) { const dtFactor = Math.min(deltaTime / 16.67, 4); this.y += this.speed * dtFactor; this.wobble += this.wobbleSpeed * dtFactor; const wobbleOffset = Math.sin(this.wobble) * this.wobbleAmount; this.x += wobbleOffset * 0.1 * dtFactor; if (this.hitTimer > 0) { this.hitTimer -= deltaTime; } const radius = this.type === 'boss' ? 40 : 20; this.x = Math.max(radius, Math.min(canvas.width - radius, this.x)); if(this.y > canvas.height + radius * 2) { if (this.type !== 'boss') { game.endGame(); } else { const index = game.enemies.indexOf(this); if (index > -1) game.enemies.splice(index, 1); } } }

            // Draw method (same structure, flash effect remains)
            draw(ctx) { ctx.save(); const wobbleOffsetY = Math.sin(this.wobble) * this.wobbleAmount * 0.5; ctx.translate(this.x, this.y + wobbleOffsetY); ctx.rotate(this.angle); const isHit = this.hitTimer > 0; if(this.type === 'boss') { const width = 80; const height = 55; const gradient = ctx.createRadialGradient(0, 0, 10, 0, 0, width / 2); gradient.addColorStop(0, isHit ? '#ffffff' : '#ff4444'); gradient.addColorStop(0.6, '#cc0000'); gradient.addColorStop(1, '#880000'); ctx.fillStyle = gradient; ctx.strokeStyle = '#660000'; ctx.lineWidth = 2; ctx.beginPath(); ctx.ellipse(0, 0, width / 2, height / 2, 0, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.fillStyle = isHit ? '#ffcccc' : '#ffff00'; ctx.beginPath(); ctx.ellipse(-18, -8, 10, 6, -0.2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(18, -8, 10, 6, 0.2, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#000000'; ctx.beginPath(); ctx.arc(-18, -8, 3, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(18, -8, 3, 0, Math.PI * 2); ctx.fill(); const healthBarWidth = 60; const healthBarHeight = 8; const healthBarY = -(height / 2) - 15; ctx.fillStyle = 'rgba(80, 80, 80, 0.7)'; ctx.fillRect(-healthBarWidth / 2, healthBarY, healthBarWidth, healthBarHeight); const healthPercent = Math.max(0, this.health / this.initialHealth); ctx.fillStyle = healthPercent > 0.66 ? '#00ff00' : healthPercent > 0.33 ? '#ffff00' : '#ff0000'; /* Adjusted thresholds for lower HP */ ctx.fillRect(-healthBarWidth / 2, healthBarY, healthBarWidth * healthPercent, healthBarHeight); ctx.strokeStyle = 'rgba(200, 200, 200, 0.8)'; ctx.lineWidth = 1; ctx.strokeRect(-healthBarWidth / 2, healthBarY, healthBarWidth, healthBarHeight); } else { const size = 20; const gradient = ctx.createLinearGradient(0, -size * 0.7, 0, size * 0.3); gradient.addColorStop(0, isHit ? '#ffffff' : '#33dd33'); gradient.addColorStop(1, '#008800'); ctx.fillStyle = gradient; ctx.strokeStyle = '#005500'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(0, -size * 0.7); ctx.lineTo(-size, size * 0.3); ctx.lineTo(size, size * 0.3); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.fillStyle = isHit ? 'rgba(255, 100, 100, 0.9)' : 'rgba(0, 200, 255, 0.6)'; ctx.shadowColor = isHit ? 'rgba(255, 0, 0, 1)' : 'rgba(0, 200, 255, 1)'; ctx.shadowBlur = 8; ctx.beginPath(); ctx.arc(0, -size * 0.1, size * 0.3, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; } ctx.restore(); }
        }

        // --- PowerUp Class (Same structure, visuals already good) ---
        class PowerUp { constructor(x, y, type) { this.x = x; this.y = y; this.type = type; this.vy = 1.8; /* Slightly faster fall */ this.dead = false; this.size = 18; this.angle = Math.random() * Math.PI * 2; this.rotationSpeed = (Math.random() - 0.5) * 0.05; this.pulseTimer = Math.random() * 1000; } update(game, deltaTime) { const dtFactor = Math.min(deltaTime / 16.67, 4); this.y += this.vy * dtFactor; this.angle += this.rotationSpeed * dtFactor; this.pulseTimer += deltaTime; if(this.y > canvas.height + this.size * 2) this.dead = true; } draw(ctx) { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); let color1, color2, symbolFunc; const iconSize = this.size * 0.8; switch(this.type) { case 'rapid': color1 = '#00ffff'; color2 = '#00aaff'; symbolFunc = () => { ctx.beginPath(); ctx.moveTo(-iconSize*0.2, -iconSize*0.5); ctx.lineTo(iconSize*0.3, 0); ctx.lineTo(-iconSize*0.3, 0); ctx.lineTo(iconSize*0.2, iconSize*0.5); ctx.strokeStyle=color2; ctx.lineWidth=3; ctx.stroke(); }; break; case 'explosive': color1 = '#ff6600'; color2 = '#ffaa00'; symbolFunc = () => { ctx.fillStyle=color2; ctx.beginPath(); ctx.arc(0, 0, iconSize*0.4, 0, Math.PI*2); ctx.fill(); ctx.strokeStyle='#555'; ctx.lineWidth=2; ctx.beginPath(); ctx.moveTo(0, -iconSize*0.4); ctx.lineTo(iconSize*0.3, -iconSize*0.6); ctx.stroke(); ctx.fillStyle='#fff'; ctx.beginPath(); ctx.arc(iconSize*0.3, -iconSize*0.6, 2, 0, Math.PI*2); ctx.fill(); }; break; case 'multi': color1 = '#ffff00'; color2 = '#ffcc00'; symbolFunc = () => { ctx.fillStyle=color2; const r = iconSize*0.2; ctx.beginPath(); ctx.arc(-iconSize*0.3, iconSize*0.15, r, 0, Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.arc( iconSize*0.3, iconSize*0.15, r, 0, Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.arc( 0, -iconSize*0.3, r, 0, Math.PI*2); ctx.fill(); }; break; } const pulseFactor = 1.0 + Math.sin(this.pulseTimer / 250) * 0.12; ctx.strokeStyle = color1; ctx.lineWidth = 2; ctx.globalAlpha = 0.6 + Math.sin(this.pulseTimer / 250) * 0.3; ctx.beginPath(); ctx.arc(0, 0, this.size * 0.9 * pulseFactor, 0, Math.PI * 2); ctx.stroke(); ctx.globalAlpha = 1.0; ctx.fillStyle = 'rgba(50, 50, 70, 0.8)'; ctx.strokeStyle = color1; ctx.lineWidth = 1.5; const backSize = this.size * 0.9; ctx.beginPath(); ctx.roundRect(-backSize, -backSize, backSize*2, backSize*2, 5); ctx.fill(); ctx.stroke(); symbolFunc(); ctx.restore(); } }

        // --- Initialize and Start Game (Same) ---
        function initGame() { game = new Game(); game.drawStaticBackground(); }
        function resizeCanvas() { canvasRect = canvas.getBoundingClientRect(); }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();
        initGame();

    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/chaos-cannon-turbo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>