js完成扫雷

扫雷是一款经典的桌面游戏，玩家需要在一个网格中找出所有非雷的格子，同时避开隐藏的雷。下面是如何使用JavaScript实现一个简单的扫雷游戏的概述。

基础概念

网格（Grid）：游戏的基本布局，通常是一个二维数组。
雷（Mine）：随机分布在网格中的特殊格子。
数字格子（Number Cell）：显示周围雷的数量的格子。
空白格子（Empty Cell）：周围没有雷的格子。
标记（Flag）：玩家用来标记疑似雷的位置。

优势

提供了一个直观的用户界面来与用户交互。
可以通过调整网格大小和雷的数量来改变难度。
是一个很好的逻辑训练和压力管理的工具。

类型

经典扫雷：固定大小的网格，固定数量的雷。
自定义扫雷：允许玩家自定义网格大小和雷的数量。

应用场景

休闲娱乐。
教育目的，如逻辑思维训练。
团队建设活动。

实现步骤

初始化游戏板：创建一个二维数组来表示游戏板，并在其中随机放置雷。
渲染游戏板：使用HTML和CSS来显示游戏板。
处理用户点击：当用户点击一个格子时，根据格子的内容进行相应的操作。
检查游戏状态：每次操作后检查是否所有非雷格子都已被揭开，或者是否有雷被揭开。

示例代码

以下是一个简单的JavaScript实现扫雷游戏的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扫雷游戏</title>
<style>
  .cell { width: 20px; height: 20px; border: 1px solid #ccc; display: inline-block; margin: 2px; }
</style>
</head>
<body>
<div id="game-board"></div>
<script>
function createBoard(rows, cols, mines) {
  let board = Array.from({ length: rows }, () => Array(cols).fill(0));
  let minePositions = new Set();

  while (minePositions.size < mines) {
    let row = Math.floor(Math.random() * rows);
    let col = Math.floor(Math.random() * cols);
    minePositions.add(`${row}-${col}`);
  }

  for (let pos of minePositions) {
    let [row, col] = pos.split('-').map(Number);
    board[row][col] = -1;
    for (let i = -1; i <= 1; i++) {
      for (let j = -1; j <= 1; j++) {
        let newRow = row + i;
        let newCol = col + j;
        if (newRow >= 0 && newRow < rows && newCol >= 0 && newCol < cols && board[newRow][newCol] !== -1) {
          board[newRow][newCol]++;
        }
      }
    }
  }

  return board;
}

function renderBoard(board) {
  let gameBoard = document.getElementById('game-board');
  gameBoard.innerHTML = '';
  for (let row of board) {
    for (let cell of row) {
      let div = document.createElement('div');
      div.className = 'cell';
      div.onclick = () => revealCell(board, row.indexOf(cell), row.indexOf(cell));
      div.textContent = cell === -1 ? '' : cell;
      gameBoard.appendChild(div);
    }
  }
}

function revealCell(board, row, col) {
  let cell = board[row][col];
  if (cell === -1) {
    alert('游戏结束！');
    return;
  }
  // 这里可以添加揭开格子的逻辑
}

let board = createBoard(10, 10, 10);
renderBoard(board);
</script>
</body>
</html>