subspace-2 / index.html
defaultdolphin's picture
i need the graphic at 64 bit - Initial Deployment
789a216 verified
Raw History Blame Contribute Delete
58.3 kB
<!DOCTYPE html> <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>
<!DOCTYPE html>
<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 {