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>
Editor is loading...