Spaces:

beansfotos
/

galactic-defender-v1

Running

App Files Files Community

beansfotos commited on Apr 14

Commit

ac5a575

verified ·

1 Parent(s): 4f0301a

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +913 -19

README.md CHANGED Viewed

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

 ---
+title: galactic-defender-v1
+emoji: 🐳
 colorFrom: gray
+colorTo: red
 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,913 @@
-<!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>Galactic Defender</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>
+        @keyframes enemyShoot {
+            0% { transform: translateY(0); }
+            100% { transform: translateY(100vh); }
+        }
+        @keyframes powerupFloat {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        .enemy-bullet {
+            animation: enemyShoot linear;
+        }
+        .powerup {
+            animation: powerupFloat 2s ease-in-out infinite;
+        }
+        #gameCanvas {
+            background: linear-gradient(to bottom, #0f172a, #1e293b);
+            image-rendering: pixelated;
+        }
+        .explosion {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="orange" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="4" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="20" y2="12"/><line x1="4.93" y1="4.93" x2="6.34" y2="6.34"/><line x1="17.66" y1="17.66" x2="19.07" y2="19.07"/><line x1="4.93" y1="19.07" x2="6.34" y2="17.66"/><line x1="17.66" y1="6.34" x2="19.07" y2="4.93"/></svg>');
+            background-size: contain;
+            animation: explode 0.5s ease-out forwards;
+        }
+        @keyframes explode {
+            0% { transform: scale(0.5); opacity: 1; }
+            100% { transform: scale(2); opacity: 0; }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white font-mono overflow-hidden">
+    <div class="container mx-auto px-4 py-8 flex flex-col items-center min-h-screen">
+        <h1 class="text-4xl font-bold mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600">
+            GALACTIC DEFENDER
+        </h1>
+        <div id="gameContainer" class="relative w-full max-w-2xl h-96 md:h-[500px] mb-4 rounded-lg overflow-hidden border-2 border-blue-500 shadow-lg shadow-blue-500/20">
+            <canvas id="gameCanvas" class="w-full h-full"></canvas>
+            <div id="startScreen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-80 p-4">
+                <h2 class="text-3xl font-bold mb-6 text-blue-400">GALACTIC DEFENDER</h2>
+                <p class="text-lg mb-8 text-center max-w-md">Defend Earth from alien invaders! Collect powerups and survive as long as you can.</p>
+                <button id="startButton" class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg text-xl font-bold transition-all transform hover:scale-105">
+                    START MISSION
+                </button>
+                <div class="mt-8 text-sm text-gray-400">
+                    <p class="mb-2"><i class="fas fa-arrow-left mr-2"></i> <i class="fas fa-arrow-right mr-2"></i> Move</p>
+                    <p><i class="fas fa-space-shuttle mr-2"></i> <i class="fas fa-arrow-up mr-2"></i> Shoot</p>
+                </div>
+            </div>
+            <div id="gameOverScreen" class="absolute inset-0 hidden flex-col items-center justify-center bg-black bg-opacity-80 p-4">
+                <h2 class="text-3xl font-bold mb-2 text-red-500">MISSION FAILED</h2>
+                <p class="text-xl mb-6">Your score: <span id="finalScore">0</span></p>
+                <p class="text-lg mb-4">Level reached: <span id="finalLevel">1</span></p>
+                <button id="restartButton" class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg text-xl font-bold transition-all transform hover:scale-105">
+                    TRY AGAIN
+                </button>
+            </div>
+            <div id="levelCompleteScreen" class="absolute inset-0 hidden flex-col items-center justify-center bg-black bg-opacity-80 p-4">
+                <h2 class="text-3xl font-bold mb-6 text-green-400">LEVEL COMPLETE!</h2>
+                <p class="text-xl mb-8">Preparing for next wave...</p>
+                <div class="w-full max-w-xs h-2 bg-gray-700 rounded-full overflow-hidden">
+                    <div id="levelTransitionProgress" class="h-full bg-blue-500 rounded-full transition-all duration-1000"></div>
+                </div>
+            </div>
+        </div>
+        <div class="w-full max-w-2xl flex justify-between items-center mb-4">
+            <div class="flex items-center">
+                <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-2">
+                    <i class="fas fa-heart text-white"></i>
+                </div>
+                <span id="lives" class="text-xl">3</span>
+            </div>
+            <div class="text-center">
+                <div class="text-xl">Score: <span id="score">0</span></div>
+                <div class="text-sm text-gray-400">Level: <span id="level">1</span></div>
+            </div>
+            <div class="flex items-center">
+                <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center mr-2">
+                    <i class="fas fa-bolt text-white"></i>
+                </div>
+                <span id="powerupTimer" class="text-xl">0</span>
+            </div>
+        </div>
+        <div class="w-full max-w-2xl bg-gray-800 rounded-lg p-4 mb-4">
+            <h3 class="text-lg font-bold mb-2 text-blue-400">POWERUPS</h3>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
+                <div class="flex items-center">
+                    <div class="w-6 h-6 bg-red-500 rounded-full mr-2"></div>
+                    <span class="text-sm">Rapid Fire</span>
+                </div>
+                <div class="flex items-center">
+                    <div class="w-6 h-6 bg-green-500 rounded-full mr-2"></div>
+                    <span class="text-sm">Shield</span>
+                </div>
+                <div class="flex items-center">
+                    <div class="w-6 h-6 bg-yellow-500 rounded-full mr-2"></div>
+                    <span class="text-sm">Multi-Shot</span>
+                </div>
+                <div class="flex items-center">
+                    <div class="w-6 h-6 bg-purple-500 rounded-full mr-2"></div>
+                    <span class="text-sm">Nuke</span>
+                </div>
+            </div>
+        </div>
+        <div class="text-sm text-gray-500 text-center">
+            <p>Use arrow keys to move and spacebar to shoot</p>
+            <p>Collect powerups for special abilities</p>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Game elements
+            const canvas = document.getElementById('gameCanvas');
+            const ctx = canvas.getContext('2d');
+            const startScreen = document.getElementById('startScreen');
+            const gameOverScreen = document.getElementById('gameOverScreen');
+            const levelCompleteScreen = document.getElementById('levelCompleteScreen');
+            const startButton = document.getElementById('startButton');
+            const restartButton = document.getElementById('restartButton');
+            const scoreDisplay = document.getElementById('score');
+            const livesDisplay = document.getElementById('lives');
+            const levelDisplay = document.getElementById('level');
+            const finalScoreDisplay = document.getElementById('finalScore');
+            const finalLevelDisplay = document.getElementById('finalLevel');
+            const powerupTimerDisplay = document.getElementById('powerupTimer');
+            const levelTransitionProgress = document.getElementById('levelTransitionProgress');
+            // Set canvas size
+            function resizeCanvas() {
+                const container = document.getElementById('gameContainer');
+                canvas.width = container.clientWidth;
+                canvas.height = container.clientHeight;
+            }
+            resizeCanvas();
+            window.addEventListener('resize', resizeCanvas);
+            // Game state
+            let gameRunning = false;
+            let score = 0;
+            let lives = 3;
+            let level = 1;
+            let enemies = [];
+            let enemyBullets = [];
+            let playerBullets = [];
+            let explosions = [];
+            let powerups = [];
+            let activePowerup = null;
+            let powerupTimeLeft = 0;
+            // Player
+            const player = {
+                x: canvas.width / 2 - 25,
+                y: canvas.height - 60,
+                width: 50,
+                height: 40,
+                speed: 8,
+                color: '#3b82f6',
+                isShielded: false,
+                lastShot: 0,
+                shootDelay: 500, // ms between shots
+                moveLeft: false,
+                moveRight: false
+            };
+            // Powerup types
+            const POWERUP_TYPES = {
+                RAPID_FIRE: {
+                    color: '#ef4444',
+                    duration: 10000, // 10 seconds
+                    effect: () => {
+                        player.shootDelay = 200;
+                    },
+                    reset: () => {
+                        player.shootDelay = 500;
+                    }
+                },
+                SHIELD: {
+                    color: '#10b981',
+                    duration: 8000, // 8 seconds
+                    effect: () => {
+                        player.isShielded = true;
+                    },
+                    reset: () => {
+                        player.isShielded = false;
+                    }
+                },
+                MULTI_SHOT: {
+                    color: '#eab308',
+                    duration: 7000, // 7 seconds
+                    effect: () => {}, // Handled in shooting logic
+                    reset: () => {}
+                },
+                NUKE: {
+                    color: '#8b5cf6',
+                    duration: 0, // Instant effect
+                    effect: () => {
+                        // Destroy all enemies
+                        enemies.forEach(enemy => {
+                            createExplosion(enemy.x + enemy.width/2, enemy.y + enemy.height/2);
+                            score += enemy.points;
+                        });
+                        enemies = [];
+                        scoreDisplay.textContent = score;
+                    },
+                    reset: () => {}
+                }
+            };
+            // Initialize level
+            function initLevel() {
+                enemies = [];
+                enemyBullets = [];
+                const enemyRows = Math.min(3 + Math.floor(level / 2), 6);
+                const enemyCols = Math.min(5 + Math.floor(level / 3), 10);
+                const enemyWidth = 40;
+                const enemyHeight = 30;
+                const padding = 10;
+                const startX = (canvas.width - (enemyCols * (enemyWidth + padding))) / 2;
+                for (let row = 0; row < enemyRows; row++) {
+                    for (let col = 0; col < enemyCols; col++) {
+                        const enemyType = Math.floor(Math.random() * 3);
+                        let color, points;
+                        switch (enemyType) {
+                            case 0: // Basic enemy
+                                color = '#f43f5e';
+                                points = 10 * level;
+                                break;
+                            case 1: // Fast enemy
+                                color = '#f97316';
+                                points = 20 * level;
+                                break;
+                            case 2: // Strong enemy
+                                color = '#6366f1';
+                                points = 30 * level;
+                                break;
+                        }
+                        enemies.push({
+                            x: startX + col * (enemyWidth + padding),
+                            y: 30 + row * (enemyHeight + padding),
+                            width: enemyWidth,
+                            height: enemyHeight,
+                            color: color,
+                            speed: 1 + (level * 0.2) + (enemyType === 1 ? 1 : 0),
+                            points: points,
+                            health: enemyType === 2 ? 2 : 1,
+                            shootDelay: 2000 + Math.random() * 3000 - (level * 100),
+                            lastShot: 0,
+                            direction: 1
+                        });
+                    }
+                }
+                levelDisplay.textContent = level;
+            }
+            // Create explosion effect
+            function createExplosion(x, y) {
+                explosions.push({
+                    x: x - 20,
+                    y: y - 20,
+                    time: 0,
+                    duration: 500
+                });
+            }
+            // Spawn a random powerup
+            function spawnPowerup(x, y) {
+                // 30% chance to spawn a powerup
+                if (Math.random() > 0.3) return;
+                const powerupKeys = Object.keys(POWERUP_TYPES);
+                const randomPowerup = powerupKeys[Math.floor(Math.random() * powerupKeys.length)];
+                powerups.push({
+                    x: x,
+                    y: y,
+                    width: 20,
+                    height: 20,
+                    type: POWERUP_TYPES[randomPowerup],
+                    color: POWERUP_TYPES[randomPowerup].color
+                });
+            }
+            // Activate a powerup
+            function activatePowerup(powerup) {
+                // If there's already an active powerup, reset it first
+                if (activePowerup) {
+                    activePowerup.reset();
+                }
+                activePowerup = powerup.type;
+                powerupTimeLeft = powerup.type.duration;
+                powerup.type.effect();
+                // Update UI
+                powerupTimerDisplay.textContent = Math.ceil(powerupTimeLeft / 1000);
+                powerupTimerDisplay.parentElement.classList.remove('text-gray-400');
+                powerupTimerDisplay.parentElement.classList.add('text-yellow-400');
+            }
+            // Reset active powerup
+            function resetPowerup() {
+                if (activePowerup) {
+                    activePowerup.reset();
+                    activePowerup = null;
+                    powerupTimeLeft = 0;
+                    // Update UI
+                    powerupTimerDisplay.textContent = '0';
+                    powerupTimerDisplay.parentElement.classList.remove('text-yellow-400');
+                    powerupTimerDisplay.parentElement.classList.add('text-gray-400');
+                }
+            }
+            // Player shooting
+            function playerShoot() {
+                const now = Date.now();
+                if (now - player.lastShot < player.shootDelay) return;
+                player.lastShot = now;
+                if (activePowerup === POWERUP_TYPES.MULTI_SHOT) {
+                    // Triple shot
+                    playerBullets.push({
+                        x: player.x + player.width/2 - 2,
+                        y: player.y,
+                        width: 4,
+                        height: 10,
+                        color: '#ffffff',
+                        speed: 10,
+                        angle: 0 // Straight up
+                    });
+                    playerBullets.push({
+                        x: player.x + player.width/2 - 2,
+                        y: player.y,
+                        width: 4,
+                        height: 10,
+                        color: '#ffffff',
+                        speed: 10,
+                        angle: -0.3 // Left angle
+                    });
+                    playerBullets.push({
+                        x: player.x + player.width/2 - 2,
+                        y: player.y,
+                        width: 4,
+                        height: 10,
+                        color: '#ffffff',
+                        speed: 10,
+                        angle: 0.3 // Right angle
+                    });
+                } else {
+                    // Single shot
+                    playerBullets.push({
+                        x: player.x + player.width/2 - 2,
+                        y: player.y,
+                        width: 4,
+                        height: 10,
+                        color: '#ffffff',
+                        speed: 10,
+                        angle: 0
+                    });
+                }
+            }
+            // Enemy shooting
+            function enemyShoot(enemy) {
+                const now = Date.now();
+                if (now - enemy.lastShot < enemy.shootDelay) return;
+                enemy.lastShot = now;
+                enemyBullets.push({
+                    x: enemy.x + enemy.width/2 - 2,
+                    y: enemy.y + enemy.height,
+                    width: 4,
+                    height: 10,
+                    color: '#f43f5e',
+                    speed: 5 + (level * 0.5),
+                    angle: 0
+                });
+            }
+            // Check collision between two objects
+            function checkCollision(obj1, obj2) {
+                return obj1.x < obj2.x + obj2.width &&
+                       obj1.x + obj1.width > obj2.x &&
+                       obj1.y < obj2.y + obj2.height &&
+                       obj1.y + obj1.height > obj2.y;
+            }
+            // Game loop
+            function gameLoop() {
+                if (!gameRunning) return;
+                // Clear canvas
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                // Draw starfield background
+                drawStarfield();
+                // Update player position
+                if (player.moveLeft && player.x > 0) {
+                    player.x -= player.speed;
+                }
+                if (player.moveRight && player.x < canvas.width - player.width) {
+                    player.x += player.speed;
+                }
+                // Draw player
+                drawPlayer();
+                // Update and draw bullets
+                updateBullets();
+                // Update and draw enemies
+                updateEnemies();
+                // Update and draw powerups
+                updatePowerups();
+                // Update and draw explosions
+                updateExplosions();
+                // Update active powerup timer
+                updatePowerupTimer();
+                // Check for level completion
+                if (enemies.length === 0) {
+                    levelComplete();
+                    return;
+                }
+                // Continue game loop
+                requestAnimationFrame(gameLoop);
+            }
+            // Draw starfield background
+            function drawStarfield() {
+                ctx.fillStyle = '#ffffff';
+                // Draw some static stars
+                for (let i = 0; i < 50; i++) {
+                    const x = (i * 12345) % canvas.width;
+                    const y = (i * 54321) % canvas.height;
+                    const size = Math.random() * 1.5;
+                    ctx.beginPath();
+                    ctx.arc(x, y, size, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+                // Draw some twinkling stars
+                const time = Date.now();
+                for (let i = 0; i < 20; i++) {
+                    const x = (i * 67890) % canvas.width;
+                    const y = (i * 9876) % canvas.height;
+                    const size = 1 + Math.sin(time * 0.001 + i) * 0.5;
+                    ctx.beginPath();
+                    ctx.arc(x, y, size, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            }
+            // Draw player ship
+            function drawPlayer() {
+                // Draw shield if active
+                if (player.isShielded) {
+                    ctx.beginPath();
+                    ctx.arc(player.x + player.width/2, player.y + player.height/2, player.width/2 + 10, 0, Math.PI * 2);
+                    ctx.strokeStyle = '#10b981';
+                    ctx.lineWidth = 2;
+                    ctx.stroke();
+                }
+                // 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 ship details
+                ctx.fillStyle = '#93c5fd';
+                ctx.beginPath();
+                ctx.moveTo(player.x + player.width/2, player.y + 10);
+                ctx.lineTo(player.x + player.width - 10, player.y + player.height - 5);
+                ctx.lineTo(player.x + 10, player.y + player.height - 5);
+                ctx.closePath();
+                ctx.fill();
+                // Draw engine glow
+                const time = Date.now();
+                const glowSize = 5 + Math.sin(time * 0.01) * 2;
+                ctx.fillStyle = '#f59e0b';
+                ctx.beginPath();
+                ctx.moveTo(player.x + player.width/2 - 5, player.y + player.height);
+                ctx.lineTo(player.x + player.width/2 + 5, player.y + player.height);
+                ctx.lineTo(player.x + player.width/2, player.y + player.height + glowSize);
+                ctx.closePath();
+                ctx.fill();
+            }
+            // Update and draw bullets
+            function updateBullets() {
+                // Player bullets
+                for (let i = playerBullets.length - 1; i >= 0; i--) {
+                    const bullet = playerBullets[i];
+                    // Update position based on angle
+                    bullet.x += Math.sin(bullet.angle) * 5;
+                    bullet.y -= bullet.speed;
+                    // Draw bullet
+                    ctx.fillStyle = bullet.color;
+                    ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
+                    // Remove if off screen
+                    if (bullet.y + bullet.height < 0) {
+                        playerBullets.splice(i, 1);
+                        continue;
+                    }
+                    // Check collision with enemies
+                    for (let j = enemies.length - 1; j >= 0; j--) {
+                        const enemy = enemies[j];
+                        if (checkCollision(bullet, enemy)) {
+                            // Hit enemy
+                            enemy.health--;
+                            if (enemy.health <= 0) {
+                                // Enemy destroyed
+                                createExplosion(enemy.x + enemy.width/2, enemy.y + enemy.height/2);
+                                score += enemy.points;
+                                scoreDisplay.textContent = score;
+                                // Chance to spawn powerup
+                                spawnPowerup(enemy.x + enemy.width/2, enemy.y + enemy.height/2);
+                                enemies.splice(j, 1);
+                            }
+                            playerBullets.splice(i, 1);
+                            break;
+                        }
+                    }
+                }
+                // Enemy bullets
+                for (let i = enemyBullets.length - 1; i >= 0; i--) {
+                    const bullet = enemyBullets[i];
+                    bullet.y += bullet.speed;
+                    // Draw bullet
+                    ctx.fillStyle = bullet.color;
+                    ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
+                    // Remove if off screen
+                    if (bullet.y > canvas.height) {
+                        enemyBullets.splice(i, 1);
+                        continue;
+                    }
+                    // Check collision with player
+                    if (checkCollision(bullet, player)) {
+                        if (player.isShielded) {
+                            // Shield blocks the bullet
+                            createExplosion(bullet.x + bullet.width/2, bullet.y + bullet.height/2);
+                        } else {
+                            // Player hit
+                            lives--;
+                            livesDisplay.textContent = lives;
+                            createExplosion(player.x + player.width/2, player.y + player.height/2);
+                            if (lives <= 0) {
+                                gameOver();
+                                return;
+                            }
+                        }
+                        enemyBullets.splice(i, 1);
+                    }
+                }
+            }
+            // Update and draw enemies
+            function updateEnemies() {
+                let moveDown = false;
+                let edgeReached = false;
+                // Check if any enemy has reached the edge
+                for (const enemy of enemies) {
+                    if ((enemy.x <= 0 && enemy.direction === -1) ||
+                        (enemy.x + enemy.width >= canvas.width && enemy.direction === 1)) {
+                        edgeReached = true;
+                        break;
+                    }
+                }
+                // Update enemy positions
+                for (const enemy of enemies) {
+                    // Change direction if edge reached
+                    if (edgeReached) {
+                        enemy.direction *= -1;
+                        moveDown = true;
+                    }
+                    // Move horizontally
+                    enemy.x += enemy.speed * enemy.direction;
+                    // Move down if needed
+                    if (moveDown) {
+                        enemy.y += 20;
+                    }
+                    // Random shooting
+                    if (Math.random() < 0.02) {
+                        enemyShoot(enemy);
+                    }
+                    // Draw enemy
+                    ctx.fillStyle = enemy.color;
+                    // Different enemy shapes based on type
+                    if (enemy.color === '#f43f5e') { // Basic enemy
+                        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();
+                    } else if (enemy.color === '#f97316') { // Fast enemy
+                        ctx.beginPath();
+                        ctx.ellipse(enemy.x + enemy.width/2, enemy.y + enemy.height/2,
+                                    enemy.width/2, enemy.height/2, 0, 0, Math.PI * 2);
+                        ctx.fill();
+                    } else { // Strong enemy
+                        ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
+                        // Draw armor detail
+                        ctx.fillStyle = '#a5b4fc';
+                        ctx.fillRect(enemy.x + 5, enemy.y + 5, enemy.width - 10, enemy.height - 10);
+                    }
+                    // Check if enemy reached bottom
+                    if (enemy.y + enemy.height >= canvas.height - 40) {
+                        gameOver();
+                        return;
+                    }
+                    // Check collision with player
+                    if (checkCollision(enemy, player)) {
+                        gameOver();
+                        return;
+                    }
+                }
+            }
+            // Update and draw powerups
+            function updatePowerups() {
+                for (let i = powerups.length - 1; i >= 0; i--) {
+                    const powerup = powerups[i];
+                    // Move down
+                    powerup.y += 2;
+                    // Draw powerup
+                    ctx.fillStyle = powerup.color;
+                    ctx.beginPath();
+                    ctx.arc(powerup.x + powerup.width/2, powerup.y + powerup.height/2,
+                            powerup.width/2, 0, Math.PI * 2);
+                    ctx.fill();
+                    // Add some glow
+                    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+                    ctx.beginPath();
+                    ctx.arc(powerup.x + powerup.width/2, powerup.y + powerup.height/2,
+                            powerup.width/2 + 3, 0, Math.PI * 2);
+                    ctx.fill();
+                    // Remove if off screen
+                    if (powerup.y > canvas.height) {
+                        powerups.splice(i, 1);
+                        continue;
+                    }
+                    // Check collision with player
+                    if (checkCollision(powerup, player)) {
+                        activatePowerup(powerup);
+                        powerups.splice(i, 1);
+                    }
+                }
+            }
+            // Update and draw explosions
+            function updateExplosions() {
+                for (let i = explosions.length - 1; i >= 0; i--) {
+                    const explosion = explosions[i];
+                    explosion.time += 16; // Approximate 60fps frame time
+                    // Draw explosion
+                    const progress = explosion.time / explosion.duration;
+                    const size = 20 + progress * 40;
+                    const alpha = 1 - progress;
+                    ctx.save();
+                    ctx.translate(explosion.x + 20, explosion.y + 20);
+                    ctx.scale(progress * 2, progress * 2);
+                    // Draw explosion particles
+                    for (let j = 0; j < 8; j++) {
+                        const angle = (j / 8) * Math.PI * 2;
+                        const length = 5 + Math.random() * 5;
+                        ctx.beginPath();
+                        ctx.moveTo(0, 0);
+                        ctx.lineTo(Math.cos(angle) * length, Math.sin(angle) * length);
+                        ctx.strokeStyle = `rgba(255, ${100 + Math.random() * 155}, 0, ${alpha})`;
+                        ctx.lineWidth = 2;
+                        ctx.stroke();
+                    }
+                    ctx.restore();
+                    // Remove if animation complete
+                    if (explosion.time >= explosion.duration) {
+                        explosions.splice(i, 1);
+                    }
+                }
+            }
+            // Update active powerup timer
+            function updatePowerupTimer() {
+                if (activePowerup && powerupTimeLeft > 0) {
+                    powerupTimeLeft -= 16; // Approximate 60fps frame time
+                    powerupTimerDisplay.textContent = Math.ceil(powerupTimeLeft / 1000);
+                    if (powerupTimeLeft <= 0) {
+                        resetPowerup();
+                    }
+                }
+            }
+            // Game over
+            function gameOver() {
+                gameRunning = false;
+                finalScoreDisplay.textContent = score;
+                finalLevelDisplay.textContent = level;
+                gameOverScreen.classList.remove('hidden');
+            }
+            // Level complete
+            function levelComplete() {
+                gameRunning = false;
+                levelCompleteScreen.classList.remove('hidden');
+                // Animate progress bar
+                levelTransitionProgress.style.width = '0%';
+                setTimeout(() => {
+                    levelTransitionProgress.style.width = '100%';
+                }, 10);
+                // Advance to next level after delay
+                setTimeout(() => {
+                    level++;
+                    initLevel();
+                    levelCompleteScreen.classList.add('hidden');
+                    startGame();
+                }, 2000);
+            }
+            // Start game
+            function startGame() {
+                // Reset game state
+                score = 0;
+                lives = 3;
+                level = 1;
+                playerBullets = [];
+                enemyBullets = [];
+                explosions = [];
+                powerups = [];
+                resetPowerup();
+                // Update UI
+                scoreDisplay.textContent = score;
+                livesDisplay.textContent = lives;
+                levelDisplay.textContent = level;
+                // Initialize first level
+                initLevel();
+                // Hide screens
+                startScreen.classList.add('hidden');
+                gameOverScreen.classList.add('hidden');
+                // Start game loop
+                gameRunning = true;
+                gameLoop();
+            }
+            // Restart game
+            function restartGame() {
+                gameOverScreen.classList.add('hidden');
+                startGame();
+            }
+            // Event listeners
+            startButton.addEventListener('click', startGame);
+            restartButton.addEventListener('click', restartGame);
+            // Keyboard controls
+            document.addEventListener('keydown', (e) => {
+                if (!gameRunning) return;
+                switch (e.key) {
+                    case 'ArrowLeft':
+                        player.moveLeft = true;
+                        break;
+                    case 'ArrowRight':
+                        player.moveRight = true;
+                        break;
+                    case ' ':
+                    case 'ArrowUp':
+                        playerShoot();
+                        break;
+                }
+            });
+            document.addEventListener('keyup', (e) => {
+                switch (e.key) {
+                    case 'ArrowLeft':
+                        player.moveLeft = false;
+                        break;
+                    case 'ArrowRight':
+                        player.moveRight = false;
+                        break;
+                }
+            });
+            // Touch controls for mobile
+            let touchStartX = 0;
+            canvas.addEventListener('touchstart', (e) => {
+                if (!gameRunning) return;
+                touchStartX = e.touches[0].clientX;
+                playerShoot();
+                e.preventDefault();
+            });
+            canvas.addEventListener('touchmove', (e) => {
+                if (!gameRunning) return;
+                const touchX = e.touches[0].clientX;
+                const diff = touchX - touchStartX;
+                if (diff > 10) {
+                    player.moveRight = true;
+                    player.moveLeft = false;
+                } else if (diff < -10) {
+                    player.moveLeft = true;
+                    player.moveRight = false;
+                }
+                e.preventDefault();
+            });
+            canvas.addEventListener('touchend', () => {
+                player.moveLeft = false;
+                player.moveRight = false;
+            });
+        });
+    </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=beansfotos/galactic-defender-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>