html做一个扫雷游戏
时间: 2023-12-13 22:05:47 浏览: 36
好的,下面是一个简单的 HTML 扫雷游戏实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>扫雷游戏</title>
<style>
table {
border-collapse: collapse;
}
td {
width: 25px;
height: 25px;
border: 1px solid gray;
text-align: center;
vertical-align: middle;
font-size: 20px;
font-weight: bold;
}
.covered {
background-color: #999;
}
.uncovered {
background-color: #ddd;
}
.mine {
background-color: red;
}
</style>
</head>
<body>
<h1>扫雷游戏</h1>
<table id="gameBoard"></table>
<script>
const ROWS = 10;
const COLS = 10;
const MINES = 10;
let gameBoard = document.getElementById("gameBoard");
let board = [];
function createBoard() {
for (let row = 0; row < ROWS; row++) {
let tr = document.createElement("tr");
let rowArr = [];
for (let col = 0; col < COLS; col++) {
let td = document.createElement("td");
td.classList.add("covered");
td.setAttribute("data-row", row);
td.setAttribute("data-col", col);
td.addEventListener("click", handleCellClick);
tr.appendChild(td);
rowArr.push({mine: false, covered: true, flagged: false});
}
gameBoard.appendChild(tr);
board.push(rowArr);
}
}
function handleCellClick(event) {
let td = event.target;
let row = Number(td.getAttribute("data-row"));
let col = Number(td.getAttribute("data-col"));
if (board[row][col].mine) {
td.classList.remove("covered");
td.classList.add("mine");
alert("游戏结束!");
} else {
uncoverCell(row, col);
}
}
function uncoverCell(row, col) {
let td = gameBoard.querySelector(`[data-row="${row}"][data-col="${col}"]`);
if (!td || !board[row][col].covered) {
return;
}
td.classList.remove("covered");
td.classList.add("uncovered");
board[row][col].covered = false;
let mines = countMines(row, col);
if (mines > 0) {
td.innerText = mines;
} else {
uncoverCell(row - 1, col - 1);
uncoverCell(row - 1, col);
uncoverCell(row - 1, col + 1);
uncoverCell(row, col - 1);
uncoverCell(row, col + 1);
uncoverCell(row + 1, col - 1);
uncoverCell(row + 1, col);
uncoverCell(row + 1, col + 1);
}
}
function countMines(row, col) {
let count = 0;
if (row > 0 && col > 0 && board[row - 1][col - 1].mine) {
count++;
}
if (row > 0 && board[row - 1][col].mine) {
count++;
}
if (row > 0 && col < COLS - 1 && board[row - 1][col + 1].mine) {
count++;
}
if (col > 0 && board[row][col - 1].mine) {
count++;
}
if (col < COLS - 1 && board[row][col + 1].mine) {
count++;
}
if (row < ROWS - 1 && col > 0 && board[row + 1][col - 1].mine) {
count++;
}
if (row < ROWS - 1 && board[row + 1][col].mine) {
count++;
}
if (row < ROWS - 1 && col < COLS - 1 && board[row + 1][col + 1].mine) {
count++;
}
return count;
}
function plantMines() {
let minesPlanted = 0;
while (minesPlanted < MINES) {
let row = Math.floor(Math.random() * ROWS);
let col = Math.floor(Math.random() * COLS);
if (!board[row][col].mine) {
board[row][col].mine = true;
minesPlanted++;
}
}
}
createBoard();
plantMines();
</script>
</body>
</html>
```
这段代码会创建一个 10x10 的游戏面板,其中包含 10 个地雷。玩家需要点击方格,如果点击到地雷,游戏结束;否则,会显示周围的地雷数。