Untitled
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hardcore Tree Growing Game</title> <style> body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; padding: 20px; } .game { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: inline-block; } .tree { font-size: 50px; margin: 20px 0; } .status { font-size: 18px; margin: 10px 0; } button { padding: 10px 20px; font-size: 16px; margin: 5px; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 5px; } button:hover { background-color: #218838; } .message { margin-top: 20px; font-size: 18px; font-weight: bold; } </style> </head> <body> <div class="game"> <h1>Hardcore Tree Growing Game</h1> <div class="tree" id="tree">🌱</div> <div class="status"> <p>Health: <span id="health">100</span>%</p> <p>Growth: <span id="growth">0</span>%</p> <p>Water: <span id="water">100</span>%</p> <p>Nutrients: <span id="nutrients">100</span>%</p> </div> <button onclick="waterTree()">💧 Water</button> <button onclick="giveSunlight()">☀️ Sunlight</button> <button onclick="addNutrients()">🌱 Nutrients</button> <div class="message" id="message"></div> </div> <script> let health = 100; let growth = 0; let water = 100; let nutrients = 100; const treeElement = document.getElementById('tree'); const healthElement = document.getElementById('health'); const growthElement = document.getElementById('growth'); const waterElement = document.getElementById('water'); const nutrientsElement = document.getElementById('nutrients'); const messageElement = document.getElementById('message'); function updateStatus() { healthElement.textContent = health; growthElement.textContent = growth; waterElement.textContent = water; nutrientsElement.textContent = nutrients; if (health <= 0) { messageElement.textContent = 'Your tree has withered away. Game over!'; messageElement.style.color = 'red'; treeElement.textContent = '🪦'; return; } if (growth >= 100) { messageElement.textContent = 'Congratulations! Your tree has fully grown!'; messageElement.style.color = 'green'; treeElement.textContent = '🌳'; return; } } function waterTree() { if (health <= 0 || growth >= 100) return; water += 20; if (water > 100) water = 100; updateStatus(); } function giveSunlight() { if (health <= 0 || growth >= 100) return; growth += 5; if (growth > 100) growth = 100; water -= 10; if (water < 0) water = 0; updateStatus(); } function addNutrients() { if (health <= 0 || growth >= 100) return; nutrients += 20; if (nutrients > 100) nutrients = 100; updateStatus(); } function randomEvent() { const events = [ { name: 'storm', effect: () => { health -= 10; water -= 20; } }, { name: 'pests', effect: () => { health -= 15; nutrients -= 10; } }, { name: 'drought', effect: () => { water -= 30; } }, { name: 'fertile soil', effect: () => { nutrients += 20; } }, { name: 'rain', effect: () => { water += 20; } } ]; const event = events[Math.floor(Math.random() * events.length)]; event.effect(); messageElement.textContent = `Event: ${event.name}`; setTimeout(() => { messageElement.textContent = ''; }, 2000); updateStatus(); } setInterval(() => { if (health > 0 && growth < 100) { health -= 1; water -= 2; nutrients -= 1; if (health < 0) health = 0; if (water < 0) water = 0; if (nutrients < 0) nutrients = 0; updateStatus(); } }, 1000); setInterval(randomEvent, 5000); </script> </body> </html>
Leave a Comment