Untitled
unknown
plain_text
8 days ago
3.3 kB
1
Indexable
<!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...
Leave a Comment