Untitled
unknown
plain_text
6 months ago
2.5 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EcoGuardians Game</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="game"> <h1>EcoGuardians</h1> <p>Eco-Points: <span id="eco-points">100</span></p> <div id="grid"> <!-- Grid cells will be created by JavaScript --> </div> <button onclick="resetGame()">Reset Game</button> </div> <script src="script.js"></script> </body> </html> /* style.css */ body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #e0f7fa; } #game { text-align: center; background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } #grid { display: grid; grid-template-columns: repeat(5, 60px); grid-template-rows: repeat(5, 60px); gap: 5px; margin-top: 20px; } .cell { width: 60px; height: 60px; background-color: #b2dfdb; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; } .cell.tree // script.js let ecoPoints = 100; const grid = document.getElementById("grid"); const ecoPointsDisplay = document.getElementById("eco-points"); const cellCost = 10; const ecoPointGain = 2; const gridSize = 5; // Initialize the game grid function createGrid() { grid.innerHTML = ""; // Clear any existing cells for (let i = 0; i < gridSize * gridSize; i++) { const cell = document.createElement("div"); cell.classList.add("cell"); cell.addEventListener("click", () => plantTree(cell)); grid.appendChild(cell); } } // Plant a tree if the player has enough eco-points function plantTree(cell) { if (ecoPoints >= cellCost && !cell.classList.contains("tree")) { ecoPoints -= cellCost; cell.classList.add("tree"); ecoPointsDisplay.textContent = ecoPoints; increaseEcoPoints(); } } // Periodically add eco-points for each planted tree function increaseEcoPoints() { setInterval(() => { const trees = document.querySelectorAll(".tree").length; ecoPoints += trees * ecoPointGain; ecoPointsDisplay.textContent = ecoPoints; }, 5000); // Every 5 seconds } // Reset the game function resetGame() { ecoPoints = 100; ecoPointsDisplay.textContent = ecoPoints; createGrid(); } // Start the game createGrid(); increaseEcoPoints();
Editor is loading...
Leave a Comment