Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Minesweeper</title>
  <style>
    body {
      background: #111;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      color: white;
      font-family: sans-serif;
    }
    #board {
      display: grid;
      grid-template-columns: repeat(10, 40px);
      grid-template-rows: repeat(10, 40px);
      gap: 2px;
    }
    .cell {
      width: 40px;
      height: 40px;
      background: #444;
      display: flex;
      justify-content: center;
      align-items: center;
      border: none;
      color: white;
      font-weight: bold;
      cursor: pointer;
    }
    .cell.revealed {
      background: #222;
      cursor: default;
    }
    .cell.mine {
      background: red;
    }
  </style>
</head>
<body>
  <div id="board"></div>
  <script>
    const boardSize = 10;
    const mineCount = 15;
    const board = document.getElementById("board");
    const cells = [];

    function createBoard() {
      const minePositions = new Set();
      while (minePositions.size < mineCount) {
        minePositions.add(Math.floor(Math.random() * boardSize * boardSize));
      }

      for (let i = 0; i < boardSize * boardSize; i++) {
        const cell = document.createElement("button");
        cell.classList.add("cell");
        cell.dataset.index = i;
        cell.dataset.mine = minePositions.has(i);
        cell.addEventListener("click", handleClick);
        board.appendChild(cell);
        cells.push(cell);
      }
    }

    function handleClick(e) {
      const cell = e.target;
      if (cell.classList.contains("revealed")) return;
      const index = parseInt(cell.dataset.index);
      const isMine = cell.dataset.mine === "true";

      if (isMine) {
        cell.classList.add("mine");
        cell.textContent = "💣";
        revealAllMines();
        setTimeout(() => alert("Game Over!"), 100);
        return;
      }

      const neighbors = getNeighbors(index);
      const mineCount = neighbors.filter(i => cells[i].dataset.mine === "true").length;
      cell.classList.add("revealed");
      cell.textContent = mineCount || "";

      if (mineCount === 0) {
        neighbors.forEach(i => handleClick({ target: cells[i] }));
      }
    }

    function revealAllMines() {
      cells.forEach(cell => {
        if (cell.dataset.mine === "true") {
          cell.classList.add("mine");
          cell.textContent = "💣";
        }
        cell.disabled = true;
      });
    }

    function getNeighbors(index) {
      const x = index % boardSize;
      const y = Math.floor(index / boardSize);
      const neighbors = [];

      for (let dx = -1; dx <= 1; dx++) {
        for (let dy = -1; dy <= 1; dy++) {
          if (dx === 0 && dy === 0) continue;
          const nx = x + dx;
          const ny = y + dy;
          if (nx >= 0 && ny >= 0 && nx < boardSize && ny < boardSize) {
            neighbors.push(ny * boardSize + nx);
          }
        }
      }
      return neighbors;
    }

    createBoard();
  </script>
</body>
</html>
Editor is loading...