Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Subspace Continuum - Enhanced</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'space-dark': '#0a0a1a', | |
| 'space-blue': '#1a2a6c', | |
| 'ship-red': '#ff4d4d', | |
| 'ship-green': '#4dff4d', | |
| 'ship-blue': '#4d4dff', | |
| 'ship-yellow': '#ffff4d', | |
| 'ship-purple': '#bd4dff', | |
| 'ship-orange': '#ff9d4d', | |
| 'ship-cyan': '#4dffff', | |
| 'ship-pink': '#ff4dd2', | |
| 'energy-blue': '#00aaff', | |
| 'energy-yellow': '#ffff00', | |
| 'energy-red': '#ff3333', | |
| 'asteroid-brown': '#8B4513', | |
| 'nebula-pink': '#ff69b4', | |
| 'ice-blue': '#87ceeb' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Add ship selection menu styles */ | |
| .ship-menu { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: rgba(10, 10, 26, 0.95); | |
| border: 2px solid #4444aa; | |
| border-radius: 15px; | |
| padding: 20px; | |
| z-index: 100; | |
| box-shadow: 0 0 30px rgba(100, 100, 255, 0.7); | |
| width: 80%; | |
| max-width: 600px; | |
| display: none; | |
| } | |
| .ship-menu-header { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| color: #4d4dff; | |
| text-shadow: 0 0 10px #4d4dff; | |
| } | |
| .ships-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .ship-option { | |
| background: rgba(30, 30, 60, 0.7); | |
| border-radius: 10px; | |
| padding: 15px 5px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: 2px solid transparent; | |
| } | |
| .ship-option:hover { | |
| transform: scale(1.1); | |
| background: rgba(50, 50, 100, 0.9); | |
| box-shadow: 0 0 15px #00aaff; | |
| } | |
| .ship-option.selected { | |
| border-color: #00aaff; | |
| box-shadow: 0 0 20px #00aaff; | |
| background: rgba(40, 40, 80, 0.9); | |
| } | |
| .ship-option i { | |
| font-size: 24px; | |
| margin-bottom: 8px; | |
| } | |
| .menu-buttons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| } | |
| .menu-button { | |
| padding: 10px 25px; | |
| border-radius: 8px; | |
| border: none; | |
| background: #1a2a6c; | |
| color: white; | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 0 10px rgba(100, 100, 255, 0.5); | |
| } | |
| .menu-button:hover { | |
| background: #2a3a9c; | |
| box-shadow: 0 0 20px rgba(100, 100, 255, 0.8); | |
| } | |
| </style> | |
| </head> | |
| <body class="text-white"> | |
| <!-- Add ship selection menu --> | |
| <div id="shipMenu" class="ship-menu"> | |
| <h2 class="ship-menu-header text-2xl font-bold">SELECT YOUR SHIP</h2> | |
| <div class="ships-grid" id="shipsGrid"> | |
| <!-- Ship options will be generated here --> | |
| </div> | |
| <div class="menu-buttons"> | |
| <button id="startGame" class="menu-button">START GAME</button> | |
| <button id="closeMenu" class="menu-button">CLOSE</button> | |
| </div> | |
| </div> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Orbitron', sans-serif; | |
| background: linear-gradient(135deg, #0a0a1a, #1a0a2a); | |
| overflow: hidden; | |
| height: 100vh; | |
| } | |
| .zone-asteroid { | |
| background: radial-gradient(circle at center, #2a2a2a, #000000); | |
| animation: zonePulse 4s infinite alternate; | |
| } | |
| .zone-nebula { | |
| background: radial-gradient(circle at center, #2a0a2a, #000000); | |
| animation: zonePulse 4s infinite alternate; | |
| } | |
| .zone-ice { | |
| background: radial-gradient(circle at center, #0a2a2a, #001111); | |
| animation: zonePulse 4s infinite alternate; | |
| } | |
| .zone-vortex { | |
| background: radial-gradient(circle at center, #1a0a2a, #000000); | |
| animation: zonePulse 4s infinite alternate; | |
| } | |
| .zone-electric { | |
| background: radial-gradient(circle at center, #2a2a0a, #000000); | |
| animation: zonePulse 4s infinite alternate; | |
| } | |
| .zone-gravity { | |
| background: radial-gradient(circle at center, #0a2a0a, #000000); | |
| animation: zonePulse 4s infinite alternate; | |
| } | |
| .zone-plasma { | |
| background: radial-gradient(circle at center, #2a0a0a, #000000); | |
| animation: zonePulse 4s infinite alternate; | |
| } | |
| .zone-wormhole { | |
| background: radial-gradient(circle at center, #0a0a2a, #000000); | |
| animation: zonePulse 4s infinite alternate; | |
| } | |
| .game-container { | |
| position: relative; | |
| width: 100%; | |
| height: 85vh; | |
| overflow: hidden; | |
| background: radial-gradient(circle at center, #0a0a1a 0%, #000000 100%); | |
| border: 2px solid #4444aa; | |
| box-shadow: 0 0 30px rgba(100, 100, 255, 0.5); | |
| } | |
| .ship { | |
| position: absolute; | |
| transition: transform 0.1s ease; | |
| z-index: 10; | |
| text-shadow: 0 0 10px currentColor, 0 0 20px currentColor; | |
| filter: drop-shadow(0 0 5px currentColor); | |
| } | |
| .bullet { | |
| position: absolute; | |
| width: 6px; | |
| height: 15px; | |
| border-radius: 50%; | |
| background: #ffff00; | |
| box-shadow: 0 0 12px #ffff00, 0 0 20px #ffaa00; | |
| z-index: 5; | |
| animation: bulletPulse 0.5s infinite alternate; | |
| } | |
| .star { | |
| position: absolute; | |
| background: white; | |
| border-radius: 50%; | |
| z-index: 1; | |
| animation: starTwinkle 3s infinite alternate; | |
| } | |
| .energy-bar { | |
| height: 20px; | |
| border-radius: 10px; | |
| background: linear-gradient(to right, #ff3333, #ffff00, #00aaff); | |
| box-shadow: 0 0 15px rgba(0, 170, 255, 0.9); | |
| animation: energyPulse 2s infinite alternate; | |
| } | |
| .ship-icon { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto; | |
| font-size: 14px; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 0 5px rgba(255,255,255,0.5); | |
| } | |
| .ship-selected { | |
| box-shadow: 0 0 20px #00aaff, 0 0 30px #0088ff; | |
| border: 2px solid #00aaff; | |
| transform: scale(1.2); | |
| } | |
| .weapon-icon { | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 10px; | |
| background: rgba(30, 30, 60, 0.7); | |
| margin: 0 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 0 8px rgba(100, 100, 255, 0.5); | |
| } | |
| .weapon-icon:hover { | |
| transform: scale(1.2); | |
| background: rgba(50, 50, 100, 0.9); | |
| box-shadow: 0 0 15px #00aaff; | |
| } | |
| .weapon-icon.active { | |
| box-shadow: 0 0 20px #00aaff, 0 0 30px #0088ff; | |
| border: 2px solid #00aaff; | |
| transform: scale(1.1); | |
| } | |
| .pulse { | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| @keyframes starTwinkle { | |
| 0% { opacity: 0.3; } | |
| 100% { opacity: 1; } | |
| } | |
| @keyframes bulletPulse { | |
| 0% { transform: scale(1); } | |
| 100% { transform: scale(1.2); } | |
| } | |
| @keyframes energyPulse { | |
| 0% { box-shadow: 0 0 10px rgba(0, 170, 255, 0.7); } | |
| 100% { box-shadow: 0 0 20px rgba(0, 200, 255, 0.9); } | |
| } | |
| @keyframes zonePulse { | |
| 0% { box-shadow: inset 0 0 20px rgba(100, 100, 255, 0.3); } | |
| 100% { box-shadow: inset 0 0 40px rgba(150, 150, 255, 0.5); } | |
| } | |
| .radar-dot { | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #00ff00; | |
| box-shadow: 0 0 8px #00ff00, 0 0 15px #00ff00; | |
| animation: radarPulse 1s infinite alternate; | |
| } | |
| @keyframes radarPulse { | |
| 0% { transform: scale(1); opacity: 0.7; } | |
| 100% { transform: scale(1.3); opacity: 1; } | |
| } | |
| .explosion { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, #ffff00, #ff6600, transparent); | |
| animation: explode 0.6s forwards; | |
| z-index: 20; | |
| box-shadow: 0 0 30px #ff6600; | |
| } | |
| @keyframes explode { | |
| 0% { transform: scale(0.1); opacity: 1; } | |
| 70% { transform: scale(2); opacity: 0.7; } | |
| 100% { transform: scale(4); opacity: 0; } | |
| } | |
| .powerup { | |
| position: absolute; | |
| width: 25px; | |
| height: 25px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, #00ff00, #008800); | |
| box-shadow: 0 0 15px #00ff00, 0 0 25px #00aa00; | |
| animation: pulse 1.5s infinite, powerupFloat 3s infinite ease-in-out; | |
| z-index: 4; | |
| } | |
| @keyframes powerupFloat { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .ship-trail { | |
| position: absolute; | |
| width: 12px; | |
| height: 25px; | |
| background: linear-gradient(to top, #ff6600, transparent); | |
| border-radius: 50% 50% 0 0; | |
| z-index: 2; | |
| box-shadow: 0 0 10px #ff6600; | |
| animation: trailFade 0.5s forwards; | |
| } | |
| @keyframes trailFade { | |
| 0% { opacity: 1; transform: scale(1); } | |
| 100% { opacity: 0; transform: scale(0.5); } | |
| } | |
| .asteroid { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: linear-gradient(45deg, #8B4513, #5D2906); | |
| box-shadow: 0 0 15px #8B4513; | |
| z-index: 3; | |
| } | |
| .nebula-cloud { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(255, 105, 180, 0.4), transparent); | |
| box-shadow: 0 0 40px rgba(255, 105, 180, 0.6); | |
| z-index: 2; | |
| animation: nebulaPulse 5s infinite alternate; | |
| } | |
| @keyframes nebulaPulse { | |
| 0% { opacity: 0.4; } | |
| 100% { opacity: 0.7; } | |
| } | |
| .ice-crystal { | |
| position: absolute; | |
| clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); | |
| background: linear-gradient(45deg, #87CEEB, #5CA9DD); | |
| box-shadow: 0 0 15px #87CEEB; | |
| z-index: 3; | |
| animation: iceGlow 3s infinite alternate; | |
| } | |
| @keyframes iceGlow { | |
| 0% { box-shadow: 0 0 10px #87CEEB; } | |
| 100% { box-shadow: 0 0 25px #87CEEB, 0 0 40px #5CA9DD; } | |
| } | |
| .header-glow { | |
| text-shadow: 0 0 10px #4d4dff, 0 0 20px #4d4dff; | |
| animation: headerPulse 3s infinite alternate; | |
| } | |
| @keyframes headerPulse { | |
| 0% { text-shadow: 0 0 10px #4d4dff, 0 0 20px #4d4dff; } | |
| 100% { text-shadow: 0 0 15px #4d4dff, 0 0 30px #4d4dff, 0 0 40px #4d4dff; } | |
| } | |
| </style> | |
| </head> | |
| <body class="text-white"> | |
| <div class="container mx-auto px-4 py-2"> | |
| <header class="flex justify-between items-center mb-2"> | |
| <h1 class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 header-glow"> | |
| <i class="fas fa-rocket mr-2"></i>SUBSPACE CONTINUUM - ENHANCED | |
| </h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-space-blue px-4 py-2 rounded-lg"> | |
| <span class="text-energy-yellow">SCORE: </span> | |
| <span id="score" class="font-bold">0</span> | |
| </div> | |
| <div class="bg-space-blue px-4 py-2 rounded-lg"> | |
| <span class="text-energy-blue">FPS: </span> | |
| <span id="fps" class="font-bold">60</span> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="game-container" id="gameContainer"> | |
| <!-- Stars will be generated here --> | |
| <!-- Ships and bullets will be added dynamically --> | |
| </div> | |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="bg-space-dark bg-opacity-70 p-4 rounded-xl border border-blue-500"> | |
| <h2 class="text-xl font-bold mb-3 text-center text-blue-300">SHIP CONTROLS</h2> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <div></div> | |
| <div class="bg-space-blue p-3 rounded-lg text-center">↑<br>THRUST</div> | |
| <div></div> | |
| <div class="bg-space-blue p-3 rounded-lg text-center">←<br>LEFT</div> | |
| <div class="bg-space-blue p-3 rounded-lg text-center">↓<br>BOMB</div> | |
| <div class="bg-space-blue p-3 rounded-lg text-center">→<br>RIGHT</div> | |
| <div class="col-span-3 bg-space-blue p-3 rounded-lg text-center mt-2">SPACE<br>SHOOT</div> | |
| </div> | |
| </div> | |
| <div class="bg-space-dark bg-opacity-70 p-4 rounded-xl border border-blue-500"> | |
| <h2 class="text-xl font-bold mb-3 text-center text-blue-300">ENERGY & WEAPONS</h2> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span>ENERGY</span> | |
| <span id="energyValue">100%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-4"> | |
| <div id="energyBar" class="energy-bar h-4 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-4"> | |
| <div class="weapon-icon active" data-weapon="1"> | |
| <i class="fas fa-bolt text-yellow-300"></i> | |
| </div> | |
| <div class="weapon-icon" data-weapon="2"> | |
| <i class="fas fa-fire text-red-400"></i> | |
| </div> | |
| <div class="weapon-icon" data-weapon="3"> | |
| <i class="fas fa-snowflake text-blue-300"></i> | |
| </div> | |
| <div class="weapon-icon" data-weapon="4"> | |
| <i class="fas fa-bomb text-purple-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-space-dark bg-opacity-70 p-4 rounded-xl border border-blue-500"> | |
| <h2 class="text-xl font-bold mb-3 text-center text-blue-300">ZONE INFO</h2> | |
| <div class="text-center mb-3"> | |
| <div id="zoneName" class="text-lg font-bold text-yellow-300">NORMAL SPACE</div> | |
| <div id="zoneDescription" class="text-sm mt-2">Standard combat zone</div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <div class="bg-asteroid-brown p-2 rounded text-center text-xs">ASTEROID</div> | |
| <div class="bg-nebula-pink p-2 rounded text-center text-xs">NEBULA</div> | |
| <div class="bg-ice-blue p-2 rounded text-center text-xs">ICE</div> | |
| </div> | |
| </div> | |
| <div class="bg-space-dark bg-opacity-70 p-4 rounded-xl border border-blue-500"> | |
| <h2 class="text-xl font-bold mb-3 text-center text-blue-300">SHIP SELECT</h2> | |
| <div class="relative h-32 bg-black bg-opacity-50 rounded-lg mb-4 border border-blue-700"> | |
| <div id="radar" class="absolute inset-0"></div> | |
| <div class="absolute top-1/2 left-1/2 w-2 h-2 bg-red-500 rounded-full transform -translate-x-1/2 -translate-y-1/2"></div> | |
| </div> | |
| <div class="grid grid-cols-4 gap-1"> | |
| <!-- Original 8 ships --> | |
| <div class="ship-icon bg-ship-red ship-selected" data-ship="1"> | |
| <i class="fas fa-fighter-jet"></i> | |
| </div> | |
| <div class="ship-icon bg-ship-green" data-ship="2"> | |
| <i class="fas fa-space-shuttle"></i> | |
| </div> | |
| <div class="ship-icon bg-ship-blue" data-ship="3"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| <div class="ship-icon bg-ship-yellow" data-ship="4"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <div class="ship-icon bg-ship-purple" data-ship="5"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <div class="ship-icon bg-ship-orange" data-ship="6"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div class="ship-icon bg-ship-cyan" data-ship="7"> | |
| <i class="fas fa-wind"></i> | |
| </div> | |
| <div class="ship-icon bg-ship-pink" data-ship="8"> | |
| <i class="fas fa-moon"></i> | |
| </div> | |
| <!-- New 8 ships --> | |
| <div class="ship-icon bg-gray-500" data-ship="9"> | |
| <i class="fas fa-ghost"></i> | |
| </div> | |
| <div class="ship-icon bg-green-500" data-ship="10"> | |
| <i class="fas fa-dragon"></i> | |
| </div> | |
| <div class="ship-icon bg-blue-300" data-ship="11"> | |
| <i class="fas fa-snowflake"></i> | |
| </div> | |
| <div class="ship-icon bg-yellow-600" data-ship="12"> | |
| <i class="fas fa-sun"></i> | |
| </div> | |
| <div class="ship-icon bg-purple-700" data-ship="13"> | |
| <i class="fas fa-crown"></i> | |
| </div> | |
| <div class="ship-icon bg-red-700" data-ship="14"> | |
| <i class="fas fa-skull"></i> | |
| </div> | |
| <div class="ship-icon bg-indigo-500" data-ship="15"> | |
| <i class="fas fa-hat-wizard"></i> | |
| </div> | |
| <div class="ship-icon bg-pink-500" data-ship="16"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Game variables | |
| const gameContainer = document.getElementById('gameContainer'); | |
| const radar = document.getElementById('radar'); | |
| const scoreElement = document.getElementById('score'); | |
| const energyBar = document.getElementById('energyBar'); | |
| const energyValue = document.getElementById('energyValue'); | |
| const fpsElement = document.getElementById('fps'); | |
| const zoneMenu = document.getElementById('zoneMenu'); | |
| const closeZoneMenu = document.getElementById('closeZoneMenu'); | |
| let playerShip = null; | |
| let ships = []; | |
| let bullets = []; | |
| let stars = []; | |
| let powerups = []; | |
| let explosions = []; | |
| let score = 0; | |
| let energy = 100; | |
| let selectedWeapon = 1; | |
| let selectedShip = 1; | |
| let keys = {}; | |
| let lastTime = 0; | |
| let frameCount = 0; | |
| let lastFpsUpdate = 0; | |
| let fps = 60; | |
| let currentZone = 'normal'; | |
| let zoneTimer = 0; | |
| let asteroids = []; | |
| let nebulaClouds = []; | |
| let iceCrystals = []; | |
| let vortexes = []; | |
| let electricFields = []; | |
| let gravityWells = []; | |
| let plasmaStorms = []; | |
| let wormholes = []; | |
| // Create stars | |
| function createStars() { | |
| for (let i = 0; i < 200; i++) { | |
| const star = document.createElement('div'); | |
| star.className = 'star'; | |
| star.style.width = `${Math.random() * 3}px`; | |
| star.style.height = star.style.width; | |
| star.style.left = `${Math.random() * 100}%`; | |
| star.style.top = `${Math.random() * 100}%`; | |
| star.style.opacity = Math.random(); | |
| gameContainer.appendChild(star); | |
| stars.push(star); | |
| } | |
| } | |
| // Create zone elements | |
| function createZoneElements() { | |
| // Clear existing zone elements | |
| asteroids.forEach(a => a.element.remove()); | |
| nebulaClouds.forEach(n => n.element.remove()); | |
| iceCrystals.forEach(i => i.element.remove()); | |
| asteroids = []; | |
| nebulaClouds = []; | |
| iceCrystals = []; | |
| // Create new elements based on zone | |
| switch(currentZone) { | |
| case 'asteroid': | |
| for (let i = 0; i < 30; i++) { | |
| const asteroid = { | |
| x: Math.random() * gameContainer.offsetWidth, | |
| y: Math.random() * gameContainer.offsetHeight, | |
| size: Math.random() * 50 + 20, | |
| element: null | |
| }; | |
| const element = document.createElement('div'); | |
| element.style.position = 'absolute'; | |
| element.style.left = `${asteroid.x}px`; | |
| element.style.top = `${asteroid.y}px`; | |
| element.style.width = `${asteroid.size}px`; | |
| element.style.height = `${asteroid.size}px`; | |
| element.style.backgroundColor = '#8B4513'; | |
| element.style.borderRadius = '50%'; | |
| element.style.boxShadow = '0 0 20px #8B4513'; | |
| gameContainer.appendChild(element); | |
| asteroid.element = element; | |
| asteroids.push(asteroid); | |
| } | |
| break; | |
| case 'nebula': | |
| for (let i = 0; i < 20; i++) { | |
| const nebula = { | |
| x: Math.random() * gameContainer.offsetWidth, | |
| y: Math.random() * gameContainer.offsetHeight, | |
| size: Math.random() * 200 + 100, | |
| element: null | |
| }; | |
| const element = document.createElement('div'); | |
| element.style.position = 'absolute'; | |
| element.style.left = `${nebula.x}px`; | |
| element.style.top = `${nebula.y}px`; | |
| element.style.width = `${nebula.size}px`; | |
| element.style.height = `${nebula.size}px`; | |
| element.style.backgroundColor = 'rgba(255, 105, 180, 0.3)'; | |
| element.style.borderRadius = '50%'; | |
| element.style.boxShadow = '0 0 50px rgba(255, 105, 180, 0.6)'; | |
| gameContainer.appendChild(element); | |
| nebula.element = element; | |
| nebulaClouds.push(nebula); | |
| } | |
| break; | |
| case 'ice': | |
| for (let i = 0; i < 40; i++) { | |
| const crystal = { | |
| x: Math.random() * gameContainer.offsetWidth, | |
| y: Math.random() * gameContainer.offsetHeight, | |
| size: Math.random() * 25 + 10, | |
| element: null | |
| }; | |
| const element = document.createElement('div'); | |
| element.style.position = 'absolute'; | |
| element.style.left = `${crystal.x}px`; | |
| element.style.top = `${crystal.y}px`; | |
| element.style.width = `${crystal.size}px`; | |
| element.style.height = `${crystal.size}px`; | |
| element.style.backgroundColor = '#87CEEB'; | |
| element.style.clipPath = 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)'; | |
| element.style.boxShadow = '0 0 15px #87CEEB'; | |
| gameContainer.appendChild(element); | |
| crystal.element = element; | |
| iceCrystals.push(crystal); | |
| } | |
| break; | |
| } | |
| } | |
| // Update zone display | |
| function updateZoneDisplay() { | |
| const zoneName = document.getElementById('zoneName'); | |
| const zoneDescription = document.getElementById('zoneDescription'); | |
| switch(currentZone) { | |
| case 'normal': | |
| zoneName.textContent = 'NORMAL SPACE'; | |
| zoneDescription.textContent = 'Standard combat zone'; | |
| gameContainer.className = 'game-container'; | |
| break; | |
| case 'asteroid': | |
| zoneName.textContent = 'ASTEROID FIELD'; | |
| zoneDescription.textContent = 'Navigate through space rocks'; | |
| gameContainer.className = 'game-container zone-asteroid'; | |
| break; | |
| case 'nebula': | |
| zoneName.textContent = 'NEBULA ZONE'; | |
| zoneDescription.textContent = 'Reduced visibility area'; | |
| gameContainer.className = 'game-container zone-nebula'; | |
| break; | |
| case 'ice': | |
| zoneName.textContent = 'ICE SECTOR'; | |
| zoneDescription.textContent = 'Slippery movement conditions'; | |
| gameContainer.className = 'game-container zone-ice'; | |
| break; | |
| case 'vortex': | |
| zoneName.textContent = 'VORTEX ZONE'; | |
| zoneDescription.textContent = 'Distorted space-time effects'; | |
| gameContainer.className = 'game-container zone-vortex'; | |
| break; | |
| case 'electric': | |
| zoneName.textContent = 'ELECTRIC FIELD'; | |
| zoneDescription.textContent = 'High energy interference'; | |
| gameContainer.className = 'game-container zone-electric'; | |
| break; | |
| case 'gravity': | |
| zoneName.textContent = 'GRAVITY WELL'; | |
| zoneDescription.textContent = 'Strong gravitational pull'; | |
| gameContainer.className = 'game-container zone-gravity'; | |
| break; | |
| case 'plasma': | |
| zoneName.textContent = 'PLASMA STORM'; | |
| zoneDescription.textContent = 'Ionized particle chaos'; | |
| gameContainer.className = 'game-container zone-plasma'; | |
| break; | |
| case 'wormhole': | |
| zoneName.textContent = 'WORMHOLE SPACE'; | |
| zoneDescription.textContent = 'Spacetime tunneling zone'; | |
| gameContainer.className = 'game-container zone-wormhole'; | |
| break; | |
| } | |
| } | |
| // Create player ship | |
| function createPlayerShip() { | |
| playerShip = { | |
| x: gameContainer.offsetWidth / 2, | |
| y: gameContainer.offsetHeight / 2, | |
| width: 30, | |
| height: 30, | |
| speed: 0, | |
| angle: 0, | |
| rotationSpeed: 0, | |
| thrust: 0, | |
| maxSpeed: 5, | |
| friction: 0.95, | |
| trail: [], | |
| lastShot: 0, | |
| lastBomb: 0, | |
| weapon: 1, | |
| handling: 1.0 // For zone effects | |
| }; | |
| const shipElement = document.createElement('div'); | |
| shipElement.className = 'ship'; | |
| shipElement.innerHTML = '<i class="fas fa-fighter-jet text-2xl"></i>'; | |
| shipElement.style.color = '#ff4d4d'; | |
| gameContainer.appendChild(shipElement); | |
| playerShip.element = shipElement; | |
| updateShipPosition(); | |
| } | |
| // Update ship position | |
| function updateShipPosition() { | |
| if (!playerShip) return; | |
| playerShip.element.style.left = `${playerShip.x - playerShip.width/2}px`; | |
| playerShip.element.style.top = `${playerShip.y - playerShip.height/2}px`; | |
| playerShip.element.style.transform = `rotate(${playerShip.angle}deg)`; | |
| // Add trail effect | |
| if (playerShip.thrust > 0) { | |
| const trail = document.createElement('div'); | |
| trail.className = 'ship-trail'; | |
| trail.style.left = `${playerShip.x - 5}px`; | |
| trail.style.top = `${playerShip.y + 10}px`; | |
| gameContainer.appendChild(trail); | |
| playerShip.trail.push(trail); | |
| // Remove old trails | |
| if (playerShip.trail.length > 10) { | |
| const oldTrail = playerShip.trail.shift(); | |
| if (oldTrail.parentNode) { | |
| oldTrail.parentNode.removeChild(oldTrail); | |
| } | |
| } | |
| } | |
| // Fade out trails | |
| playerShip.trail.forEach((trail, index) => { | |
| const opacity = parseFloat(trail.style.opacity || 1); | |
| if (opacity <= 0) { | |
| if (trail.parentNode) { | |
| trail.parentNode.removeChild(trail); | |
| } | |
| playerShip.trail.splice(index, 1); | |
| } else { | |
| trail.style.opacity = opacity - 0.1; | |
| } | |
| }); | |
| } | |
| // Create enemy ship | |
| function createEnemyShip() { | |
| const shipType = Math.floor(Math.random() * 16) + 1; | |
| const ship = { | |
| x: Math.random() * gameContainer.offsetWidth, | |
| y: Math.random() * gameContainer.offsetHeight, | |
| width: 25, | |
| height: 25, | |
| speed: Math.random() * 2 + 1, | |
| angle: Math.random() * 360, | |
| rotationSpeed: (Math.random() - 0.5) * 5, | |
| color: `hsl(${Math.random() * 360}, 70%, 60%)`, | |
| lastShot: 0, | |
| health: 100, | |
| type: shipType | |
| }; | |
| const shipElement = document.createElement('div'); | |
| shipElement.className = 'ship'; | |
| // Set ship icon based on type | |
| switch(shipType) { | |
| case 1: shipElement.innerHTML = '<i class="fas fa-fighter-jet text-xl"></i>'; break; | |
| case 2: shipElement.innerHTML = '<i class="fas fa-space-shuttle text-xl"></i>'; break; | |
| case 3: shipElement.innerHTML = '<i class="fas fa-rocket text-xl"></i>'; break; | |
| case 4: shipElement.innerHTML = '<i class="fas fa-shield-alt text-xl"></i>'; break; | |
| case 5: shipElement.innerHTML = '<i class="fas fa-star text-xl"></i>'; break; | |
| case 6: shipElement.innerHTML = '<i class="fas fa-bolt text-xl"></i>'; break; | |
| case 7: shipElement.innerHTML = '<i class="fas fa-wind text-xl"></i>'; break; | |
| case 8: shipElement.innerHTML = '<i class="fas fa-moon text-xl"></i>'; break; | |
| case 9: shipElement.innerHTML = '<i class="fas fa-ghost text-xl"></i>'; break; | |
| case 10: shipElement.innerHTML = '<i class="fas fa-dragon text-xl"></i>'; break; | |
| case 11: shipElement.innerHTML = '<i class="fas fa-snowflake text-xl"></i>'; break; | |
| case 12: shipElement.innerHTML = '<i class="fas fa-sun text-xl"></i>'; break; | |
| case 13: shipElement.innerHTML = '<i class="fas fa-crown text-xl"></i>'; break; | |
| case 14: shipElement.innerHTML = '<i class="fas fa-skull text-xl"></i>'; break; | |
| case 15: shipElement.innerHTML = '<i class="fas fa-hat-wizard text-xl"></i>'; break; | |
| case 16: shipElement.innerHTML = '<i class="fas fa-heart text-xl"></i>'; break; | |
| default: shipElement.innerHTML = '<i class="fas fa-space-shuttle text-xl"></i>'; | |
| } | |
| shipElement.style.color = ship.color; | |
| gameContainer.appendChild(shipElement); | |
| ship.element = shipElement; | |
| ships.push(ship); | |
| updateEnemyPosition(ship); | |
| } | |
| // Update enemy position | |
| function updateEnemyPosition(ship) { | |
| ship.element.style.left = `${ship.x - ship.width/2}px`; | |
| ship.element.style.top = `${ship.y - ship.height/2}px`; | |
| ship.element.style.transform = `rotate(${ship.angle}deg)`; | |
| } | |
| // Create bullet | |
| function createBullet(x, y, angle, isPlayer = true) { | |
| const bullet = { | |
| x: x, | |
| y: y, | |
| angle: angle, | |
| speed: 10, | |
| isPlayer: isPlayer, | |
| life: 100 | |
| }; | |
| const bulletElement = document.createElement('div'); | |
| bulletElement.className = 'bullet'; | |
| bulletElement.style.backgroundColor = isPlayer ? '#ffff00' : '#ff6600'; | |
| gameContainer.appendChild(bulletElement); | |
| bullet.element = bulletElement; | |
| bullets.push(bullet); | |
| updateBulletPosition(bullet); | |
| } | |
| // Update bullet position | |
| function updateBulletPosition(bullet) { | |
| bullet.element.style.left = `${bullet.x - 2}px`; | |
| bullet.element.style.top = `${bullet.y - 5}px`; | |
| } | |
| // Create explosion | |
| function createExplosion(x, y) { | |
| const explosion = document.createElement('div'); | |
| explosion.className = 'explosion'; | |
| explosion.style.left = `${x - 15}px`; | |
| explosion.style.top = `${y - 15}px`; | |
| gameContainer.appendChild(explosion); | |
| explosions.push(explosion); | |
| // Remove explosion after animation | |
| setTimeout(() => { | |
| if (explosion.parentNode) { | |
| explosion.parentNode.removeChild(explosion); | |
| } | |
| explosions.splice(explosions.indexOf(explosion), 1); | |
| }, 500); | |
| } | |
| // Create powerup | |
| function createPowerup() { | |
| const powerup = { | |
| x: Math.random() * (gameContainer.offsetWidth - 40) + 20, | |
| y: Math.random() * (gameContainer.offsetHeight - 40) + 20, | |
| type: Math.floor(Math.random() * 3) + 1, // 1: energy, 2: weapon, 3: shield | |
| element: null | |
| }; | |
| const powerupElement = document.createElement('div'); | |
| powerupElement.className = 'powerup'; | |
| powerupElement.style.left = `${powerup.x - 10}px`; | |
| powerupElement.style.top = `${powerup.y - 10}px`; | |
| switch(powerup.type) { | |
| case 1: | |
| powerupElement.style.background = 'radial-gradient(circle, #00ff00, #008800)'; | |
| break; | |
| case 2: | |
| powerupElement.style.background = 'radial-gradient(circle, #ffff00, #ffaa00)'; | |
| break; | |
| case 3: | |
| powerupElement.style.background = 'radial-gradient(circle, #00aaff, #0066cc)'; | |
| break; | |
| } | |
| gameContainer.appendChild(powerupElement); | |
| powerup.element = powerupElement; | |
| powerups.push(powerup); | |
| } | |
| // Update radar | |
| function updateRadar() { | |
| radar.innerHTML = ''; | |
| // Draw player dot | |
| const playerDot = document.createElement('div'); | |
| playerDot.className = 'radar-dot'; | |
| playerDot.style.backgroundColor = '#ff0000'; | |
| playerDot.style.left = '50%'; | |
| playerDot.style.top = '50%'; | |
| radar.appendChild(playerDot); | |
| // Draw enemy dots | |
| ships.forEach(ship => { | |
| const relX = (ship.x - playerShip.x) / 50; | |
| const relY = (ship.y - playerShip.y) / 50; | |
| if (Math.abs(relX) < 1 && Math.abs(relY) < 1) { | |
| const dot = document.createElement('div'); | |
| dot.className = 'radar-dot'; | |
| dot.style.left = `${50 + relX * 50}%`; | |
| dot.style.top = `${50 + relY * 50}%`; | |
| radar.appendChild(dot); | |
| } | |
| }); | |
| } | |
| // Handle collisions | |
| function checkCollisions() { | |
| // Bullet-enemy collisions | |
| for (let i = bullets.length - 1; i >= 0; i--) { | |
| const bullet = bullets[i]; | |
| if (!bullet.isPlayer) continue; | |
| for (let j = ships.length - 1; j >= 0; j--) { | |
| const ship = ships[j]; | |
| const dx = bullet.x - ship.x; | |
| const dy = bullet.y - ship.y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 20) { | |
| // Hit! | |
| createExplosion(ship.x, ship.y); | |
| ship.health -= 25; | |
| if (ship.health <= 0) { | |
| // Destroy ship | |
| if (ship.element.parentNode) { | |
| ship.element.parentNode.removeChild(ship.element); | |
| } | |
| ships.splice(j, 1); | |
| score += 100; | |
| scoreElement.textContent = score; | |
| } | |
| // Remove bullet | |
| if (bullet.element.parentNode) { | |
| bullet.element.parentNode.removeChild(bullet.element); | |
| } | |
| bullets.splice(i, 1); | |
| break; | |
| } | |
| } | |
| } | |
| // Player-enemy collisions | |
| ships.forEach(ship => { | |
| const dx = playerShip.x - ship.x; | |
| const dy = playerShip.y - ship.y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 25) { | |
| // Collision! | |
| createExplosion(playerShip.x, playerShip.y); | |
| energy -= 20; | |
| energyBar.style.width = `${energy}%`; | |
| energyValue.textContent = `${Math.floor(energy)}%`; | |
| // Push ships apart | |
| const angle = Math.atan2(dy, dx); | |
| playerShip.x += Math.cos(angle) * 10; | |
| playerShip.y += Math.sin(angle) * 10; | |
| ship.x -= Math.cos(angle) * 10; | |
| ship.y -= Math.sin(angle) * 10; | |
| } | |
| }); | |
| // Player-powerup collisions | |
| for (let i = powerups.length - 1; i >= 0; i--) { | |
| const powerup = powerups[i]; | |
| const dx = playerShip.x - powerup.x; | |
| const dy = playerShip.y - powerup.y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 25) { | |
| // Collect powerup | |
| switch(powerup.type) { | |
| case 1: // Energy | |
| energy = Math.min(100, energy + 25); | |
| break; | |
| case 2: // Weapon | |
| selectedWeapon = (selectedWeapon % 4) + 1; | |
| updateWeaponSelection(); | |
| break; | |
| case 3: // Shield | |
| energy = Math.min(100, energy + 10); | |
| break; | |
| } | |
| energyBar.style.width = `${energy}%`; | |
| energyValue.textContent = `${Math.floor(energy)}%`; | |
| if (powerup.element.parentNode) { | |
| powerup.element.parentNode.removeChild(powerup.element); | |
| } | |
| powerups.splice(i, 1); | |
| } | |
| } | |
| // Player-zone element collisions | |
| switch(currentZone) { | |
| case 'asteroid': | |
| asteroids.forEach(asteroid => { | |
| const dx = playerShip.x - asteroid.x; | |
| const dy = playerShip.y - asteroid.y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < asteroid.size/2 + 15) { | |
| // Collision with asteroid | |
| createExplosion(playerShip.x, playerShip.y); | |
| energy -= 10; | |
| energyBar.style.width = `${energy}%`; | |
| energyValue.textContent = `${Math.floor(energy)}%`; | |
| // Push player away | |
| const angle = Math.atan2(dy, dx); | |
| playerShip.x += Math.cos(angle) * 15; | |
| playerShip.y += Math.sin(angle) * 15; | |
| } | |
| }); | |
| break; | |
| } | |
| } | |
| // Update weapon selection UI | |
| function updateWeaponSelection() { | |
| document.querySelectorAll('.weapon-icon').forEach(icon => { | |
| icon.classList.remove('active'); | |
| }); | |
| document.querySelector(`.weapon-icon[data-weapon="${selectedWeapon}"]`).classList.add('active'); | |
| } | |
| // Update ship selection UI | |
| function updateShipSelection() { | |
| document.querySelectorAll('.ship-icon').forEach(icon => { | |
| icon.classList.remove('ship-selected'); | |
| }); | |
| document.querySelector(`.ship-icon[data-ship="${selectedShip}"]`).classList.add('ship-selected'); | |
| } | |
| // Game loop | |
| function gameLoop(timestamp) { | |
| // Calculate FPS | |
| frameCount++; | |
| if (timestamp >= lastFpsUpdate + 1000) { | |
| fps = frameCount; | |
| frameCount = 0; | |
| lastFpsUpdate = timestamp; | |
| fpsElement.textContent = fps; | |
| } | |
| // Delta time for smooth movement | |
| const deltaTime = timestamp - lastTime; | |
| lastTime = timestamp; | |
| // Zone management | |
| zoneTimer += deltaTime; | |
| if (zoneTimer > 15000) { // Change zone every 15 seconds | |
| const zones = ['normal', 'asteroid', 'nebula', 'ice']; | |
| const newZone = zones[Math.floor(Math.random() * zones.length)]; | |
| if (newZone !== currentZone) { | |
| currentZone = newZone; | |
| updateZoneDisplay(); | |
| createZoneElements(); | |
| } | |
| zoneTimer = 0; | |
| } | |
| // Handle input | |
| if (keys['ArrowLeft'] || keys['a'] || keys['A']) { | |
| playerShip.rotationSpeed = -4 * playerShip.handling; | |
| } else if (keys['ArrowRight'] || keys['d'] || keys['D']) { | |
| playerShip.rotationSpeed = 4 * playerShip.handling; | |
| } else { | |
| playerShip.rotationSpeed = 0; | |
| } | |
| if (keys['ArrowUp'] || keys['w'] || keys['W']) { | |
| playerShip.thrust = 0.2; | |
| playerShip.speed = Math.min(playerShip.maxSpeed, playerShip.speed + playerShip.thrust); | |
| } else { | |
| playerShip.thrust = 0; | |
| } | |
| if (keys[' '] && timestamp - playerShip.lastShot > 150) { | |
| // Shoot bullet | |
| createBullet( | |
| playerShip.x + Math.cos(playerShip.angle * Math.PI/180) * 20, | |
| playerShip.y + Math.sin(playerShip.angle * Math.PI/180) * 20, | |
| playerShip.angle | |
| ); | |
| playerShip.lastShot = timestamp; | |
| } | |
| if ((keys['ArrowDown'] || keys['s'] || keys['S']) && timestamp - playerShip.lastBomb > 1000) { | |
| // Drop bomb (simplified as area attack) | |
| ships.forEach(ship => { | |
| const dx = playerShip.x - ship.x; | |
| const dy = playerShip.y - ship.y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 150) { | |
| ship.health -= 30; | |
| createExplosion(ship.x, ship.y); | |
| if (ship.health <= 0) { | |
| if (ship.element.parentNode) { | |
| ship.element.parentNode.removeChild(ship.element); | |
| } | |
| ships.splice(ships.indexOf(ship), 1); | |
| score += 100; | |
| scoreElement.textContent = score; | |
| } | |
| } | |
| }); | |
| playerShip.lastBomb = timestamp; | |
| } | |
| // Update player ship | |
| playerShip.angle += playerShip.rotationSpeed; | |
| // Apply zone effects | |
| let speedModifier = 1; | |
| let frictionModifier = playerShip.friction; | |
| switch(currentZone) { | |
| case 'ice': | |
| speedModifier = 1.2; | |
| frictionModifier = 0.98; | |
| break; | |
| case 'nebula': | |
| speedModifier = 0.8; | |
| break; | |
| } | |
| playerShip.x += Math.cos(playerShip.angle * Math.PI/180) * playerShip.speed * speedModifier; | |
| playerShip.y += Math.sin(playerShip.angle * Math.PI/180) * playerShip.speed * speedModifier; | |
| // Apply friction | |
| playerShip.speed *= frictionModifier; | |
| // Boundary checks | |
| if (playerShip.x < 0) playerShip.x = gameContainer.offsetWidth; | |
| if (playerShip.x > gameContainer.offsetWidth) playerShip.x = 0; | |
| if (playerShip.y < 0) playerShip.y = gameContainer.offsetHeight; | |
| if (playerShip.y > gameContainer.offsetHeight) playerShip.y = 0; | |
| updateShipPosition(); | |
| // Update enemy ships | |
| ships.forEach(ship => { | |
| // Simple AI - move towards player | |
| const dx = playerShip.x - ship.x; | |
| const dy = playerShip.y - ship.y; | |
| const angle = Math.atan2(dy, dx); | |
| ship.angle = angle * 180/Math.PI; | |
| ship.x += Math.cos(angle) * ship.speed; | |
| ship.y += Math.sin(angle) * ship.speed; | |
| // Boundary checks | |
| if (ship.x < 0) ship.x = gameContainer.offsetWidth; | |
| if (ship.x > gameContainer.offsetWidth) ship.x = 0; | |
| if (ship.y < 0) ship.y = gameContainer.offsetHeight; | |
| if (ship.y > gameContainer.offsetHeight) ship.y = 0; | |
| updateEnemyPosition(ship); | |
| // Enemy shooting | |
| if (timestamp - ship.lastShot > 1000 + Math.random() * 2000) { | |
| createBullet( | |
| ship.x + Math.cos(ship.angle * Math.PI/180) * 20, | |
| ship.y + Math.sin(ship.angle * Math.PI/180) * 20, | |
| ship.angle, | |
| false | |
| ); | |
| ship.lastShot = timestamp; | |
| } | |
| }); | |
| // Update bullets | |
| for (let i = bullets.length - 1; i >= 0; i--) { | |
| const bullet = bullets[i]; | |
| bullet.x += Math.cos(bullet.angle * Math.PI/180) * bullet.speed; | |
| bullet.y += Math.sin(bullet.angle * Math.PI/180) * bullet.speed; | |
| bullet.life--; | |
| // Boundary checks | |
| if (bullet.x < 0 || bullet.x > gameContainer.offsetWidth || | |
| bullet.y < 0 || bullet.y > gameContainer.offsetHeight || | |
| bullet.life <= 0) { | |
| if (bullet.element.parentNode) { | |
| bullet.element.parentNode.removeChild(bullet.element); | |
| } | |
| bullets.splice(i, 1); | |
| continue; | |
| } | |
| updateBulletPosition(bullet); | |
| } | |
| // Update energy | |
| energy = Math.min(100, energy + 0.05); | |
| energyBar.style.width = `${energy}%`; | |
| energyValue.textContent = `${Math.floor(energy)}%`; | |
| // Check collisions | |
| checkCollisions(); | |
| // Update radar | |
| updateRadar(); | |
| // Spawn enemies | |
| if (ships.length < 8 && Math.random() < 0.03) { | |
| createEnemyShip(); | |
| } | |
| // Spawn powerups | |
| if (powerups.length < 3 && Math.random() < 0.007) { | |
| createPowerup(); | |
| } | |
| requestAnimationFrame(gameLoop); | |
| } | |
| // Event listeners | |
| window.addEventListener('keydown', (e) => { | |
| keys[e.key] = true; | |
| }); | |
| window.addEventListener('keyup', (e) => { | |
| keys[e.key] = false; | |
| }); | |
| // Weapon selection | |
| document.querySelectorAll('.weapon-icon').forEach(icon => { | |
| icon.addEventListener('click', () => { | |
| selectedWeapon = parseInt(icon.dataset.weapon); | |
| updateWeaponSelection(); | |
| }); | |
| }); | |
| // Ship selection | |
| document.querySelectorAll('.ship-icon').forEach(icon => { | |
| icon.addEventListener('click', () => { | |
| selectedShip = parseInt(icon.dataset.ship); | |
| updateShipSelection(); | |
| // Change ship appearance | |
| switch(selectedShip) { | |
| case 1: | |
| playerShip.element.innerHTML = '<i class="fas fa-fighter-jet text-2xl"></i>'; | |
| playerShip.element.style.color = '#ff4d4d'; | |
| break; | |
| case 2: | |
| playerShip.element.innerHTML = '<i class="fas fa-space-shuttle text-2xl"></i>'; | |
| playerShip.element.style.color = '#4dff4d'; | |
| break; | |
| case 3: | |
| playerShip.element.innerHTML = '<i class="fas fa-rocket text-2xl"></i>'; | |
| playerShip.element.style.color = '#4d4dff'; | |
| break; | |
| case 4: | |
| playerShip.element.innerHTML = '<i class="fas fa-shield-alt text-2xl"></i>'; | |
| playerShip.element.style.color = '#ffff4d'; | |
| break; | |
| case 5: | |
| playerShip.element.innerHTML = '<i class="fas fa-star text-2xl"></i>'; | |
| playerShip.element.style.color = '#bd4dff'; | |
| break; | |
| case 6: | |
| playerShip.element.innerHTML = '<i class="fas fa-bolt text-2xl"></i>'; | |
| playerShip.element.style.color = '#ff9d4d'; | |
| break; | |
| case 7: | |
| playerShip.element.innerHTML = '<i class="fas fa-wind text-2xl"></i>'; | |
| playerShip.element.style.color = '#4dffff'; | |
| break; | |
| case 8: | |
| playerShip.element.innerHTML = '<i class="fas fa-moon text-2xl"></i>'; | |
| playerShip.element.style.color = '#ff4dd2'; | |
| break; | |
| case 9: | |
| playerShip.element.innerHTML = '<i class="fas fa-ghost text-2xl"></i>'; | |
| playerShip.element.style.color = '#a0a0a0'; | |
| break; | |
| case 10: | |
| playerShip.element.innerHTML = '<i class="fas fa-dragon text-2xl"></i>'; | |
| playerShip.element.style.color = '#00ff00'; | |
| break; | |
| case 11: | |
| playerShip.element.innerHTML = '<i class="fas fa-snowflake text-2xl"></i>'; | |
| playerShip.element.style.color = '#87ceeb'; | |
| break; | |
| case 12: | |
| playerShip.element.innerHTML = '<i class="fas fa-sun text-2xl"></i>'; | |
| playerShip.element.style.color = '#ffff00'; | |
| break; | |
| case 13: | |
| playerShip.element.innerHTML = '<i class="fas fa-crown text-2xl"></i>'; | |
| playerShip.element.style.color = '#ff00ff'; | |
| break; | |
| case 14: | |
| playerShip.element.innerHTML = '<i class="fas fa-skull text-2xl"></i>'; | |
| playerShip.element.style.color = '#404040'; | |
| break; | |
| case 15: | |
| playerShip.element.innerHTML = '<i class="fas fa-hat-wizard text-2xl"></i>'; | |
| playerShip.element.style.color = '#8000ff'; | |
| break; | |
| case 16: | |
| playerShip.element.innerHTML = '<i class="fas fa-heart text-2xl"></i>'; | |
| playerShip.element.style.color = '#ff69b4'; | |
| break; | |
| } | |
| }); | |
| }); | |
| // Initialize game | |
| window.addEventListener('load', () => { | |
| createStars(); | |
| createShipMenu(); | |
| showShipMenu(); | |
| updateWeaponSelection(); | |
| updateShipSelection(); | |
| // Create initial enemies | |
| for (let i = 0; i < 3; i++) { | |
| createEnemyShip(); | |
| } | |
| // Start game loop | |
| requestAnimationFrame(gameLoop); | |
| }); | |
| </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=defaultdolphin/subspace-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |