Cosmos Pro | Interactive Space Explorer
by LunarGalaxy87125 lines5.9 KB
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cosmos Pro | Interactive Space Explorer</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;600&display=swap');
body { margin: 0; overflow: hidden; background: #000; color: #fff; font-family: 'Outfit', sans-serif; }
canvas { display: block; touch-action: none; }
.hud { position: absolute; top: 20px; left: 20px; z-index: 20; pointer-events: none; }
.glass { background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(20px); border-radius: 20px; pointer-events: auto; }
.active-btn { background: #3b82f6 !important; }
</style>
</head>
<body>
<div class="hud">
<div class="glass p-6 w-80">
<h1 class="text-2xl font-bold mb-4 tracking-tighter text-blue-400">COSMOS PRO</h1>
<div class="flex gap-2 mb-6">
<button id="btn-solar" onclick="setView('solar')" class="flex-1 bg-white/5 hover:bg-white/10 p-2 rounded-lg text-xs transition active-btn">SOLAR SYSTEM</button>
<button id="btn-galactic" onclick="setView('galactic')" class="flex-1 bg-white/5 hover:bg-white/10 p-2 rounded-lg text-xs transition">DEEP SPACE</button>
</div>
<div id="info-panel" class="hidden transition-all duration-500">
<h2 id="obj-name" class="text-xl font-semibold"></h2>
<p id="obj-desc" class="text-xs text-gray-400 mt-2 leading-relaxed"></p>
</div>
</div>
</div>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let view = 'solar';
const solarSystem = [
{ name: "Mercury", d: 60, s: 0.04, r: 3, c: "#A5A5A5", desc: "Closest to the Sun. Scorching days and freezing nights." },
{ name: "Venus", d: 90, s: 0.03, r: 5, c: "#E3BB76", desc: "The hottest planet, shrouded in thick, toxic clouds." },
{ name: "Earth", d: 120, s: 0.025, r: 5.5, c: "#2F80ED", desc: "The cradle of life. Water, atmosphere, and vibrant ecosystems." },
{ name: "Mars", d: 155, s: 0.02, r: 4, c: "#E27B58", desc: "The rust-red desert. Home to the tallest mountain in the system." },
{ name: "Jupiter", d: 210, s: 0.012, r: 12, c: "#D97706", desc: "The Gas Giant. A massive world of storms and dozens of moons." },
{ name: "Saturn", d: 270, s: 0.009, r: 10, c: "#E5C07B", desc: "The Ringed Planet. A mesmerizing beauty of ice and rock." },
{ name: "Uranus", d: 320, s: 0.006, r: 7, c: "#A7F3D0", desc: "An ice giant that spins on its side in the cold deep." },
{ name: "Neptune", d: 370, s: 0.004, r: 7, c: "#60A5FA", desc: "The windiest world, dark and frigid at the edge of the system." }
];
const deepSpace = [
{ name: "Milky Way", c: "#8b5cf6", desc: "Our spiral home. Center hosts the supermassive black hole Sagittarius A*." },
{ name: "Andromeda", c: "#3b82f6", desc: "The massive spiral neighbor, moving on a collision course with us." },
{ name: "Cygnus X-1", c: "#ef4444", desc: "A violent black hole devouring a massive star. Pure cosmic gravity." },
{ name: "Sombrero Galaxy", c: "#f59e0b", desc: "A stunning galaxy with a massive, brilliant halo." }
];
function setView(v) {
view = v;
document.getElementById('btn-solar').classList.toggle('active-btn', v === 'solar');
document.getElementById('btn-galactic').classList.toggle('active-btn', v === 'galactic');
document.getElementById('info-panel').classList.add('hidden');
}
function draw() {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Stars
ctx.fillStyle = "white";
for(let i=0; i<100; i++) ctx.fillRect(Math.random()*canvas.width, Math.random()*canvas.height, 1, 1);
const cx = canvas.width/2, cy = canvas.height/2;
if (view === 'solar') {
ctx.fillStyle = "#FFD700";
ctx.shadowBlur = 40; ctx.shadowColor = "orange";
ctx.beginPath(); ctx.arc(cx, cy, 30, 0, Math.PI*2); ctx.fill();
ctx.shadowBlur = 0;
solarSystem.forEach(p => {
const angle = Date.now() * 0.001 * (p.s * 15);
p.x = cx + Math.cos(angle) * p.d;
p.y = cy + Math.sin(angle) * p.d;
ctx.strokeStyle = "rgba(255,255,255,0.05)";
ctx.beginPath(); ctx.arc(cx, cy, p.d, 0, Math.PI*2); ctx.stroke();
ctx.fillStyle = p.c;
ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2); ctx.fill();
});
} else {
deepSpace.forEach((g, i) => {
const x = (i+1) * (canvas.width/5);
g.x = x; g.y = cy;
ctx.fillStyle = g.c;
ctx.beginPath(); ctx.arc(x, cy, 50, 0, Math.PI*2); ctx.fill();
ctx.fillStyle = "#fff";
ctx.fillText(g.name, x-25, cy+70);
});
}
requestAnimationFrame(draw);
}
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const mx = e.clientX - rect.left, my = e.clientY - rect.top;
const items = view === 'solar' ? solarSystem : deepSpace;
items.forEach(it => {
if (Math.hypot(mx - (it.x||it.x_calc), my - (it.y||it.y_calc)) < 40) {
document.getElementById('obj-name').innerText = it.name;
document.getElementById('obj-desc').innerText = it.desc;
document.getElementById('info-panel').classList.remove('hidden');
}
});
});
window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; });
window.dispatchEvent(new Event('resize'));
draw();
</script>
</body>
</html>
```
Game Source: Cosmos Pro | Interactive Space Explorer
Creator: LunarGalaxy87
Libraries: none
Complexity: moderate (125 lines, 5.9 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: cosmos-pro-interactive-space-explorer-lunargalaxy87" to link back to the original. Then publish at arcadelab.ai/publish.