Spaces:

LukasBe
/

chaos-cannon-turbo

Running

App Files Files Community

LukasBe commited on Apr 27

Commit

6e2e189

verified ·

1 Parent(s): 5dfa52f

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +611 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Chaos Cannon Turbo
-emoji: 🐢
-colorFrom: red
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: chaos-cannon-turbo
+emoji: 🐳
+colorFrom: purple
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,611 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ pimp it up yo