Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Evolution Odyssey - Evolution Game</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .game-container { | |
| background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); | |
| } | |
| .creature { | |
| transition: all 0.3s ease; | |
| } | |
| .evolution-stage { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-800 p-4"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <a href="index.html" class="text-xl font-bold text-blue-400 hover:text-blue-300 transition-colors"> | |
| <i data-feather="home" class="inline mr-2"></i> | |
| Evolution Odyssey | |
| </a> | |
| <div class="space-x-4"> | |
| <a href="index.html" class="hover:text-blue-300 transition-colors">Home</a> | |
| <a href="evolution.html" class="text-blue-400 font-semibold">Evolution Game</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Game Header --> | |
| <div class="game-container min-h-screen py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold mb-4">Evolution Odyssey 🧬</h1> | |
| <p class="text-xl text-blue-200 mb-6">Guide your creature through millions of years of evolution!</p> | |
| <!-- Game Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8 max-w-4xl mx-auto"> | |
| <div class="evolution-stage rounded-lg p-4"> | |
| <div class="text-2xl font-bold text-green-400" id="generation">Generation: 1</div> | |
| <div class="text-sm text-gray-300">Evolution Progress</div> | |
| </div> | |
| <div class="evolution-stage rounded-lg p-4"> | |
| <div class="text-2xl font-bold text-yellow-400" id="dnaPoints">DNA: 100</div> | |
| <div class="text-sm text-gray-300">Available Points</div> | |
| </div> | |
| <div class="evolution-stage rounded-lg p-4"> | |
| <div class="text-2xl font-bold text-red-400" id="environment">Environment: Primordial</div> | |
| <div class="text-sm text-gray-300">Current Habitat</div> | |
| </div> | |
| <div class="evolution-stage rounded-lg p-4"> | |
| <div class="text-2xl font-bold text-purple-400" id="survivalRate">Survival: 85%</div> | |
| <div class="text-sm text-gray-300">Success Chance</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Area --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Creature Display --> | |
| <div class="lg:col-span-2"> | |
| <div class="evolution-stage rounded-xl p-6 mb-6"> | |
| <h2 class="text-2xl font-bold mb-4 text-center">Your Creature</h2> | |
| <div class="flex justify-center items-center h-64"> | |
| <div class="creature bg-gradient-to-br from-green-400 to-blue-500 w-32 h-32 rounded-full flex items-center justify-center text-white font-bold text-lg shadow-2xl transform hover:scale-110 transition-transform cursor-pointer" id="currentCreature"> | |
| 🦠 | |
| </div> | |
| </div> | |
| <div class="text-center mt-4"> | |
| <div class="text-xl font-semibold" id="creatureName">Primordial Cell</div> | |
| <div class="text-gray-300" id="creatureTraits">Basic metabolism, Simple movement</div> | |
| </div> | |
| </div> | |
| <!-- Evolution Actions --> | |
| <div class="evolution-stage rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold mb-4">Evolution Options</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <button class="bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg transition-colors flex items-center justify-center space-x-2" onclick="evolve('speed')"> | |
| <i data-feather="zap" class="w-5 h-5"></i> | |
| <span>Evolve Speed (25 DNA)</span> | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg transition-colors flex items-center justify-center space-x-2" onclick="evolve('intelligence')"> | |
| <i data-feather="brain" class="w-5 h-5"></i> | |
| <span>Evolve Intelligence (30 DNA)</span> | |
| </button> | |
| <button class="bg-red-600 hover:bg-red-700 text-white py-3 px-4 rounded-lg transition-colors flex items-center justify-center space-x-2" onclick="evolve('defense')"> | |
| <i data-feather="shield" class="w-5 h-5"></i> | |
| <span>Evolve Defense (20 DNA)</span> | |
| </button> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white py-3 px-4 rounded-lg transition-colors flex items-center justify-center space-x-2" onclick="evolve('senses')"> | |
| <i data-feather="eye" class="w-5 h-5"></i> | |
| <span>Evolve Senses (35 DNA)</span> | |
| </button> | |
| </div> | |
| <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white py-3 px-4 rounded-lg transition-colors mt-4 flex items-center justify-center space-x-2" onclick="advanceGeneration()"> | |
| <i data-feather="skip-forward" class="w-5 h-5"></i> | |
| <span>Advance to Next Generation</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Evolution Tree --> | |
| <div class="evolution-stage rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold mb-4">Evolution Tree</h2> | |
| <div class="space-y-3" id="evolutionTree"> | |
| <div class="flex items-center space-x-3 p-2 bg-green-900 rounded"> | |
| <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">🦠</div> | |
| <div> | |
| <div class="font-semibold">Primordial Cell</div> | |
| <div class="text-xs text-gray-300">Generation 1</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Achievements --> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-bold mb-3">Achievements</h3> | |
| <div class="space-y-2" id="achievements"> | |
| <div class="flex items-center space-x-2 text-gray-400"> | |
| <i data-feather="award" class="w-4 h-4"></i> | |
| <span>First Evolution</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Log --> | |
| <div class="evolution-stage rounded-xl p-6 mt-8 max-w-6xl mx-auto"> | |
| <h2 class="text-2xl font-bold mb-4">Evolution Log</h2> | |
| <div class="h-40 overflow-y-auto space-y-2" id="gameLog"> | |
| <div class="text-green-400">🌊 Welcome to the primordial soup! Your evolution journey begins...</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let gameState = { | |
| generation: 1, | |
| dnaPoints: 100, | |
| environment: 'Primordial', | |
| creature: { | |
| name: 'Primordial Cell', | |
| traits: ['Basic metabolism', 'Simple movement'], | |
| emoji: '🦠', | |
| speed: 1, | |
| intelligence: 1, | |
| defense: 1, | |
| senses: 1 | |
| }, | |
| evolutionHistory: [ | |
| { generation: 1, name: 'Primordial Cell', emoji: '🦠' } | |
| ], | |
| achievements: [] | |
| }; | |
| function evolve(trait) { | |
| const costs = { | |
| speed: 25, | |
| intelligence: 30, | |
| defense: 20, | |
| senses: 35 | |
| }; | |
| if (gameState.dnaPoints >= costs[trait]) { | |
| gameState.dnaPoints -= costs[trait]; | |
| gameState.creature[trait] += 1; | |
| updateGameDisplay(); | |
| addToLog(`🧬 Evolved ${trait}! Your creature is getting stronger...`); | |
| } else { | |
| addToLog('❌ Not enough DNA points for this evolution!'); | |
| } | |
| } | |
| function advanceGeneration() { | |
| gameState.generation++; | |
| gameState.dnaPoints += Math.floor(50 + Math.random() * 50); | |
| // Environment changes | |
| const environments = ['Primordial', 'Aquatic', 'Terrestrial', 'Aerial', 'Cosmic']; | |
| gameState.environment = environments[Math.min(gameState.generation - 1, environments.length - 1)]; | |
| // Creature evolution based on traits | |
| if (gameState.generation === 2) { | |
| gameState.creature.name = 'Multi-cellular Organism'; | |
| gameState.creature.emoji = '🐛'; | |
| gameState.evolutionHistory.push({ generation: 2, name: 'Multi-cellular Organism', emoji: '🐛' }); | |
| } else if (gameState.generation === 3 && gameState.creature.speed >= 2) { | |
| gameState.creature.name = 'Swift Predator'; | |
| gameState.creature.emoji = '🐆'; | |
| gameState.evolutionHistory.push({ generation: 3, name: 'Swift Predator', emoji: '🐆' }); | |
| } else if (gameState.generation === 4 && gameState.creature.intelligence >= 3) { | |
| gameState.creature.name = 'Intelligent Being'; | |
| gameState.creature.emoji = '🧠'; | |
| gameState.evolutionHistory.push({ generation: 4, name: 'Intelligent Being', emoji: '🧠' }); | |
| } | |
| updateGameDisplay(); | |
| addToLog(`⏩ Advanced to Generation ${gameState.generation}! New environment: ${gameState.environment}`); | |
| } | |
| function updateGameDisplay() { | |
| document.getElementById('generation').textContent = `Generation: ${gameState.generation}`; | |
| document.getElementById('dnaPoints').textContent = `DNA: ${gameState.dnaPoints}`; | |
| document.getElementById('environment').textContent = `Environment: ${gameState.environment}`; | |
| const survivalRate = Math.min(85 + (gameState.creature.defense * 5), 98); | |
| document.getElementById('survivalRate').textContent = `Survival: ${survivalRate}%`; | |
| document.getElementById('currentCreature').textContent = gameState.creature.emoji; | |
| document.getElementById('creatureName').textContent = gameState.creature.name; | |
| document.getElementById('creatureTraits').textContent = gameState.creature.traits.join(', '); | |
| // Update evolution tree | |
| const treeContainer = document.getElementById('evolutionTree'); | |
| treeContainer.innerHTML = gameState.evolutionHistory.map(evo => ` | |
| <div class="flex items-center space-x-3 p-2 bg-green-900 rounded"> | |
| <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">${evo.emoji}</div> | |
| <div> | |
| <div class="font-semibold">${evo.name}</div> | |
| <div class="text-xs text-gray-300">Generation ${evo.generation}</div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| function addToLog(message) { | |
| const log = document.getElementById('gameLog'); | |
| const entry = document.createElement('div'); | |
| entry.className = 'text-green-400'; | |
| entry.textContent = message; | |
| log.appendChild(entry); | |
| log.scrollTop = log.scrollHeight; | |
| } | |
| // Initialize game | |
| document.addEventListener('DOMContentLoaded', function() { | |
| updateGameDisplay(); | |
| addToLog('🌊 Welcome to the primordial soup! Your evolution journey begins...'); | |
| feather.replace(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |