Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Mini Garden Game</title>
  <style>
    body {
      font-family: Arial;
      text-align: center;
      background: #87CEEB;
    }
    h1 {
      color: green;
    }
    #garden {
      margin: 20px auto;
      display: grid;
      grid-template-columns: repeat(3, 100px);
      gap: 10px;
      width: 320px;
    }
    .plot {
      width: 100px;
      height: 100px;
      background: brown;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
    }
    button {
      padding: 10px;
      margin: 10px;
      font-size: 16px;
    }
  </style>
</head>
<body>

<h1>🌱 Mini Grow Garden</h1>
<p>Money: $<span id="money">10</span></p>
<button onclick="buySeed()">Buy Seed ($5)</button>

<div id="garden"></div>

<script>
let money = 10;
let seedCost = 5;

const garden = document.getElementById("garden");

// Create 9 plots
for (let i = 0; i < 9; i++) {
  const plot = document.createElement("div");
  plot.classList.add("plot");
  plot.dataset.state = "empty";
  plot.onclick = () => plantSeed(plot);
  garden.appendChild(plot);
}

function updateMoney() {
  document.getElementById("money").innerText = money;
}

function buySeed() {
  if (money >= seedCost) {
    money -= seedCost;
    alert("You bought a seed! Click a plot to plant.");
  } else {
    alert("Not enough money!");
  }
  updateMoney();
}

function plantSeed(plot) {
  if (plot.dataset.state === "empty" && money >= 0) {
    plot.innerHTML = "🌱";
    plot.dataset.state = "growing";

    setTimeout(() => {
      plot.innerHTML = "🥕";
      plot.dataset.state = "ready";
    }, 3000);
  } else if (plot.dataset.state === "ready") {
    plot.innerHTML = "";
    plot.dataset.state = "empty";
    money += 10;
    updateMoney();
  }
}
</script>

</body>
</html>
Editor is loading...