Spaces:

drdata
/

space-invaders

Running

App Files Files Community

drdata commited on 27 days ago

Commit

44c4929

verified ·

1 Parent(s): 4b352d4

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: space-invaders
+emoji: 🐳
 colorFrom: green
+colorTo: pink
 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,648 @@
-<!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>Space Invaders</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @keyframes enemyMove {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(10px); }
+            50% { transform: translateX(0); }
+            75% { transform: translateX(-10px); }
+        }
+        @keyframes explosion {
+            0% { transform: scale(0.5); opacity: 1; }
+            100% { transform: scale(1.5); opacity: 0; }
+        }
+        .enemy-animation {
+            animation: enemyMove 1s infinite;
+        }
+        .explosion {
+            animation: explosion 0.5s forwards;
+        }
+        #gameCanvas {
+            background-color: #111827;
+            border-radius: 8px;
+            box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
+        }
+        .pixel-art {
+            image-rendering: pixelated;
+            image-rendering: -moz-crisp-edges;
+            image-rendering: crisp-edges;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="text-center mb-6">
+        <h1 class="text-4xl font-bold mb-2 text-blue-400">SPACE INVADERS</h1>
+        <div class="flex justify-center items-center gap-8 mb-4">
+            <div class="text-xl">
+                <span class="text-blue-300">Score:</span>
+                <span id="score" class="ml-2 text-yellow-300">0</span>
+            </div>
+            <div class="text-xl">
+                <span class="text-blue-300">Lives:</span>
+                <span id="lives" class="ml-2 text-red-400">3</span>
+            </div>
+            <div class="text-xl">
+                <span class="text-blue-300">Level:</span>
+                <span id="level" class="ml-2 text-green-400">1</span>
+            </div>
+        </div>
+    </div>
+    <div class="relative">
+        <canvas id="gameCanvas" width="600" height="500" class="border-2 border-blue-500"></canvas>
+        <!-- Start Screen -->
+        <div id="startScreen" class="absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center">
+            <h2 class="text-4xl font-bold mb-6 text-blue-400">SPACE INVADERS</h2>
+            <p class="text-xl mb-8 text-center max-w-md">
+                Defend Earth from alien invasion!<br>
+                Use arrow keys to move and space to shoot.
+            </p>
+            <button id="startButton" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-xl transition-all transform hover:scale-105">
+                START GAME
+            </button>
+            <div class="mt-8 text-gray-400">
+                <p>Controls:</p>
+                <div class="flex gap-4 mt-2">
+                    <div class="bg-gray-800 px-3 py-1 rounded">← →</div>
+                    <div class="bg-gray-800 px-3 py-1 rounded">SPACE</div>
+                </div>
+            </div>
+        </div>
+        <!-- Game Over Screen -->
+        <div id="gameOverScreen" class="absolute inset-0 bg-black bg-opacity-80 hidden flex-col items-center justify-center">
+            <h2 class="text-4xl font-bold mb-2 text-red-500">GAME OVER</h2>
+            <p class="text-2xl mb-6">Your score: <span id="finalScore" class="text-yellow-300">0</span></p>
+            <button id="restartButton" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition-all transform hover:scale-105">
+                PLAY AGAIN
+            </button>
+        </div>
+        <!-- Level Complete Screen -->
+        <div id="levelCompleteScreen" class="absolute inset-0 bg-black bg-opacity-80 hidden flex-col items-center justify-center">
+            <h2 class="text-4xl font-bold mb-2 text-green-500">LEVEL COMPLETE!</h2>
+            <p class="text-2xl mb-6">Get ready for level <span id="nextLevel" class="text-yellow-300">2</span></p>
+            <button id="nextLevelButton" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition-all transform hover:scale-105">
+                CONTINUE
+            </button>
+        </div>
+    </div>
+    <div class="mt-8 text-gray-400 text-center max-w-md">
+        <p class="mb-2">Tip: The aliens move faster as their numbers decrease!</p>
+        <p>Destroy the mothership for bonus points!</p>
+    </div>
+    <script>
+        // Game variables
+        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 nextLevelButton = document.getElementById('nextLevelButton');
+        const scoreDisplay = document.getElementById('score');
+        const livesDisplay = document.getElementById('lives');
+        const levelDisplay = document.getElementById('level');
+        const finalScoreDisplay = document.getElementById('finalScore');
+        const nextLevelDisplay = document.getElementById('nextLevel');
+        // Game state
+        let gameRunning = false;
+        let score = 0;
+        let lives = 3;
+        let level = 1;
+        let enemies = [];
+        let enemyBullets = [];
+        let playerBullets = [];
+        let explosions = [];
+        let player = {
+            x: canvas.width / 2 - 25,
+            y: canvas.height - 60,
+            width: 50,
+            height: 30,
+            speed: 8,
+            color: '#3B82F6'
+        };
+        let keys = {
+            ArrowLeft: false,
+            ArrowRight: false,
+            ' ': false
+        };
+        // Enemy types
+        const enemyTypes = [
+            { color: '#F59E0B', points: 10, width: 40, height: 30 },  // Yellow - basic
+            { color: '#8B5CF6', points: 20, width: 40, height: 30 },  // Purple - faster
+            { color: '#EC4899', points: 30, width: 40, height: 30 },  // Pink - shoots more
+            { color: '#10B981', points: 50, width: 60, height: 40 }   // Green - mothership
+        ];
+        // Initialize game
+        function initGame() {
+            score = 0;
+            lives = 3;
+            level = 1;
+            updateDisplays();
+            createEnemies();
+            gameRunning = true;
+            gameLoop();
+        }
+        // Create enemies based on level
+        function createEnemies() {
+            enemies = [];
+            const rows = Math.min(3 + Math.floor(level / 2), 6);
+            const cols = Math.min(5 + level, 10);
+            const spacing = 60;
+            const startX = (canvas.width - (cols - 1) * spacing) / 2;
+            const startY = 50;
+            // Regular enemies
+            for (let row = 0; row < rows; row++) {
+                for (let col = 0; col < cols; col++) {
+                    const typeIndex = row % 3; // Cycle through first 3 types
+                    enemies.push({
+                        x: startX + col * spacing,
+                        y: startY + row * spacing,
+                        width: enemyTypes[typeIndex].width,
+                        height: enemyTypes[typeIndex].height,
+                        color: enemyTypes[typeIndex].color,
+                        points: enemyTypes[typeIndex].points,
+                        speed: 1 + level * 0.2,
+                        shootChance: 0.005 + (level * 0.001)
+                    });
+                }
+            }
+            // Add mothership (random position top row)
+            if (level % 3 === 0) {
+                enemies.push({
+                    x: Math.random() * (canvas.width - 60),
+                    y: 30,
+                    width: enemyTypes[3].width,
+                    height: enemyTypes[3].height,
+                    color: enemyTypes[3].color,
+                    points: enemyTypes[3].points,
+                    speed: 1.5 + level * 0.1,
+                    shootChance: 0.01 + (level * 0.002)
+                });
+            }
+        }
+        // Update displays
+        function updateDisplays() {
+            scoreDisplay.textContent = score;
+            livesDisplay.textContent = lives;
+            levelDisplay.textContent = level;
+        }
+        // Game loop
+        function gameLoop() {
+            if (!gameRunning) return;
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Update and draw player
+            updatePlayer();
+            drawPlayer();
+            // Update and draw enemies
+            updateEnemies();
+            drawEnemies();
+            // Update and draw bullets
+            updateBullets();
+            drawBullets();
+            // Draw explosions
+            drawExplosions();
+            // Check for level completion
+            if (enemies.length === 0) {
+                levelComplete();
+                return;
+            }
+            // Check for game over
+            if (lives <= 0) {
+                gameOver();
+                return;
+            }
+            // Continue game loop
+            requestAnimationFrame(gameLoop);
+        }
+        // Update player position
+        function updatePlayer() {
+            if (keys.ArrowLeft && player.x > 0) {
+                player.x -= player.speed;
+            }
+            if (keys.ArrowRight && player.x < canvas.width - player.width) {
+                player.x += player.speed;
+            }
+            // Player shooting
+            if (keys[' ']) {
+                keys[' '] = false; // Prevent continuous shooting
+                playerBullets.push({
+                    x: player.x + player.width / 2 - 2,
+                    y: player.y,
+                    width: 4,
+                    height: 15,
+                    speed: 10,
+                    color: '#FFFFFF'
+                });
+                // Play shoot sound
+                playSound('shoot');
+            }
+        }
+        // Draw player
+        function drawPlayer() {
+            ctx.fillStyle = player.color;
+            // Main body
+            ctx.fillRect(player.x, player.y, player.width, player.height);
+            // Cannon
+            ctx.fillRect(player.x + player.width / 2 - 5, player.y - 10, 10, 10);
+        }
+        // Update enemies
+        function updateEnemies() {
+            let directionChange = false;
+            // Move enemies and check for direction change
+            enemies.forEach(enemy => {
+                enemy.x += enemy.speed;
+                // Check if any enemy hits the edge
+                if ((enemy.x + enemy.width > canvas.width || enemy.x < 0) && !directionChange) {
+                    directionChange = true;
+                }
+            });
+            // Change direction and move down if edge hit
+            if (directionChange) {
+                enemies.forEach(enemy => {
+                    enemy.speed = -enemy.speed;
+                    enemy.y += 20;
+                });
+            }
+            // Enemy shooting
+            enemies.forEach(enemy => {
+                if (Math.random() < enemy.shootChance) {
+                    enemyBullets.push({
+                        x: enemy.x + enemy.width / 2 - 2,
+                        y: enemy.y + enemy.height,
+                        width: 4,
+                        height: 15,
+                        speed: 5 + level * 0.5,
+                        color: '#F87171' // Red bullets
+                    });
+                }
+            });
+            // Check if any enemy reached the bottom
+            enemies.forEach(enemy => {
+                if (enemy.y + enemy.height > canvas.height - 50) {
+                    lives = 0; // Instant game over
+                }
+            });
+        }
+        // Draw enemies
+        function drawEnemies() {
+            enemies.forEach(enemy => {
+                ctx.fillStyle = enemy.color;
+                // Main body
+                ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
+                // Eyes
+                ctx.fillStyle = '#000000';
+                ctx.fillRect(enemy.x + 10, enemy.y + 10, 8, 8);
+                ctx.fillRect(enemy.x + enemy.width - 18, enemy.y + 10, 8, 8);
+                // Special decoration for mothership
+                if (enemy.width === 60) {
+                    ctx.fillStyle = '#FFFFFF';
+                    ctx.fillRect(enemy.x + 15, enemy.y - 5, 30, 5);
+                }
+            });
+        }
+        // Update bullets
+        function updateBullets() {
+            // Player bullets
+            for (let i = playerBullets.length - 1; i >= 0; i--) {
+                playerBullets[i].y -= playerBullets[i].speed;
+                // Remove if off screen
+                if (playerBullets[i].y < 0) {
+                    playerBullets.splice(i, 1);
+                    continue;
+                }
+                // Check for enemy hits
+                for (let j = enemies.length - 1; j >= 0; j--) {
+                    if (checkCollision(playerBullets[i], enemies[j])) {
+                        // Add explosion
+                        explosions.push({
+                            x: enemies[j].x + enemies[j].width / 2,
+                            y: enemies[j].y + enemies[j].height / 2,
+                            size: Math.max(enemies[j].width, enemies[j].height),
+                            color: enemies[j].color,
+                            time: 0
+                        });
+                        // Increase score
+                        score += enemies[j].points;
+                        updateDisplays();
+                        // Play explosion sound
+                        playSound('explosion');
+                        // Remove enemy and bullet
+                        enemies.splice(j, 1);
+                        playerBullets.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+            // Enemy bullets
+            for (let i = enemyBullets.length - 1; i >= 0; i--) {
+                enemyBullets[i].y += enemyBullets[i].speed;
+                // Remove if off screen
+                if (enemyBullets[i].y > canvas.height) {
+                    enemyBullets.splice(i, 1);
+                    continue;
+                }
+                // Check for player hit
+                if (checkCollision(enemyBullets[i], player)) {
+                    // Add explosion
+                    explosions.push({
+                        x: player.x + player.width / 2,
+                        y: player.y + player.height / 2,
+                        size: 30,
+                        color: player.color,
+                        time: 0
+                    });
+                    // Play explosion sound
+                    playSound('explosion');
+                    // Decrease lives
+                    lives--;
+                    updateDisplays();
+                    // Remove bullet
+                    enemyBullets.splice(i, 1);
+                    // Short invincibility
+                    if (lives > 0) {
+                        player.color = '#93C5FD'; // Light blue for invincibility
+                        setTimeout(() => {
+                            player.color = '#3B82F6'; // Back to normal
+                        }, 1000);
+                    }
+                }
+            }
+        }
+        // Draw bullets
+        function drawBullets() {
+            // Player bullets
+            playerBullets.forEach(bullet => {
+                ctx.fillStyle = bullet.color;
+                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
+            });
+            // Enemy bullets
+            enemyBullets.forEach(bullet => {
+                ctx.fillStyle = bullet.color;
+                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
+            });
+        }
+        // Draw explosions
+        function drawExplosions() {
+            for (let i = explosions.length - 1; i >= 0; i--) {
+                explosions[i].time++;
+                const progress = explosions[i].time / 30;
+                const size = explosions[i].size * (0.5 + progress * 1.5);
+                const alpha = 1 - progress;
+                ctx.save();
+                ctx.globalAlpha = alpha;
+                ctx.fillStyle = explosions[i].color;
+                // Draw explosion particles
+                for (let j = 0; j < 8; j++) {
+                    const angle = (j / 8) * Math.PI * 2;
+                    const distance = size * 0.3 * progress;
+                    const px = explosions[i].x + Math.cos(angle) * distance;
+                    const py = explosions[i].y + Math.sin(angle) * distance;
+                    ctx.fillRect(px - 2, py - 2, 4, 4);
+                }
+                ctx.restore();
+                // Remove if animation complete
+                if (explosions[i].time >= 30) {
+                    explosions.splice(i, 1);
+                }
+            }
+        }
+        // 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 over
+        function gameOver() {
+            gameRunning = false;
+            finalScoreDisplay.textContent = score;
+            gameOverScreen.classList.remove('hidden');
+            gameOverScreen.classList.add('flex');
+            // Play game over sound
+            playSound('gameOver');
+        }
+        // Level complete
+        function levelComplete() {
+            gameRunning = false;
+            nextLevelDisplay.textContent = level + 1;
+            levelCompleteScreen.classList.remove('hidden');
+            levelCompleteScreen.classList.add('flex');
+            // Play level complete sound
+            playSound('levelComplete');
+        }
+        // Start next level
+        function nextLevel() {
+            level++;
+            updateDisplays();
+            createEnemies();
+            gameRunning = true;
+            levelCompleteScreen.classList.add('hidden');
+            levelCompleteScreen.classList.remove('flex');
+            gameLoop();
+        }
+        // Simple sound effects
+        function playSound(type) {
+            const sounds = {
+                shoot: {
+                    frequency: 220,
+                    type: 'square',
+                    duration: 0.1
+                },
+                explosion: {
+                    frequency: 100,
+                    type: 'sawtooth',
+                    duration: 0.3
+                },
+                gameOver: {
+                    frequency: 110,
+                    type: 'sine',
+                    duration: 1.5
+                },
+                levelComplete: {
+                    frequency: 523.25,
+                    type: 'sine',
+                    duration: 0.2
+                }
+            };
+            if (sounds[type]) {
+                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                const oscillator = audioCtx.createOscillator();
+                const gainNode = audioCtx.createGain();
+                oscillator.type = sounds[type].type;
+                oscillator.frequency.value = sounds[type].frequency;
+                oscillator.connect(gainNode);
+                gainNode.connect(audioCtx.destination);
+                // For explosion, add some randomness
+                if (type === 'explosion') {
+                    oscillator.frequency.exponentialRampToValueAtTime(
+                        50,
+                        audioCtx.currentTime + sounds[type].duration
+                    );
+                }
+                // For game over, make it descending
+                if (type === 'gameOver') {
+                    oscillator.frequency.exponentialRampToValueAtTime(
+                        55,
+                        audioCtx.currentTime + sounds[type].duration
+                    );
+                }
+                // For level complete, make it a little melody
+                if (type === 'levelComplete') {
+                    oscillator.frequency.setValueAtTime(523.25, audioCtx.currentTime);
+                    oscillator.frequency.setValueAtTime(659.25, audioCtx.currentTime + 0.1);
+                    oscillator.frequency.setValueAtTime(783.99, audioCtx.currentTime + 0.2);
+                }
+                gainNode.gain.exponentialRampToValueAtTime(
+                    0.001,
+                    audioCtx.currentTime + sounds[type].duration
+                );
+                oscillator.start();
+                oscillator.stop(audioCtx.currentTime + sounds[type].duration);
+            }
+        }
+        // Event listeners
+        startButton.addEventListener('click', () => {
+            startScreen.classList.add('hidden');
+            initGame();
+        });
+        restartButton.addEventListener('click', () => {
+            gameOverScreen.classList.add('hidden');
+            gameOverScreen.classList.remove('flex');
+            initGame();
+        });
+        nextLevelButton.addEventListener('click', () => {
+            nextLevel();
+        });
+        // Keyboard controls - FIXED SPACE KEY ISSUE
+        window.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === ' ') {
+                e.preventDefault();
+            }
+            if (e.key === 'ArrowLeft') keys.ArrowLeft = true;
+            if (e.key === 'ArrowRight') keys.ArrowRight = true;
+            if (e.key === ' ') keys[' '] = true;
+        });
+        window.addEventListener('keyup', (e) => {
+            if (e.key === 'ArrowLeft') keys.ArrowLeft = false;
+            if (e.key === 'ArrowRight') keys.ArrowRight = false;
+            if (e.key === ' ') keys[' '] = false;
+        });
+        // Touch controls for mobile
+        let touchStartX = 0;
+        canvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            touchStartX = e.touches[0].clientX;
+            keys[' '] = true; // Shoot on touch
+        });
+        canvas.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            const touchX = e.touches[0].clientX;
+            if (touchX < touchStartX - 10) {
+                keys.ArrowLeft = true;
+                keys.ArrowRight = false;
+            } else if (touchX > touchStartX + 10) {
+                keys.ArrowRight = true;
+                keys.ArrowLeft = false;
+            }
+        });
+        canvas.addEventListener('touchend', (e) => {
+            e.preventDefault();
+            keys.ArrowLeft = false;
+            keys.ArrowRight = false;
+            keys[' '] = 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=drdata/space-invaders" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>