Spaces:

aired
/

defender

Running

App Files Files

xet

Community

aired commited on Mar 30

Commit

3f85fca

verified ·

1 Parent(s): b842324

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +956 -19

README.md CHANGED Viewed

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

 ---
+title: defender
+emoji: 🐳
+colorFrom: blue
+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,956 @@
-<!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>Galaxy Defender</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background-color: #000;
+            color: #0ff;
+            font-family: 'Orbitron', sans-serif;
+            overflow: hidden;
+            height: 100vh;
+            background-image:
+                radial-gradient(circle at 20% 30%, rgba(20, 20, 80, 0.8), transparent 40%),
+                radial-gradient(circle at 80% 70%, rgba(80, 20, 80, 0.6), transparent 40%),
+                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="20" cy="50" r="1" fill="white" opacity="0.8"/><circle cx="50" cy="20" r="1" fill="white" opacity="0.6"/><circle cx="80" cy="50" r="1" fill="white" opacity="0.7"/><circle cx="50" cy="80" r="1" fill="white" opacity="0.9"/></svg>');
+            background-size: 100% 100%, 100% 100%, 100px 100px;
+        }
+        #gameContainer {
+            position: relative;
+            width: 100%;
+            height: 100vh;
+            perspective: 1000px;
+        }
+        #gameCanvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+        }
+        #uiOverlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+            pointer-events: none;
+        }
+        #scoreDisplay {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            font-size: 24px;
+            color: #0ff;
+            text-shadow: 0 0 10px #0ff;
+        }
+        #healthBar {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            width: 200px;
+            height: 20px;
+            background-color: rgba(255, 0, 0, 0.3);
+            border: 2px solid #f00;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        #healthFill {
+            height: 100%;
+            width: 100%;
+            background-color: #f00;
+            transition: width 0.3s;
+        }
+        #startScreen, #gameOverScreen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(0, 0, 0, 0.8);
+            z-index: 3;
+        }
+        #gameOverScreen {
+            display: none;
+        }
+        h1 {
+            font-size: 3rem;
+            margin-bottom: 2rem;
+            color: #0ff;
+            text-shadow: 0 0 15px #0ff;
+            text-align: center;
+        }
+        p {
+            font-size: 1.2rem;
+            margin-bottom: 2rem;
+            color: #fff;
+            max-width: 600px;
+            text-align: center;
+            line-height: 1.6;
+        }
+        .btn {
+            padding: 12px 30px;
+            background: linear-gradient(45deg, #0ff, #00aaff);
+            border: none;
+            border-radius: 30px;
+            color: #000;
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.2rem;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s;
+            pointer-events: auto;
+            box-shadow: 0 0 15px #0ff;
+        }
+        .btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 25px #0ff;
+        }
+        #finalScore {
+            font-size: 2rem;
+            color: #0ff;
+            margin: 20px 0;
+            text-shadow: 0 0 10px #0ff;
+        }
+        #powerups {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            display: flex;
+            gap: 10px;
+        }
+        .powerup-icon {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 16px;
+            color: #000;
+            background: #ff0;
+            box-shadow: 0 0 10px #ff0;
+        }
+        #earth {
+            position: absolute;
+            bottom: -50px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 300px;
+            height: 300px;
+            background: radial-gradient(circle at 30% 30%, #1a66ff, #003399 60%, #001a33);
+            border-radius: 50%;
+            box-shadow:
+                0 0 60px rgba(0, 150, 255, 0.6),
+                inset 0 0 100px rgba(255, 255, 255, 0.3);
+            z-index: 0;
+        }
+        #earth::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image:
+                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,50 Q35,40 50,50 T80,50" fill="none" stroke="%23007733" stroke-width="2"/><path d="M40,30 Q45,25 50,30 T60,30" fill="none" stroke="%23007733" stroke-width="1"/><path d="M25,65 Q35,60 45,65 T60,65" fill="none" stroke="%23007733" stroke-width="1"/></svg>');
+            background-size: 100%;
+            opacity: 0.6;
+        }
+    </style>
+</head>
+<body>
+    <div id="gameContainer">
+        <div id="earth"></div>
+        <canvas id="gameCanvas"></canvas>
+        <div id="uiOverlay">
+            <div id="scoreDisplay">SCORE: 0</div>
+            <div id="healthBar">
+                <div id="healthFill"></div>
+            </div>
+            <div id="powerups">
+                <!-- Power-up icons will be added here dynamically -->
+            </div>
+        </div>
+        <div id="startScreen">
+            <h1>GALAXY DEFENDER</h1>
+            <p>Aliens are attacking Earth from all directions! Take control of the state-of-the-art starfighter and defend our planet.</p>
+            <p>Controls: Arrow keys to move, Spacebar to shoot</p>
+            <button class="btn" id="startBtn">LAUNCH STARFIGHTER</button>
+        </div>
+        <div id="gameOverScreen">
+            <h1>MISSION FAILED</h1>
+            <p>The alien invasion was too strong. Earth has fallen under their control.</p>
+            <div id="finalScore">SCORE: 0</div>
+            <button class="btn" id="restartBtn">TRY AGAIN</button>
+        </div>
+    </div>
+    <audio id="laserSound" src="https://assets.mixkit.co/active_storage/sfx/2347/2347-preview.mp3" preload="auto"></audio>
+    <audio id="explosionSound" src="https://assets.mixkit.co/active_storage/sfx/2099/2099-preview.mp3" preload="auto"></audio>
+    <audio id="powerupSound" src="https://assets.mixkit.co/active_storage/sfx/2329/2329-preview.mp3" preload="auto"></audio>
+    <audio id="backgroundMusic" loop>
+        <source src="https://assets.mixkit.co/music/preview/mixkit-space-game-668.mp3" type="audio/mpeg">
+    </audio>
+    <script>
+        // Game constants
+        const GAME_WIDTH = window.innerWidth;
+        const GAME_HEIGHT = window.innerHeight;
+        const PLAYER_WIDTH = 60;
+        const PLAYER_HEIGHT = 40;
+        const BULLET_SIZE = 8;
+        const ENEMY_SIZE = 40;
+        const POWERUP_SIZE = 30;
+        const ENEMY_SPAWN_RATE = 2000; // ms
+        const POWERUP_SPAWN_RATE = 15000; // ms
+        const POWERUP_DURATION = 10000; // ms
+        // Game variables
+        let score = 0;
+        let health = 100;
+        let gameOver = false;
+        let gameStarted = false;
+        let lastEnemySpawn = 0;
+        let lastPowerupSpawn = 0;
+        let powerupsActive = {
+            tripleShot: false,
+            rapidFire: false,
+            shield: false
+        };
+        // DOM elements
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const scoreDisplay = document.getElementById('scoreDisplay');
+        const healthFill = document.getElementById('healthFill');
+        const startScreen = document.getElementById('startScreen');
+        const gameOverScreen = document.getElementById('gameOverScreen');
+        const startBtn = document.getElementById('startBtn');
+        const restartBtn = document.getElementById('restartBtn');
+        const finalScore = document.getElementById('finalScore');
+        const powerupsContainer = document.getElementById('powerups');
+        // Audio elements
+        const laserSound = document.getElementById('laserSound');
+        const explosionSound = document.getElementById('explosionSound');
+        const powerupSound = document.getElementById('powerupSound');
+        const backgroundMusic = document.getElementById('backgroundMusic');
+        // Set canvas size
+        canvas.width = GAME_WIDTH;
+        canvas.height = GAME_HEIGHT;
+        // Game objects
+        const player = {
+            x: GAME_WIDTH / 2,
+            y: GAME_HEIGHT - 100,
+            width: PLAYER_WIDTH,
+            height: PLAYER_HEIGHT,
+            speed: 8,
+            color: '#0ff',
+            bullets: [],
+            lastShot: 0,
+            shootDelay: 500, // ms
+            isAlive: true
+        };
+        const enemies = [];
+        const powerups = [];
+        const explosions = [];
+        // Keyboard state
+        const keys = {
+            ArrowLeft: false,
+            ArrowRight: false,
+            ArrowUp: false,
+            ArrowDown: false,
+            Space: false
+        };
+        // Event listeners
+        window.addEventListener('resize', () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            player.y = canvas.height - 100;
+        });
+        document.addEventListener('keydown', (e) => {
+            if (keys.hasOwnProperty(e.key)) {
+                keys[e.key] = true;
+                e.preventDefault();
+            }
+        });
+        document.addEventListener('keyup', (e) => {
+            if (keys.hasOwnProperty(e.key)) {
+                keys[e.key] = false;
+                e.preventDefault();
+            }
+        });
+        startBtn.addEventListener('click', startGame);
+        restartBtn.addEventListener('click', startGame);
+        function startGame() {
+            // Reset game state
+            score = 0;
+            health = 100;
+            gameOver = false;
+            gameStarted = true;
+            player.isAlive = true;
+            player.bullets = [];
+            enemies.length = 0;
+            powerups.length = 0;
+            explosions.length = 0;
+            powerupsActive = {
+                tripleShot: false,
+                rapidFire: false,
+                shield: false
+            };
+            updatePowerupDisplay();
+            // Clear powerups container
+            while (powerupsContainer.firstChild) {
+                powerupsContainer.removeChild(powerupsContainer.firstChild);
+            }
+            // Reset player position
+            player.x = canvas.width / 2;
+            player.y = canvas.height - 100;
+            player.lastShot = 0;
+            // Reset UI
+            scoreDisplay.textContent = `SCORE: ${score}`;
+            healthFill.style.width = '100%';
+            // Hide screens
+            startScreen.style.display = 'none';
+            gameOverScreen.style.display = 'none';
+            // Start game loop
+            requestAnimationFrame(gameLoop);
+            // Start background music
+            backgroundMusic.volume = 0.3;
+            backgroundMusic.play().catch(e => console.log("Audio play failed:", e));
+        }
+        function gameLoop(timestamp) {
+            if (gameOver) {
+                endGame();
+                return;
+            }
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Spawn enemies
+            if (timestamp - lastEnemySpawn > ENEMY_SPAWN_RATE) {
+                spawnEnemy();
+                lastEnemySpawn = timestamp;
+                // Increase spawn rate as score increases
+                ENEMY_SPAWN_RATE = Math.max(500, 2000 - Math.floor(score / 10) * 50);
+            }
+            // Spawn powerups
+            if (timestamp - lastPowerupSpawn > POWERUP_SPAWN_RATE) {
+                spawnPowerup();
+                lastPowerupSpawn = timestamp;
+            }
+            // Update player
+            updatePlayer();
+            // Update bullets
+            updateBullets();
+            // Update enemies
+            updateEnemies();
+            // Update powerups
+            updatePowerups();
+            // Update explosions
+            updateExplosions();
+            // Draw player
+            drawPlayer();
+            // Draw bullets
+            drawBullets();
+            // Draw enemies
+            drawEnemies();
+            // Draw powerups
+            drawPowerups();
+            // Draw explosions
+            drawExplosions();
+            // Continue game loop
+            requestAnimationFrame(gameLoop);
+        }
+        function spawnEnemy() {
+            const size = Math.random() * 30 + 30;
+            const x = Math.random() * (canvas.width - size);
+            const y = -size;
+            const speed = Math.random() * 3 + 1;
+            const health = Math.floor(Math.random() * 2) + 1;
+            enemies.push({
+                x: x,
+                y: y,
+                width: size,
+                height: size,
+                speed: speed,
+                health: health,
+                origX: x,
+                movePattern: Math.random() > 0.5 ? 'straight' : 'zigzag',
+                zigzagSpeed: Math.random() * 0.1,
+                zigzagAmplitude: Math.random() * 100 + 50
+            });
+        }
+        function spawnPowerup() {
+            const x = Math.random() * (canvas.width - POWERUP_SIZE);
+            const y = -POWERUP_SIZE;
+            const types = ['tripleShot', 'rapidFire', 'shield'];
+            const type = types[Math.floor(Math.random() * types.length)];
+            powerups.push({
+                x: x,
+                y: y,
+                width: POWERUP_SIZE,
+                height: POWERUP_SIZE,
+                speed: 3,
+                type: type
+            });
+        }
+        function updatePlayer() {
+            // Movement
+            if (keys.ArrowLeft && player.x > 0) {
+                player.x -= player.speed;
+            }
+            if (keys.ArrowRight && player.x < canvas.width - player.width) {
+                player.x += player.speed;
+            }
+            if (keys.ArrowUp && player.y > canvas.height / 2) {
+                player.y -= player.speed;
+            }
+            if (keys.ArrowDown && player.y < canvas.height - player.height) {
+                player.y += player.speed;
+            }
+            // Shooting
+            if (keys.Space && Date.now() - player.lastShot > (powerupsActive.rapidFire ? 100 : player.shootDelay)) {
+                shoot();
+                player.lastShot = Date.now();
+            }
+        }
+        function shoot() {
+            if (powerupsActive.tripleShot) {
+                // Three spread shots
+                player.bullets.push({
+                    x: player.x + player.width / 2 - BULLET_SIZE / 2,
+                    y: player.y,
+                    width: BULLET_SIZE,
+                    height: BULLET_SIZE,
+                    speed: -10,
+                    angle: -0.1
+                });
+                player.bullets.push({
+                    x: player.x + player.width / 2 - BULLET_SIZE / 2,
+                    y: player.y,
+                    width: BULLET_SIZE,
+                    height: BULLET_SIZE,
+                    speed: -10,
+                    angle: 0
+                });
+                player.bullets.push({
+                    x: player.x + player.width / 2 - BULLET_SIZE / 2,
+                    y: player.y,
+                    width: BULLET_SIZE,
+                    height: BULLET_SIZE,
+                    speed: -10,
+                    angle: 0.1
+                });
+            } else {
+                // Single shot
+                player.bullets.push({
+                    x: player.x + player.width / 2 - BULLET_SIZE / 2,
+                    y: player.y,
+                    width: BULLET_SIZE,
+                    height: BULLET_SIZE,
+                    speed: -10,
+                    angle: 0
+                });
+            }
+            // Play laser sound
+            laserSound.currentTime = 0;
+            laserSound.play().catch(e => console.log("Audio play failed:", e));
+        }
+        function updateBullets() {
+            for (let i = player.bullets.length - 1; i >= 0; i--) {
+                const bullet = player.bullets[i];
+                bullet.y += bullet.speed;
+                if (bullet.angle !== 0) {
+                    bullet.x += Math.sin(bullet.angle) * 5;
+                }
+                // Remove bullets that go off screen
+                if (bullet.y + bullet.height < 0) {
+                    player.bullets.splice(i, 1);
+                }
+            }
+        }
+        function updateEnemies() {
+            for (let i = enemies.length - 1; i >= 0; i--) {
+                const enemy = enemies[i];
+                // Update position based on movement pattern
+                if (enemy.movePattern === 'straight') {
+                    enemy.y += enemy.speed;
+                } else if (enemy.movePattern === 'zigzag') {
+                    enemy.y += enemy.speed;
+                    enemy.x = enemy.origX + Math.sin(enemy.y * enemy.zigzagSpeed) * enemy.zigzagAmplitude;
+                }
+                // Check if enemy hits player
+                if (
+                    player.isAlive &&
+                    enemy.y + enemy.height > player.y &&
+                    enemy.y < player.y + player.height &&
+                    enemy.x + enemy.width > player.x &&
+                    enemy.x < player.x + player.width
+                ) {
+                    takeDamage(10);
+                    // Create explosion at enemy position
+                    createExplosion(enemy.x + enemy.width/2, enemy.y + enemy.height/2, enemy.width * 1.5);
+                    enemies.splice(i, 1);
+                    // Play explosion sound
+                    explosionSound.currentTime = 0;
+                    explosionSound.play().catch(e => console.log("Audio play failed:", e));
+                    continue;
+                }
+                // Remove enemies that go off screen
+                if (enemy.y > canvas.height) {
+                    enemies.splice(i, 1);
+                    continue;
+                }
+                // Check bullet collisions
+                for (let j = player.bullets.length - 1; j >= 0; j--) {
+                    const bullet = player.bullets[j];
+                    if (
+                        bullet.y + bullet.height > enemy.y &&
+                        bullet.y < enemy.y + enemy.height &&
+                        bullet.x + bullet.width > enemy.x &&
+                        bullet.x < enemy.x + enemy.width
+                    ) {
+                        // Hit detected
+                        enemy.health--;
+                        if (enemy.health <= 0) {
+                            // Enemy destroyed
+                            score += 10;
+                            scoreDisplay.textContent = `SCORE: ${score}`;
+                            enemies.splice(i, 1);
+                            createExplosion(enemy.x + enemy.width/2, enemy.y + enemy.height/2, enemy.width);
+                            // Play explosion sound
+                            explosionSound.currentTime = 0;
+                            explosionSound.play().catch(e => console.log("Audio play failed:", e));
+                        }
+                        player.bullets.splice(j, 1);
+                        break;
+                    }
+                }
+            }
+        }
+        function updatePowerups() {
+            for (let i = powerups.length - 1; i >= 0; i--) {
+                const powerup = powerups[i];
+                powerup.y += powerup.speed;
+                // Check if player collects powerup
+                if (
+                    player.isAlive &&
+                    powerup.y + powerup.height > player.y &&
+                    powerup.y < player.y + player.height &&
+                    powerup.x + powerup.width > player.x &&
+                    powerup.x < player.x + player.width
+                ) {
+                    activatePowerup(powerup.type);
+                    powerups.splice(i, 1);
+                    // Play powerup sound
+                    powerupSound.currentTime = 0;
+                    powerupSound.play().catch(e => console.log("Audio play failed:", e));
+                    continue;
+                }
+                // Remove powerups that go off screen
+                if (powerup.y > canvas.height) {
+                    powerups.splice(i, 1);
+                }
+            }
+            // Check if powerups should expire
+            const now = Date.now();
+            for (const type in powerupsActive) {
+                if (powerupsActive[type] && now - powerupsActive[type] > POWERUP_DURATION) {
+                    powerupsActive[type] = false;
+                    updatePowerupDisplay();
+                }
+            }
+        }
+        function activatePowerup(type) {
+            powerupsActive[type] = Date.now();
+            updatePowerupDisplay();
+            // Display powerup notification
+            const notification = document.createElement('div');
+            notification.className = 'powerup-notification';
+            notification.textContent = type === 'tripleShot' ? 'TRIPLE SHOT ACTIVATED' :
+                                     type === 'rapidFire' ? 'RAPID FIRE ACTIVATED' :
+                                     'SHIELD ACTIVATED';
+            notification.style.position = 'absolute';
+            notification.style.left = '50%';
+            notification.style.top = '30%';
+            notification.style.transform = 'translateX(-50%)';
+            notification.style.color = '#ff0';
+            notification.style.fontSize = '24px';
+            notification.style.textShadow = '0 0 10px #ff0';
+            notification.style.opacity = '0';
+            notification.style.transition = 'opacity 1s';
+            document.getElementById('uiOverlay').appendChild(notification);
+            // Fade in
+            setTimeout(() => {
+                notification.style.opacity = '1';
+            }, 10);
+            // Fade out and remove
+            setTimeout(() => {
+                notification.style.opacity = '0';
+                setTimeout(() => {
+                    notification.remove();
+                }, 1000);
+            }, 3000);
+        }
+        function updatePowerupDisplay() {
+            // Clear existing icons
+            powerupsContainer.innerHTML = '';
+            // Add icons for active powerups
+            for (const type in powerupsActive) {
+                if (powerupsActive[type]) {
+                    const icon = document.createElement('div');
+                    icon.className = 'powerup-icon';
+                    icon.textContent = type === 'tripleShot' ? '3x' :
+                                     type === 'rapidFire' ? 'RF' :
+                                     'S';
+                    icon.title = type === 'tripleShot' ? 'Triple Shot' :
+                                type === 'rapidFire' ? 'Rapid Fire' :
+                                'Shield';
+                    // Add progress bar
+                    const progress = document.createElement('div');
+                    progress.style.position = 'absolute';
+                    progress.style.bottom = '-5px';
+                    progress.style.left = '0';
+                    progress.style.width = '100%';
+                    progress.style.height = '3px';
+                    progress.style.backgroundColor = '#ff0';
+                    progress.style.transformOrigin = 'left center';
+                    // Calculate remaining time
+                    const durationLeft = Math.max(0, POWERUP_DURATION - (Date.now() - powerupsActive[type]));
+                    const percentageLeft = (durationLeft / POWERUP_DURATION) * 100;
+                    progress.style.transform = `scaleX(${percentageLeft / 100})`;
+                    icon.appendChild(progress);
+                    powerupsContainer.appendChild(icon);
+                    // Update progress bar
+                    const interval = setInterval(() => {
+                        const timeLeft = Math.max(0, POWERUP_DURATION - (Date.now() - powerupsActive[type]));
+                        const percentage = (timeLeft / POWERUP_DURATION) * 100;
+                        progress.style.transform = `scaleX(${percentage / 100})`;
+                        if (timeLeft <= 0) {
+                            clearInterval(interval);
+                        }
+                    }, 100);
+                }
+            }
+        }
+        function createExplosion(x, y, radius) {
+            explosions.push({
+                x: x,
+                y: y,
+                radius: radius,
+                maxRadius: radius * 1.5,
+                alpha: 1,
+                life: 1
+            });
+        }
+        function updateExplosions() {
+            for (let i = explosions.length - 1; i >= 0; i--) {
+                const explosion = explosions[i];
+                explosion.radius += 0.5;
+                explosion.life -= 0.02;
+                if (explosion.life <= 0) {
+                    explosions.splice(i, 1);
+                }
+            }
+        }
+        function takeDamage(amount) {
+            if (powerupsActive.shield) return;
+            health = Math.max(0, health - amount);
+            healthFill.style.width = `${health}%`;
+            if (health <= 0) {
+                player.isAlive = false;
+                gameOver = true;
+                createExplosion(player.x + player.width/2, player.y + player.height/2, player.width * 2);
+            }
+        }
+        function drawPlayer() {
+            if (!player.isAlive) return;
+            // Draw ship body
+            ctx.fillStyle = player.color;
+            ctx.beginPath();
+            ctx.moveTo(player.x + player.width/2, player.y);
+            ctx.lineTo(player.x + player.width, player.y + player.height);
+            ctx.lineTo(player.x, player.y + player.height);
+            ctx.closePath();
+            ctx.fill();
+            // Draw cockpit
+            ctx.fillStyle = '#0af';
+            ctx.beginPath();
+            ctx.arc(player.x + player.width/2, player.y + player.height/2, player.width/4, 0, Math.PI * 2);
+            ctx.fill();
+            // Draw engine glow
+            if (Date.now() % 200 < 100) {
+                ctx.fillStyle = '#f80';
+                ctx.beginPath();
+                ctx.moveTo(player.x + player.width/3, player.y + player.height);
+                ctx.lineTo(player.x + player.width/2, player.y + player.height + 10);
+                ctx.lineTo(player.x + 2*player.width/3, player.y + player.height);
+                ctx.closePath();
+                ctx.fill();
+            }
+            // Draw shield if active
+            if (powerupsActive.shield) {
+                ctx.strokeStyle = '#0ff';
+                ctx.lineWidth = 2;
+                ctx.beginPath();
+                ctx.arc(player.x + player.width/2, player.y + player.height/2, player.width, 0, Math.PI * 2);
+                ctx.stroke();
+                ctx.strokeStyle = '#0ff';
+                ctx.lineWidth = 1;
+                ctx.beginPath();
+                ctx.arc(player.x + player.width/2, player.y + player.height/2, player.width * 1.3, 0, Math.PI * 2);
+                ctx.stroke();
+            }
+        }
+        function drawBullets() {
+            ctx.fillStyle = '#ff0';
+            for (const bullet of player.bullets) {
+                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
+                // Add trail effect
+                ctx.fillStyle = 'rgba(255, 255, 0, 0.5)';
+                ctx.fillRect(bullet.x, bullet.y + bullet.height, bullet.width, bullet.height/2);
+                ctx.fillStyle = '#ff0';
+            }
+        }
+        function drawEnemies() {
+            for (const enemy of enemies) {
+                // Different colors for different health levels
+                ctx.fillStyle = enemy.health === 2 ? '#f60' : '#f06';
+                // Draw alien ship
+                ctx.beginPath();
+                ctx.moveTo(enemy.x + enemy.width/2, enemy.y);
+                ctx.lineTo(enemy.x + enemy.width, enemy.y + enemy.height);
+                ctx.lineTo(enemy.x, enemy.y + enemy.height);
+                ctx.closePath();
+                ctx.fill();
+                // Draw alien markings
+                if (enemy.health === 2) {
+                    ctx.strokeStyle = '#0f0';
+                    ctx.lineWidth = 2;
+                    ctx.beginPath();
+                    ctx.moveTo(enemy.x + enemy.width/3, enemy.y + enemy.height/2);
+                    ctx.lineTo(enemy.x + 2*enemy.width/3, enemy.y + enemy.height/2);
+                    ctx.stroke();
+                }
+                // Draw glow effect
+                ctx.fillStyle = 'rgba(255, 0, 0, 0.2)';
+                ctx.beginPath();
+                ctx.arc(enemy.x + enemy.width/2, enemy.y + enemy.height/2, enemy.width * 0.8, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        function drawPowerups() {
+            for (const powerup of powerups) {
+                let color;
+                let symbol;
+                if (powerup.type === 'tripleShot') {
+                    color = '#0f0';
+                    symbol = '3x';
+                } else if (powerup.type === 'rapidFire') {
+                    color = '#00f';
+                    symbol = 'RF';
+                } else {
+                    color = '#0ff';
+                    symbol = 'S';
+                }
+                // Draw powerup background
+                ctx.fillStyle = color;
+                ctx.beginPath();
+                ctx.arc(powerup.x + powerup.width/2, powerup.y + powerup.height/2, powerup.width/2, 0, Math.PI * 2);
+                ctx.fill();
+                // Draw symbol
+                ctx.fillStyle = '#000';
+                ctx.font = 'bold 12px Orbitron';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(symbol, powerup.x + powerup.width/2, powerup.y + powerup.height/2);
+                // Add pulsing glow effect
+                const pulse = Math.sin(Date.now() / 200) * 0.3 + 0.7;
+                ctx.strokeStyle = `rgba(${color === '#0f0' ? '0,255,0' : color === '#00f' ? '0,0,255' : '0,255,255'},${pulse})`;
+                ctx.lineWidth = 2;
+                ctx.beginPath();
+                ctx.arc(powerup.x + powerup.width/2, powerup.y + powerup.height/2, powerup.width/2 + 2, 0, Math.PI * 2);
+                ctx.stroke();
+            }
+        }
+        function drawExplosions() {
+            for (const explosion of explosions) {
+                const gradient = ctx.createRadialGradient(
+                    explosion.x,
+                    explosion.y,
+                    0,
+                    explosion.x,
+                    explosion.y,
+                    explosion.radius
+                );
+                gradient.addColorStop(0, `rgba(255, 255, 0, ${explosion.life})`);
+                gradient.addColorStop(0.5, `rgba(255, 100, 0, ${explosion.life * 0.7})`);
+                gradient.addColorStop(1, `rgba(255, 0, 0, 0)`);
+                ctx.beginPath();
+                ctx.fillStyle = gradient;
+                ctx.arc(explosion.x, explosion.y, explosion.radius, 0, Math.PI * 2);
+                ctx.fill();
+                // Add secondary explosion ring
+                if (explosion.life > 0.5) {
+                    const outerRadius = explosion.radius * 1.5;
+                    const outerAlpha = (explosion.life - 0.5) * 2;
+                    const outerGradient = ctx.createRadialGradient(
+                        explosion.x,
+                        explosion.y,
+                        0,
+                        explosion.x,
+                        explosion.y,
+                        outerRadius
+                    );
+                    outerGradient.addColorStop(0, `rgba(255, 255, 255, ${outerAlpha})`);
+                    outerGradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+                    ctx.beginPath();
+                    ctx.fillStyle = outerGradient;
+                    ctx.arc(explosion.x, explosion.y, outerRadius, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            }
+        }
+        function endGame() {
+            gameOver = true;
+            gameOverScreen.style.display = 'flex';
+            finalScore.textContent = `SCORE: ${score}`;
+            backgroundMusic.pause();
+            backgroundMusic.currentTime = 0;
+        }
+    </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>