Untitled

<!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...