<!DOCTYPE html>
<html>
<head>
<title>扫雷游戏</title>
<style>
.cell {
width: 20px;
height: 20px;
border: 1px solid #ccc;
display: inline-block;
text-align: center;
vertical-align: middle;
background-color: #eee;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<h1>扫雷游戏</h1>
<div id="board"></div>
<script>
// 游戏参数
var rows = 10; // 行数
var cols = 10; // 列数
var mineCount = 10; // 地雷数量
// 游戏状态
var board = []; // 游戏面板的数据结构
var gameOver = false; // 游戏结束标志
// 创建游戏面板
function createBoard() {
var boardElement = document.getElementById('board');
for (var i = 0; i < rows; i++) {
var row = [];
for (var j = 0; j < cols; j++) {
var cell = document.createElement('div'); // 创建方块元素
cell.className = 'cell'; // 添加 CSS 类名
cell.setAttribute('data-row', i); // 设置自定义属性 data-row，表示行号
cell.setAttribute('data-col', j); // 设置自定义属性 data-col，表示列号
cell.addEventListener('click', cellClick); // 添加点击事件监听器
boardElement.appendChild(cell); // 将方块元素添加到游戏面板
row.push({
element: cell,
hasMine: false, // 是否包含地雷
revealed: false // 是否已经揭示
});
}
board.push(row);
boardElement.appendChild(document.createElement('br')); // 每行结束添加换行符
}
}
// 初始化地雷
function initMines() {
var count = 0;
while (count < mineCount) {
var row = Math.floor(Math.random() * rows); // 随机生成行号
var col = Math.floor(Math.random() * cols); // 随机生成列号
if (!board[row][col].hasMine) {
board[row][col].hasMine = true; // 标记该方块包含地雷
count++;
}
}
}
// 点击方块
function cellClick(event) {
if (gameOver) {
return;
}
var cell = event.target; // 获取被点击的方块元素
var row = parseInt(cell.getAttribute('data-row')); // 获取方块的行号
var col = parseInt(cell.getAttribute('data-col')); // 获取方块的列号
if (board[row][col].hasMine) {
gameOver = true; // 游戏结束
cell.style.backgroundColor = 'red'; // 设置被点击的地雷方块的背景颜色为红色
alert('Game Over');
} else {
revealCell(row, col); // 揭示方块
}
}
// 揭示方块
function revealCell(row, col) {
var cell = board[row][col].element; // 获取方块元素
if (board[row][col].revealed) {
return; // 如果方块已经揭示，则不执行任何操作
}
board[row][col].revealed = true; // 标记方块已经揭示
cell.style.backgroundColor = '#ddd'; // 设置方块的背景颜色
var mineCount = countAdjacentMines(row, col); // 计算方块周围的地雷数量
if (mineCount > 0) {
cell.innerText = mineCount; // 如果周围有地雷，则在方块中显示地雷数量
} else {
revealAdjacentCells(row, col); // 如果周围没有地雷，则揭示相邻的方块
}
}
// 计算相邻方块的地雷数量
function countAdjacentMines(row, col) {
var count = 0;
for (var i = Math.max(0, row - 1); i <= Math.min(rows -1, row + 1); i++) {
for (var j = Math.max(0, col - 1); j <= Math.min(cols - 1, col + 1); j++) {
if (board[i][j].hasMine) {
count++; // 如果相邻方块包含地雷，则数量加一
}
}
}
return count; // 返回相邻方块的地雷数量
}
// 揭示相邻的方块
function revealAdjacentCells(row, col) {
for (var i = Math.max(0, row - 1); i <= Math.min(rows - 1, row + 1); i++) {
for (var j = Math.max(0, col - 1); j <= Math.min(cols - 1, col + 1); j++) {
if (!board[i][j].hasMine && !board[i][j].revealed) {
revealCell(i, j); // 如果相邻方块不包含地雷且未揭示，则揭示方块
}
}
}
}
// 初始化游戏
function initGame() {
createBoard(); // 创建游戏面板
initMines(); // 初始化地雷
}
// 开始游戏
initGame();
</script>
</body>
</html>
