Spaces:

vrgamedevgirl84
/

deejay-space

Running

App Files Files Community

vrgamedevgirl84 commited on Mar 29

Commit

28822f2

verified ·

1 Parent(s): 14fb99b

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: deejay-space
+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,1008 @@
-<!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 Explorer - Space Adventure Game</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background-color: #0f0f1a;
+            overflow: hidden;
+            font-family: 'Orbitron', sans-serif;
+            color: white;
+            height: 100vh;
+        }
+        #game-container {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
+        }
+        #start-screen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background: rgba(0, 0, 0, 0.6);
+            z-index: 10;
+        }
+        #game-screen {
+            display: none;
+            width: 100%;
+            height: 100%;
+        }
+        #game-over-screen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 10;
+        }
+        .title {
+            font-family: 'Press Start 2P', cursive;
+            font-size: 3rem;
+            margin-bottom: 2rem;
+            text-align: center;
+            color: transparent;
+            background: linear-gradient(45deg, #ff00cc, #3333ff, #00ccff, #ffcc00);
+            -webkit-background-clip: text;
+            background-clip: text;
+            animation: rainbow 5s linear infinite;
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+        }
+        @keyframes rainbow {
+            0% { background-position: 0% 50%; }
+            100% { background-position: 100% 50%; }
+        }
+        .subtitle {
+            font-size: 1.2rem;
+            margin-bottom: 2rem;
+            color: #a9a9ff;
+            text-align: center;
+        }
+        .score {
+            font-size: 1.5rem;
+            margin: 1rem 0;
+            color: #00ffcc;
+        }
+        .high-score {
+            font-size: 1.3rem;
+            margin-bottom: 2rem;
+            color: #ffcc00;
+        }
+        button {
+            background: linear-gradient(45deg, #00ccff, #9933ff);
+            border: none;
+            color: white;
+            padding: 15px 30px;
+            font-size: 1.2rem;
+            font-family: 'Orbitron', sans-serif;
+            border-radius: 50px;
+            cursor: pointer;
+            margin: 10px;
+            box-shadow: 0 0 15px rgba(0, 204, 255, 0.5);
+            transition: all 0.3s ease;
+        }
+        button:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 20px rgba(0, 204, 255, 0.8);
+        }
+        #player {
+            position: absolute;
+            width: 50px;
+            height: 50px;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%2300ccff" d="M24,4 L36,20 L30,20 L30,44 L18,44 L18,20 L12,20 Z"/><path fill="%239933ff" d="M24,4 L12,20 L18,20 L18,44 L30,44 L30,20 L36,20 Z"/><circle cx="24" cy="15" r="5" fill="%23ffcc00"/></svg>') no-repeat center center;
+            background-size: contain;
+            z-index: 5;
+        }
+        .asteroid {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23ff5555" d="M24,2 C32,5 42,8 46,16 C50,24 48,34 42,40 C36,46 26,48 18,44 C10,40 2,32 2,24 C2,16 10,10 16,6 C18,4 22,2 24,2 Z"/></svg>') no-repeat center center;
+            background-size: contain;
+            z-index: 4;
+        }
+        .star {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23ffcc00" d="M24,2 L30,18 L46,18 L34,28 L40,44 L24,34 L8,44 L14,28 L2,18 L18,18 Z"/></svg>') no-repeat center center;
+            background-size: contain;
+            z-index: 3;
+            animation: pulse 1.5s infinite alternate;
+        }
+        @keyframes pulse {
+            from { transform: scale(1); opacity: 0.8; }
+            to { transform: scale(1.2); opacity: 1; }
+        }
+        .particle {
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            background-color: rgba(255, 255, 255, 0.7);
+            border-radius: 50%;
+            z-index: 2;
+        }
+        #hud {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            font-size: 1.2rem;
+            color: #00ffcc;
+            z-index: 6;
+            display: flex;
+            align-items: center;
+            text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+        }
+        #hud span {
+            margin-right: 20px;
+        }
+        #hud i {
+            margin-right: 5px;
+            color: #ffcc00;
+        }
+        #controls {
+            position: absolute;
+            bottom: 20px;
+            left: 0;
+            right: 0;
+            display: flex;
+            justify-content: center;
+            z-index: 6;
+            color: #a9a9ff;
+            font-size: 0.9rem;
+        }
+        #controls div {
+            margin: 0 15px;
+            display: flex;
+            align-items: center;
+        }
+        #controls i {
+            margin-right: 5px;
+            font-size: 1.2rem;
+        }
+        .explosion {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            background: radial-gradient(circle, rgba(255, 100, 100, 0.8) 0%, rgba(255, 200, 100, 0.5) 70%, transparent 100%);
+            border-radius: 50%;
+            z-index: 7;
+            animation: explode 0.5s ease-out;
+        }
+        @keyframes explode {
+            0% { transform: scale(0); opacity: 1; }
+            100% { transform: scale(2); opacity: 0; }
+        }
+        #stars-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+        .moving-stars {
+            position: absolute;
+            width: 2px;
+            height: 2px;
+            background-color: white;
+            border-radius: 50%;
+            z-index: 1;
+            animation: starMove linear infinite;
+        }
+        @keyframes starMove {
+            0% { transform: translateY(0); opacity: 0; }
+            10% { opacity: 1; }
+            90% { opacity: 1; }
+            100% { transform: translateY(100vh); opacity: 0; }
+        }
+        .power-up {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            background: radial-gradient(circle, #00ffcc, #00aaff);
+            box-shadow: 0 0 10px #00ffcc;
+            z-index: 4;
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0); }
+        }
+        #shield {
+            position: absolute;
+            width: 70px;
+            height: 70px;
+            border-radius: 50%;
+            border: 3px dashed rgba(0, 255, 255, 0.5);
+            z-index: 4;
+            pointer-events: none;
+            display: none;
+        }
+        .instructions {
+            background: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            margin-top: 20px;
+            max-width: 500px;
+        }
+        .instructions p {
+            margin-bottom: 10px;
+            color: #a9a9ff;
+        }
+        .instructions ul {
+            margin-left: 20px;
+            margin-bottom: 15px;
+        }
+        .instructions li {
+            margin-bottom: 5px;
+            color: #a9a9ff;
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="stars-bg"></div>
+        <div id="start-screen">
+            <h1 class="title">GALAXY EXPLORER</h1>
+            <p class="subtitle">Navigate through space, collect stars, and avoid asteroids!</p>
+            <button id="start-button">START ADVENTURE</button>
+            <div class="instructions">
+                <p><i class="fas fa-info-circle"></i> How to play:</p>
+                <ul>
+                    <li>Use arrow keys or WASD to move your spaceship</li>
+                    <li>Collect stars (★) to increase your score</li>
+                    <li>Avoid asteroids (●) - they reduce your health</li>
+                    <li>Collect power-ups (⦿) for special abilities</li>
+                    <li>Survive as long as you can!</li>
+                </ul>
+                <p>Good luck, space explorer!</p>
+            </div>
+        </div>
+        <div id="game-screen">
+            <div id="player"></div>
+            <div id="shield"></div>
+            <div id="hud">
+                <span><i class="fas fa-heart"></i> <span id="health">100</span>%</span>
+                <span><i class="fas fa-star"></i> <span id="score">0</span></span>
+                <span><i class="fas fa-shield-alt"></i> <span id="shield-time">0</span>s</span>
+            </div>
+        </div>
+        <div id="game-over-screen">
+            <h1 class="title">GAME OVER</h1>
+            <p class="subtitle">Your spaceship couldn't survive the asteroid field!</p>
+            <p class="score">FINAL SCORE: <span id="final-score">0</span></p>
+            <p class="high-score">HIGH SCORE: <span id="high-score">0</span></p>
+            <button id="restart-button"><i class="fas fa-redo"></i> TRY AGAIN</button>
+        </div>
+        <div id="controls">
+            <div><i class="fas fa-arrow-up"></i> Move Up</div>
+            <div><i class="fas fa-arrow-left"></i> Move Left</div>
+            <div><i class="fas fa-arrow-right"></i> Move Right</div>
+            <div><i class="fas fa-arrow-down"></i> Move Down</div>
+        </div>
+    </div>
+    <script>
+        // Game variables
+        let gameActive = false;
+        let score = 0;
+        let health = 100;
+        let highScore = localStorage.getItem('galaxyExplorerHighScore') || 0;
+        let shieldActive = false;
+        let shieldTime = 0;
+        let starsCollected = 0;
+        // DOM elements
+        const gameContainer = document.getElementById('game-container');
+        const startScreen = document.getElementById('start-screen');
+        const gameScreen = document.getElementById('game-screen');
+        const gameOverScreen = document.getElementById('game-over-screen');
+        const player = document.getElementById('player');
+        const shield = document.getElementById('shield');
+        const healthDisplay = document.getElementById('health');
+        const scoreDisplay = document.getElementById('score');
+        const shieldTimeDisplay = document.getElementById('shield-time');
+        const finalScoreDisplay = document.getElementById('final-score');
+        const highScoreDisplay = document.getElementById('high-score');
+        const startButton = document.getElementById('start-button');
+        const restartButton = document.getElementById('restart-button');
+        const starsBg = document.getElementById('stars-bg');
+        const controls = document.getElementById('controls');
+        // Player properties
+        let playerX = 0;
+        let playerY = 0;
+        const playerSpeed = 5;
+        const playerWidth = 50;
+        const playerHeight = 50;
+        // Game objects
+        let asteroids = [];
+        let stars = [];
+        let particles = [];
+        let powerUps = [];
+        // Key states
+        const keys = {
+            ArrowUp: false,
+            ArrowDown: false,
+            ArrowLeft: false,
+            ArrowRight: false,
+            w: false,
+            a: false,
+            s: false,
+            d: false
+        };
+        // Create background stars
+        function createBackgroundStars() {
+            for (let i = 0; i < 100; i++) {
+                const star = document.createElement('div');
+                star.className = 'moving-stars';
+                star.style.left = `${Math.random() * 100}%`;
+                star.style.top = `${Math.random() * 100}%`;
+                star.style.width = `${Math.random() * 3 + 1}px`;
+                star.style.height = star.style.width;
+                star.style.animationDuration = `${Math.random() * 5 + 3}s`;
+                star.style.animationDelay = `${Math.random() * 5}s`;
+                starsBg.appendChild(star);
+            }
+        }
+        // Initialize game
+        function initGame() {
+            // Reset values
+            score = 0;
+            health = 100;
+            shieldActive = false;
+            shieldTime = 0;
+            starsCollected = 0;
+            // Clear game objects
+            asteroids.forEach(asteroid => asteroid.element.remove());
+            stars.forEach(star => star.element.remove());
+            particles.forEach(particle => particle.element.remove());
+            powerUps.forEach(powerUp => powerUp.element.remove());
+            asteroids = [];
+            stars = [];
+            particles = [];
+            powerUps = [];
+            // Position player
+            playerX = gameContainer.clientWidth / 2 - playerWidth / 2;
+            playerY = gameContainer.clientHeight - playerHeight - 20;
+            player.style.left = `${playerX}px`;
+            player.style.top = `${playerY}px`;
+            // Hide shield
+            shield.style.display = 'none';
+            // Update HUD
+            updateHUD();
+            // Show controls for 5 seconds
+            controls.style.opacity = 1;
+            setTimeout(() => {
+                animateControlsOut();
+            }, 5000);
+        }
+        function animateControlsOut() {
+            let opacity = 1;
+            const fadeOutInterval = setInterval(() => {
+                opacity -= 0.05;
+                controls.style.opacity = opacity;
+                if (opacity <= 0) {
+                    clearInterval(fadeOutInterval);
+                    controls.style.display = 'none';
+                }
+            }, 50);
+        }
+        // Start game
+        function startGame() {
+            gameActive = true;
+            startScreen.style.display = 'none';
+            gameOverScreen.style.display = 'none';
+            gameScreen.style.display = 'block';
+            initGame();
+            // Game loop
+            gameLoop();
+            // Spawn objects
+            setInterval(spawnAsteroid, 1500);
+            setInterval(spawnStar, 2000);
+            setInterval(spawnPowerUp, 10000);
+            // Shield timer
+            setInterval(updateShield, 1000);
+        }
+        // Game over
+        function endGame() {
+            gameActive = false;
+            gameOverScreen.style.display = 'flex';
+            finalScoreDisplay.textContent = score;
+            highScoreDisplay.textContent = highScore;
+        }
+        // Game loop
+        function gameLoop() {
+            if (!gameActive) return;
+            updatePlayer();
+            updateAsteroids();
+            updateStars();
+            updatePowerUps();
+            updateParticles();
+            checkCollisions();
+            requestAnimationFrame(gameLoop);
+        }
+        // Update player position
+        function updatePlayer() {
+            // Movement
+            if (keys.ArrowUp || keys.w) playerY -= playerSpeed;
+            if (keys.ArrowDown || keys.s) playerY += playerSpeed;
+            if (keys.ArrowLeft || keys.a) playerX -= playerSpeed;
+            if (keys.ArrowRight || keys.d) playerX += playerSpeed;
+            // Boundary checking
+            playerX = Math.max(0, Math.min(gameContainer.clientWidth - playerWidth, playerX));
+            playerY = Math.max(0, Math.min(gameContainer.clientHeight - playerHeight, playerY));
+            // Update position
+            player.style.left = `${playerX}px`;
+            player.style.top = `${playerY}px`;
+            // Update shield position
+            if (shieldActive) {
+                shield.style.left = `${playerX - 10}px`;
+                shield.style.top = `${playerY - 10}px`;
+            }
+        }
+        // Spawn asteroid
+        function spawnAsteroid() {
+            if (!gameActive) return;
+            const asteroid = document.createElement('div');
+            asteroid.className = 'asteroid';
+            // Random position at top of screen
+            const x = Math.random() * (gameContainer.clientWidth - 40);
+            const y = -40;
+            asteroid.style.left = `${x}px`;
+            asteroid.style.top = `${y}px`;
+            gameScreen.appendChild(asteroid);
+            // Random speed and rotation
+            const speed = Math.random() * 3 + 2;
+            const rotationSpeed = (Math.random() - 0.5) * 5;
+            let rotation = 0;
+            asteroids.push({
+                element: asteroid,
+                x, y,
+                speed,
+                rotationSpeed,
+                rotation,
+                width: 40,
+                height: 40
+            });
+        }
+        // Update asteroids
+        function updateAsteroids() {
+            asteroids.forEach(asteroid => {
+                asteroid.y += asteroid.speed;
+                asteroid.rotation += asteroid.rotationSpeed;
+                asteroid.element.style.top = `${asteroid.y}px`;
+                asteroid.element.style.transform = `rotate(${asteroid.rotation}deg)`;
+                // Remove if off screen
+                if (asteroid.y > gameContainer.clientHeight) {
+                    asteroid.element.remove();
+                    asteroids = asteroids.filter(a => a !== asteroid);
+                }
+            });
+        }
+        // Spawn star
+        function spawnStar() {
+            if (!gameActive || stars.length > 5) return;
+            const star = document.createElement('div');
+            star.className = 'star';
+            const x = Math.random() * (gameContainer.clientWidth - 30);
+            const y = Math.random() * (gameContainer.clientHeight - 100);
+            star.style.left = `${x}px`;
+            star.style.top = `${y}px`;
+            gameScreen.appendChild(star);
+            stars.push({
+                element: star,
+                x, y,
+                width: 30,
+                height: 30
+            });
+        }
+        // Update stars
+        function updateStars() {
+            stars.forEach(star => {
+                // Stars can move slowly
+                star.y += 0.2;
+                star.x += (Math.random() - 0.5) * 0.5;
+                star.element.style.top = `${star.y}px`;
+                star.element.style.left = `${star.x}px`;
+                // Wrap around screen
+                if (star.y > gameContainer.clientHeight) {
+                    star.y = -30;
+                }
+                if (star.x > gameContainer.clientWidth) {
+                    star.x = -30;
+                } else if (star.x < -30) {
+                    star.x = gameContainer.clientWidth;
+                }
+            });
+        }
+        // Spawn power-up
+        function spawnPowerUp() {
+            if (!gameActive || powerUps.length > 0) return;
+            const powerUp = document.createElement('div');
+            powerUp.className = 'power-up';
+            // Add icon inside power-up
+            const powerUpTypes = ['shield', 'health', 'double-points'];
+            const type = powerUpTypes[Math.floor(Math.random() * powerUpTypes.length)];
+            const icon = document.createElement('i');
+            if (type === 'shield') {
+                icon.className = 'fas fa-shield-alt';
+                icon.style.color = '#00ffff';
+            } else if (type === 'health') {
+                icon.className = 'fas fa-heart';
+                icon.style.color = '#ff5555';
+            } else {
+                icon.className = 'fas fa-star';
+                icon.style.color = '#ffcc00';
+            }
+            powerUp.appendChild(icon);
+            const x = Math.random() * (gameContainer.clientWidth - 30);
+            const y = -30;
+            powerUp.style.left = `${x}px`;
+            powerUp.style.top = `${y}px`;
+            gameScreen.appendChild(powerUp);
+            powerUps.push({
+                element: powerUp,
+                x, y,
+                width: 30,
+                height: 30,
+                type
+            });
+        }
+        // Update power-ups
+        function updatePowerUps() {
+            powerUps.forEach(powerUp => {
+                powerUp.y += 2;
+                powerUp.element.style.top = `${powerUp.y}px`;
+                // Remove if off screen
+                if (powerUp.y > gameContainer.clientHeight) {
+                    powerUp.element.remove();
+                    powerUps = powerUps.filter(p => p !== powerUp);
+                }
+            });
+        }
+        // Check collisions
+        function checkCollisions() {
+            // Player with stars
+            stars.forEach(star => {
+                if (checkCollision(playerX, playerY, playerWidth, playerHeight,
+                                 star.x, star.y, star.width, star.height)) {
+                    // Collect star
+                    score += 10;
+                    starsCollected++;
+                    star.element.remove();
+                    stars = stars.filter(s => s !== star);
+                    // Create particles
+                    createParticles(star.x + star.width/2, star.y + star.height/2, 10, '#ffcc00');
+                    // Update HUD
+                    updateHUD();
+                }
+            });
+            // Player with asteroids
+            asteroids.forEach(asteroid => {
+                if (checkCollision(playerX, playerY, playerWidth, playerHeight,
+                                 asteroid.x, asteroid.y, asteroid.width, asteroid.height)) {
+                    if (shieldActive) {
+                        // Shield protects from damage
+                        asteroid.element.remove();
+                        asteroids = asteroids.filter(a => a !== asteroid);
+                        // Create explosion
+                        createExplosion(asteroid.x + asteroid.width/2, asteroid.y + asteroid.height/2);
+                    } else {
+                        // Take damage
+                        health -= 10;
+                        // Create explosion
+                        createExplosion(asteroid.x + asteroid.width/2, asteroid.y + asteroid.height/2);
+                        // Remove asteroid
+                        asteroid.element.remove();
+                        asteroids = asteroids.filter(a => a !== asteroid);
+                        // Shake player
+                        player.style.transform = 'translateX(-5px)';
+                        setTimeout(() => {
+                            player.style.transform = 'translateX(5px)';
+                            setTimeout(() => {
+                                player.style.transform = 'translateX(0)';
+                            }, 50);
+                        }, 50);
+                        // Check if game over
+                        if (health <= 0) {
+                            health = 0;
+                            createExplosion(playerX + playerWidth/2, playerY + playerHeight/2, true);
+                            setTimeout(endGame, 500);
+                        }
+                    }
+                    // Update HUD
+                    updateHUD();
+                }
+            });
+            // Player with power-ups
+            powerUps.forEach(powerUp => {
+                if (checkCollision(playerX, playerY, playerWidth, playerHeight,
+                                 powerUp.x, powerUp.y, powerUp.width, powerUp.height)) {
+                    // Apply power-up effect
+                    if (powerUp.type === 'shield') {
+                        activateShield(15); // 15 seconds
+                    } else if (powerUp.type === 'health') {
+                        health = Math.min(100, health + 30);
+                    } else {
+                        score += 50;
+                    }
+                    // Create particles
+                    createParticles(powerUp.x + powerUp.width/2, powerUp.y + powerUp.height/2, 15, '#00ffcc');
+                    // Remove power-up
+                    powerUp.element.remove();
+                    powerUps = powerUps.filter(p => p !== powerUp);
+                    // Update HUD
+                    updateHUD();
+                }
+            });
+        }
+        // Check collision between two rectangles
+        function checkCollision(x1, y1, w1, h1, x2, y2, w2, h2) {
+            return x1 < x2 + w2 &&
+                   x1 + w1 > x2 &&
+                   y1 < y2 + h2 &&
+                   y1 + h1 > y2;
+        }
+        // Create explosion effect
+        function createExplosion(x, y, isPlayer = false) {
+            const explosion = document.createElement('div');
+            explosion.className = 'explosion';
+            explosion.style.left = `${x - 30}px`;
+            explosion.style.top = `${y - 30}px`;
+            gameScreen.appendChild(explosion);
+            // Remove after animation
+            setTimeout(() => {
+                explosion.remove();
+            }, 500);
+            // Create particles for explosion
+            const particleCount = isPlayer ? 30 : 15;
+            const colors = isPlayer ? ['#ff5555', '#ffcc00', '#ffffff'] : ['#ff5555', '#ff9955'];
+            createParticles(x, y, particleCount, colors);
+        }
+        // Create particles
+        function createParticles(x, y, count, colors) {
+            // Convert single color to array if needed
+            if (typeof colors === 'string') {
+                colors = [colors];
+            }
+            for (let i = 0; i < count; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                // Random color from options
+                const color = colors[Math.floor(Math.random() * colors.length)];
+                particle.style.backgroundColor = color;
+                // Random size
+                const size = Math.random() * 5 + 2;
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                // Random position around center
+                const angle = Math.random() * Math.PI * 2;
+                const distance = Math.random() * 30;
+                const particleX = x + Math.cos(angle) * distance;
+                const particleY = y + Math.sin(angle) * distance;
+                particle.style.left = `${particleX}px`;
+                particle.style.top = `${particleY}px`;
+                // Random velocity
+                const vx = (Math.random() - 0.5) * 5;
+                const vy = (Math.random() - 0.5) * 5 - 3;
+                gameScreen.appendChild(particle);
+                particles.push({
+                    element: particle,
+                    x: particleX,
+                    y: particleY,
+                    vx,
+                    vy,
+                    life: 100,
+                    decay: Math.random() * 3 + 1
+                });
+            }
+        }
+        // Update particles
+        function updateParticles() {
+            particles.forEach(particle => {
+                particle.x += particle.vx;
+                particle.y += particle.vy;
+                particle.vy += 0.1; // Gravity
+                particle.life -= particle.decay;
+                particle.element.style.left = `${particle.x}px`;
+                particle.element.style.top = `${particle.y}px`;
+                particle.element.style.opacity = particle.life / 100;
+                // Remove if dead
+                if (particle.life <= 0) {
+                    particle.element.remove();
+                    particles = particles.filter(p => p !== particle);
+                }
+            });
+        }
+        // Activate shield
+        function activateShield(duration) {
+            shieldActive = true;
+            shieldTime = duration;
+            shield.style.display = 'block';
+            // Shield pulse effect
+            let pulseSize = 1;
+            const pulseInterval = setInterval(() => {
+                pulseSize = pulseSize === 1 ? 0.9 : 1;
+                shield.style.transform = `scale(${pulseSize})`;
+            }, 300);
+            // End shield when time is up
+            setTimeout(() => {
+                clearInterval(pulseInterval);
+                shieldActive = false;
+                shield.style.display = 'none';
+            }, duration * 1000);
+        }
+        // Update shield timer
+        function updateShield() {
+            if (shieldActive) {
+                shieldTime--;
+                if (shieldTime <= 0) {
+                    shieldActive = false;
+                    shield.style.display = 'none';
+                }
+            }
+            shieldTimeDisplay.textContent = shieldTime;
+        }
+        // Update HUD
+        function updateHUD() {
+            healthDisplay.textContent = health;
+            scoreDisplay.textContent = score;
+            shieldTimeDisplay.textContent = shieldTime;
+            // Update high score if needed
+            if (score > highScore) {
+                highScore = score;
+                localStorage.setItem('galaxyExplorerHighScore', highScore);
+            }
+        }
+        // Event listeners
+        startButton.addEventListener('click', startGame);
+        restartButton.addEventListener('click', startGame);
+        // Keyboard controls
+        document.addEventListener('keydown', (e) => {
+            if (keys.hasOwnProperty(e.key)) {
+                keys[e.key] = true;
+                // Show controls again if pressed
+                if (controls.style.display === 'none') {
+                    controls.style.display = 'flex';
+                    controls.style.opacity = 1;
+                    setTimeout(() => {
+                        animateControlsOut();
+                    }, 3000);
+                }
+            }
+        });
+        document.addEventListener('keyup', (e) => {
+            if (keys.hasOwnProperty(e.key)) {
+                keys[e.key] = false;
+            }
+        });
+        // Touch controls for mobile
+        let touchStartX = 0;
+        let touchStartY = 0;
+        gameContainer.addEventListener('touchstart', (e) => {
+            touchStartX = e.touches[0].clientX;
+            touchStartY = e.touches[0].clientY;
+            // Show controls
+            controls.style.display = 'flex';
+            controls.style.opacity = 1;
+            setTimeout(() => {
+                animateControlsOut();
+            }, 3000);
+        }, false);
+        gameContainer.addEventListener('touchmove', (e) => {
+            if (!touchStartX || !touchStartY) return;
+            const touchEndX = e.touches[0].clientX;
+            const touchEndY = e.touches[0].clientY;
+            const dx = touchEndX - touchStartX;
+            const dy = touchEndY - touchStartY;
+            // Determine direction
+            if (Math.abs(dx) > Math.abs(dy)) {
+                // Horizontal movement
+                if (dx > 0) {
+                    keys.ArrowRight = true;
+                    keys.ArrowLeft = false;
+                } else {
+                    keys.ArrowLeft = true;
+                    keys.ArrowRight = false;
+                }
+                keys.ArrowUp = false;
+                keys.ArrowDown = false;
+            } else {
+                // Vertical movement
+                if (dy > 0) {
+                    keys.ArrowDown = true;
+                    keys.ArrowUp = false;
+                } else {
+                    keys.ArrowUp = true;
+                    keys.ArrowDown = false;
+                }
+                keys.ArrowLeft = false;
+                keys.ArrowRight = false;
+            }
+            e.preventDefault();
+        }, false);
+        gameContainer.addEventListener('touchend', () => {
+            keys.ArrowUp = false;
+            keys.ArrowDown = false;
+            keys.ArrowLeft = false;
+            keys.ArrowRight = false;
+            touchStartX = 0;
+            touchStartY = 0;
+        }, false);
+        // Initialize background stars
+        createBackgroundStars();
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <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>