Spaces:

Agung1453
/

space-impact

Running

App Files Files Community

Agung1453 commited on Apr 12, 2025

Commit

1bdf6cd

verified ·

1 Parent(s): bd7d0ed

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

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

index.html CHANGED Viewed

@@ -1,19 +1,660 @@
-<!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>Autopilot Space Impact</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    @keyframes scrollBackground {
+      0% {
+        background-position: 0 0;
+      }
+      100% {
+        background-position: -2048px 0;
+      }
+    }
+    .game-container {
+      position: relative;
+      width: 100%;
+      height: 100vh;
+      overflow: hidden;
+      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" fill="%2311141a"/><circle cx="8" cy="8" r="1" fill="%233d4554" opacity="0.6"/><circle cx="32" cy="16" r="1" fill="%233d4554" opacity="0.6"/><circle cx="56" cy="8" r="1" fill="%233d4554" opacity="0.6"/><circle cx="20" cy="40" r="1" fill="%233d4554" opacity="0.6"/><circle cx="44" cy="32" r="1" fill="%233d4554" opacity="0.6"/><circle cx="16" cy="56" r="1" fill="%233d4554" opacity="0.6"/><circle cx="40" cy="56" r="1" fill="%233d4554" opacity="0.6"/></svg>');
+      animation: scrollBackground 120s linear infinite;
+    }
+    .player {
+      position: absolute;
+      width: 40px;
+      height: 40px;
+      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><polygon points="0,20 10,10 10,30" fill="%2366f7ff"/><polygon points="10,10 40,20 10,30" fill="%2366f7ff" opacity="0.8"/><polygon points="30,20 40,15 40,25" fill="%23fff" opacity="0.6"/></svg>');
+      background-size: contain;
+      transition: top 0.2s ease-out;
+      z-index: 10;
+    }
+    .bullet {
+      position: absolute;
+      width: 8px;
+      height: 3px;
+      background-color: cyan;
+      border-radius: 2px;
+      box-shadow: 0 0 5px cyan;
+    }
+    .enemy {
+      position: absolute;
+      width: 40px;
+      height: 40px;
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+    .explosion {
+      position: absolute;
+      width: 50px;
+      height: 50px;
+      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="25" fill="%23ff8c00"/><circle cx="25" cy="25" r="20" fill="%23ffcc00"/><circle cx="25" cy="25" r="15" fill="%23fff"/></svg>');
+      background-size: contain;
+      animation: fadeOut 0.5s forwards;
+      z-index: 20;
+    }
+    @keyframes fadeOut {
+      to {
+        opacity: 0;
+        transform: scale(1.5);
+      }
+    }
+    #gameOverOverlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.7);
+      display: none;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      z-index: 100;
+    }
+    #gameOverOverlay h2 {
+      color: white;
+      font-size: 3rem;
+      margin-bottom: 2rem;
+      text-shadow: 0 0 10px red;
+    }
+    #restartBtn {
+      padding: 1rem 2rem;
+      background: linear-gradient(to right, #4facfe, #00f2fe);
+      border: none;
+      border-radius: 5px;
+      color: white;
+      font-weight: bold;
+      cursor: pointer;
+      transition: transform 0.2s;
+    }
+    #restartBtn:hover {
+      transform: scale(1.1);
+    }
+  </style>
+</head>
+<body class="bg-gray-900 text-white">
+  <div class="container mx-auto">
+    <div class="flex justify-between items-center p-4">
+      <h1 class="text-2xl font-bold">Autopilot Space Impact</h1>
+      <div id="score" class="text-xl">Score: 0</div>
+    </div>
+    <div class="flex gap-4 p-4">
+      <div id="lives" class="flex gap-2">
+        <div class="w-8 h-8 bg-red-500 rounded-full"></div>
+        <div class="w-8 h-8 bg-red-500 rounded-full"></div>
+        <div class="w-8 h-8 bg-red-500 rounded-full"></div>
+      </div>
+      <div id="level" class="text-xl">Level: 1</div>
+    </div>
+  </div>
+  <div class="game-container" id="gameContainer">
+    <div class="player" id="player"></div>
+    <div id="gameOverOverlay">
+      <h2>GAME OVER</h2>
+      <button id="restartBtn">Play Again</button>
+    </div>
+  </div>
+  <script>
+    // Game constants
+        const PLAYER_SPEED = 2;
+        const BULLET_SPEED = 10;
+        const ENEMY_SPEED = 3;
+        const ENEMY_SPAWN_RATE = 1000; // ms
+        const POWERUP_SPAWN_RATE = 8000; // ms
+        // Game variables
+        let score = 0;
+        let lives = 3;
+        let level = 1;
+        let gameOver = false;
+        let gameLoop;
+        let enemySpawnLoop;
+        let powerupSpawnLoop;
+        // DOM elements
+        const gameContainer = document.getElementById('gameContainer');
+        const player = document.getElementById('player');
+        const scoreDisplay = document.getElementById('score');
+        const livesDisplay = document.getElementById('lives');
+        const levelDisplay = document.getElementById('level');
+        const gameOverOverlay = document.getElementById('gameOverOverlay');
+        const restartBtn = document.getElementById('restartBtn');
+        // Game state
+        let bullets = [];
+        let enemies = [];
+        let powerups = [];
+        let explosions = [];
+        let moveDirection = 0; // -1 for up, 0 for none, 1 for down
+        let lastSpawnTime = 0;
+        let lastEnemySpawnTime = 0;
+        let lastPowerupSpawnTime = 0;
+        // Screen dimensions
+        const screenWidth = window.innerWidth;
+        const screenHeight = window.innerHeight;
+        // Initialize player position
+        function initPlayer() {
+            player.style.left = '50px';
+            player.style.top = `${screenHeight / 2 - 20}px`;
+        }
+        // Initialize game
+        function initGame() {
+            // Reset game state
+            score = 0;
+            lives = 3;
+            level = 1;
+            gameOver = false;
+            bullets = [];
+            enemies = [];
+            powerups = [];
+            explosions = [];
+            // Update UI
+            scoreDisplay.textContent = `Score: ${score}`;
+            levelDisplay.textContent = `Level: ${level}`;
+            livesDisplay.innerHTML = '<div class="w-8 h-8 bg-red-500 rounded-full"></div>'.repeat(lives);
+            // Clear existing game elements
+            document.querySelectorAll('.bullet').forEach(el => el.remove());
+            document.querySelectorAll('.enemy').forEach(el => el.remove());
+            document.querySelectorAll('.powerup').forEach(el => el.remove());
+            document.querySelectorAll('.explosion').forEach(el => el.remove());
+            // Initialize player
+            initPlayer();
+            // Hide game over overlay
+            gameOverOverlay.style.display = 'none';
+            // Start game loops
+            startGameLoops();
+        }
+        // Start game loops
+        function startGameLoops() {
+            if (gameLoop) clearInterval(gameLoop);
+            if (enemySpawnLoop) clearInterval(enemySpawnLoop);
+            if (powerupSpawnLoop) clearInterval(powerupSpawnLoop);
+            gameLoop = setInterval(updateGame, 16); // ~60fps
+            enemySpawnLoop = setInterval(spawnEnemy, ENEMY_SPAWN_RATE);
+            powerupSpawnLoop = setInterval(spawnPowerup, POWERUP_SPAWN_RATE);
+        }
+        // Spawn enemy
+        function spawnEnemy() {
+            if (gameOver) return;
+            const now = Date.now();
+            if (now - lastEnemySpawnTime < ENEMY_SPAWN_RATE / level) return;
+            lastEnemySpawnTime = now;
+            const enemyType = Math.random() < 0.2 ? 'strong' : 'weak';
+            const enemySize = enemyType === 'strong' ? 50 : 40;
+            const enemyHeight = Math.random() * (screenHeight - enemySize);
+            const enemy = document.createElement('div');
+            enemy.className = 'enemy';
+            enemy.dataset.type = enemyType;
+            enemy.style.left = `${screenWidth}px`;
+            enemy.style.top = `${enemyHeight}px`;
+            if (enemyType === 'strong') {
+                enemy.style.backgroundImage = 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><polygon points="50,25 10,0 10,10 0,10 0,40 10,40 10,50" fill="%23ff3355"/><circle cx="30" cy="25" r="15" fill="%23e63946"/><circle cx="30" cy="25" r="10" fill="%23ff758f"/></svg>\')';
+            } else {
+                enemy.style.backgroundImage = 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><polygon points="0,20 10,10 10,30" fill="%23ff5555"/></svg>\')';
+            }
+            gameContainer.appendChild(enemy);
+            enemies.push({
+                element: enemy,
+                x: screenWidth,
+                y: enemyHeight,
+                width: enemySize,
+                height: enemySize,
+                type: enemyType,
+                health: enemyType === 'strong' ? 3 : 1,
+                lastShot: 0,
+                canShoot: Math.random() < 0.3
+            });
+        }
+        // Spawn powerup (occasionally)
+        function spawnPowerup() {
+            if (gameOver || Math.random() > 0.3) return;
+            const now = Date.now();
+            if (now - lastPowerupSpawnTime < POWERUP_SPAWN_RATE * 3) return;
+            lastPowerupSpawnTime = now;
+            const powerupHeight = Math.random() * (screenHeight - 30);
+            const powerup = document.createElement('div');
+            powerup.className = 'powerup';
+            powerup.style.left = `${screenWidth}px`;
+            powerup.style.top = `${powerupHeight}px`;
+            powerup.style.width = '30px';
+            powerup.style.height = '30px';
+            powerup.style.backgroundImage = 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><circle cx="15" cy="15" r="15" fill="%23ffcc00"/><polygon points="15,5 19,15 15,25 11,15" fill="%23e63946"/></svg>\')';
+            gameContainer.appendChild(powerup);
+            powerups.push({
+                element: powerup,
+                x: screenWidth,
+                y: powerupHeight,
+                width: 30,
+                height: 30
+            });
+        }
+        // Fire bullet
+        function fireBullet() {
+            const playerRect = player.getBoundingClientRect();
+            const bulletX = playerRect.right;
+            const bulletY = playerRect.top + playerRect.height / 2 - 1.5;
+            const bullet = document.createElement('div');
+            bullet.className = 'bullet';
+            bullet.style.left = `${bulletX}px`;
+            bullet.style.top = `${bulletY}px`;
+            gameContainer.appendChild(bullet);
+            bullets.push({
+                element: bullet,
+                x: bulletX,
+                y: bulletY,
+                width: 8,
+                height: 3,
+                speed: BULLET_SPEED
+            });
+        }
+        // Enemy fire bullet
+        function enemyFireBullet(enemy) {
+            const enemyRect = enemy.element.getBoundingClientRect();
+            const bulletX = enemyRect.left;
+            const bulletY = enemyRect.top + enemyRect.height / 2 - 1.5;
+            const bullet = document.createElement('div');
+            bullet.className = 'bullet';
+            bullet.style.left = `${bulletX}px`;
+            bullet.style.top = `${bulletY}px`;
+            bullet.style.backgroundColor = 'red';
+            bullet.style.boxShadow = '0 0 5px red';
+            gameContainer.appendChild(bullet);
+            bullets.push({
+                element: bullet,
+                x: bulletX,
+                y: bulletY,
+                width: 8,
+                height: 3,
+                speed: -BULLET_SPEED,
+                fromEnemy: true
+            });
+            enemy.lastShot = Date.now();
+        }
+        // Auto pilot logic
+        function autoPilot() {
+            const playerRect = player.getBoundingClientRect();
+            const playerX = playerRect.left;
+            const playerY = playerRect.top;
+            const playerWidth = playerRect.width;
+            const playerHeight = playerRect.height;
+            // Find closest enemy in front
+            let closestEnemyInPath = null;
+            let minDistance = Infinity;
+            for (const enemy of enemies) {
+                // Check if enemy is in front and roughly at same height
+                if (enemy.x > playerX &&
+                    enemy.x - playerX < 300 && // Only consider enemies within certain distance
+                    Math.abs(enemy.y + enemy.height / 2 - (playerY + playerHeight / 2)) < 100) {
+                    const distance = enemy.x - playerX;
+                    if (distance < minDistance) {
+                        minDistance = distance;
+                        closestEnemyInPath = enemy;
+                    }
+                }
+            }
+            // Find closest bullet coming towards us
+            let closestEnemyBullet = null;
+            let bulletMinDistance = Infinity;
+            for (const bullet of bullets) {
+                if (bullet.fromEnemy) {
+                    const distance = bullet.x - playerX;
+                    if (distance < 300 && distance < bulletMinDistance &&
+                        bullet.y + bullet.height > playerY && bullet.y < playerY + playerHeight) {
+                        bulletMinDistance = distance;
+                        closestEnemyBullet = bullet;
+                    }
+                }
+            }
+            // Decision logic
+            if (closestEnemyBullet) {
+                // If bullet is above center, move down, else move up
+                const bulletCenterY = closestEnemyBullet.y + closestEnemyBullet.height / 2;
+                const playerCenterY = playerY + playerHeight / 2;
+                moveDirection = bulletCenterY < playerCenterY ? 1 : -1; // Move opposite to bullet
+            } else if (closestEnemyInPath) {
+                // Enemy is in path, avoid if too close
+                if (minDistance < 200) {
+                    const enemyCenterY = closestEnemyInPath.y + closestEnemyInPath.height / 2;
+                    const playerCenterY = playerY + playerHeight / 2;
+                    moveDirection = enemyCenterY < playerCenterY ? 1 : -1; // Move opposite to enemy
+                } else {
+                    // Enemy is far enough, aim to shoot
+                    moveDirection = 0;
+                    // If not currently moving, shoot at the enemy
+                    if (Math.random() < 0.07) { // Limit firing rate
+                        fireBullet();
+                    }
+                }
+            } else {
+                // No immediate threat, random small movements
+                if (Math.random() < 0.05) {
+                    moveDirection = Math.random() < 0.5 ? -1 : 1;
+                }
+                // Sometimes stop moving
+                if (Math.random() < 0.1) {
+                    moveDirection = 0;
+                }
+                // Sometimes fire randomly
+                if (Math.random() < 0.03) {
+                    fireBullet();
+                }
+            }
+            // Ensure we don't go out of bounds
+            if (moveDirection === -1 && playerY <= 0) {
+                moveDirection = 1;
+            } else if (moveDirection === 1 && playerY >= screenHeight - playerHeight) {
+                moveDirection = -1;
+            }
+        }
+        // Create explosion
+        function createExplosion(x, y) {
+            const explosion = document.createElement('div');
+            explosion.className = 'explosion';
+            explosion.style.left = `${x - 25}px`;
+            explosion.style.top = `${y - 25}px`;
+            gameContainer.appendChild(explosion);
+            explosions.push({
+                element: explosion,
+                time: Date.now()
+            });
+        }
+        // Check collisions
+        function checkCollisions() {
+            const playerRect = player.getBoundingClientRect();
+            const playerX = playerRect.left;
+            const playerY = playerRect.top;
+            const playerWidth = playerRect.width;
+            const playerHeight = playerRect.height;
+            // Check player collision with enemies
+            for (let i = enemies.length - 1; i >= 0; i--) {
+                const enemy = enemies[i];
+                if (playerX < enemy.x + enemy.width &&
+                    playerX + playerWidth > enemy.x &&
+                    playerY < enemy.y + enemy.height &&
+                    playerY + playerHeight > enemy.y) {
+                    // Collision detected
+                    createExplosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2);
+                    enemy.element.remove();
+                    enemies.splice(i, 1);
+                    decreaseLife();
+                    continue;
+                }
+            }
+            // Check player collision with enemy bullets
+            for (let i = bullets.length - 1; i >= 0; i--) {
+                const bullet = bullets[i];
+                if (bullet.fromEnemy &&
+                    playerX < bullet.x + bullet.width &&
+                    playerX + playerWidth > bullet.x &&
+                    playerY < bullet.y + bullet.height &&
+                    playerY + playerHeight > bullet.y) {
+                    // Collision detected
+                    createExplosion(bullet.x, bullet.y);
+                    bullet.element.remove();
+                    bullets.splice(i, 1);
+                    decreaseLife();
+                }
+            }
+            // Check player collision with powerups
+            for (let i = powerups.length - 1; i >= 0; i--) {
+                const powerup = powerups[i];
+                if (playerX < powerup.x + powerup.width &&
+                    playerX + playerWidth > powerup.x &&
+                    playerY < powerup.y + powerup.height &&
+                    playerY + playerHeight > powerup.y) {
+                    // Powerup collected
+                    powerup.element.remove();
+                    powerups.splice(i, 1);
+                    increaseLife();
+                }
+            }
+            // Check bullet collisions with enemies
+            for (let i = bullets.length - 1; i >= 0; i--) {
+                const bullet = bullets[i];
+                if (bullet.fromEnemy) continue;
+                for (let j = enemies.length - 1; j >= 0; j--) {
+                    const enemy = enemies[j];
+                    if (bullet.x < enemy.x + enemy.width &&
+                        bullet.x + bullet.width > enemy.x &&
+                        bullet.y < enemy.y + enemy.height &&
+                        bullet.y + bullet.height > enemy.y) {
+                        // Hit enemy
+                        createExplosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2);
+                        enemy.health--;
+                        if (enemy.health <= 0) {
+                            enemy.element.remove();
+                            enemies.splice(j, 1);
+                            score += enemy.type === 'strong' ? 20 : 10;
+                            scoreDisplay.textContent = `Score: ${score}`;
+                            // Level up every 100 points
+                            if (score >= level * 100) {
+                                level++;
+                                levelDisplay.textContent = `Level: ${level}`;
+                            }
+                        }
+                        bullet.element.remove();
+                        bullets.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+        }
+        // Decrease player life
+        function decreaseLife() {
+            if (gameOver) return;
+            lives--;
+            livesDisplay.innerHTML = '<div class="w-8 h-8 bg-red-500 rounded-full"></div>'.repeat(lives);
+            if (lives <= 0) {
+                gameOver = true;
+                gameOverOverlay.style.display = 'flex';
+                clearInterval(gameLoop);
+                clearInterval(enemySpawnLoop);
+                clearInterval(powerupSpawnLoop);
+            }
+        }
+        // Increase player life
+        function increaseLife() {
+            if (lives < 5) { // Max 5 lives
+                lives++;
+                livesDisplay.innerHTML += '<div class="w-8 h-8 bg-red-500 rounded-full"></div>';
+            }
+        }
+        // Update game state
+        function updateGame() {
+            if (gameOver) return;
+            const now = Date.now();
+            // Handle auto-pilot
+            autoPilot();
+            // Move player based on autopilot decision
+            const playerTop = parseInt(player.style.top) || 0;
+            const newPlayerTop = playerTop + moveDirection * PLAYER_SPEED;
+            // Keep player within bounds
+            if (newPlayerTop >= 0 && newPlayerTop <= screenHeight - 40) {
+                player.style.top = `${newPlayerTop}px`;
+            }
+            // Move bullets
+            for (let i = bullets.length - 1; i >= 0; i--) {
+                const bullet = bullets[i];
+                bullet.x += bullet.speed;
+                bullet.element.style.left = `${bullet.x}px`;
+                // Remove bullets that go off screen
+                if (bullet.x > screenWidth || bullet.x < -bullet.width) {
+                    bullet.element.remove();
+                    bullets.splice(i, 1);
+                }
+            }
+            // Move enemies and have them shoot
+            for (let i = enemies.length - 1; i >= 0; i--) {
+                const enemy = enemies[i];
+                enemy.x -= ENEMY_SPEED * level * 0.5; // Enemies get faster with level
+                enemy.element.style.left = `${enemy.x}px`;
+                // Enemy shooting logic
+                if (enemy.canShoot && now - enemy.lastShot > 2000 && Math.random() < 0.02) {
+                    enemyFireBullet(enemy);
+                }
+                // Remove enemies that go off screen
+                if (enemy.x < -enemy.width) {
+                    enemy.element.remove();
+                    enemies.splice(i, 1);
+                }
+            }
+            // Move powerups
+            for (let i = powerups.length - 1; i >= 0; i--) {
+                const powerup = powerups[i];
+                powerup.x -= 2;
+                powerup.element.style.left = `${powerup.x}px`;
+                // Remove powerups that go off screen
+                if (powerup.x < -powerup.width) {
+                    powerup.element.remove();
+                    powerups.splice(i, 1);
+                }
+            }
+            // Remove old explosions
+            for (let i = explosions.length - 1; i >= 0; i--) {
+                const explosion = explosions[i];
+                if (now - explosion.time > 500) {
+                    explosion.element.remove();
+                    explosions.splice(i, 1);
+                }
+            }
+            // Check collisions
+            checkCollisions();
+        }
+        // Start game on load
+        window.addEventListener('load', initGame);
+        // Restart game button
+        restartBtn.addEventListener('click', initGame);
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            // Reinitialize player position to keep it visible
+            const playerRect = player.getBoundingClientRect();
+            const newY = Math.min(Math.max(playerRect.top, 0), screenHeight - playerRect.height);
+            player.style.top = `${newY}px`;
+        });
+  </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=Agung1453/space-impact" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>