原生JS扫雷游戏实战开发：实现游戏的重新开始与复盘功能

# 1. 介绍
## 1.1 什么是扫雷游戏
扫雷游戏是一款经典的单人益智游戏，玩家需要根据已翻开的方块及周围方块的信息来判断雷的位置，并标记出雷的位置，最终目标是将所有非雷方块都翻开。

## 1.2 目标与意义
本文旨在通过实战开发原生JS版扫雷游戏，帮助读者巩固和拓展原生JS的应用能力，并加深对游戏开发和逻辑设计的理解和实践。

## 1.3 技术栈介绍
- HTML/CSS：用于构建游戏界面和样式布局。
- JavaScript：用于实现游戏逻辑和交互功能。
- DOM操作：用于动态生成和更新游戏界面。
- 事件监听：用于响应用户的点击和操作。
- 数据结构与算法：用于实现游戏逻辑和算法优化。

通过本文的学习，读者将能够熟悉并掌握以上技术栈的应用，提升自己的前端开发能力。接下来，我们将逐步介绍和实现扫雷游戏的各个功能模块。

# 2. 初始游戏开发

在这一章节中，我们将开始开发扫雷游戏的初始功能。首先，我们需要初始化游戏界面，然后实现雷区的生成和雷的布置，最后完善雷区的显示和逻辑。

### 2.1 初始化游戏界面

在开始开发游戏界面之前，我们需要先确定游戏界面的结构和样式。通常，扫雷游戏的界面由一个方形的网格组成，每个格子可以显示一个数字或者一个雷。

首先，在HTML文件中创建一个容器元素，用来包裹整个游戏界面。我们可以给这个容器设置一个固定的宽度和高度，以及一些样式来美化界面。

<div id="game-container"></div>

接下来，在JavaScript代码中获取到这个容器元素，并且设置其样式和宽高属性。

const gameContainer = document.getElementById("game-container");
gameContainer.style.width = "400px";
gameContainer.style.height = "400px";
gameContainer.style.border = "1px solid #ccc";

现在，我们已经完成了游戏界面的初始化工作。可以在浏览器中运行代码，查看界面的效果。

### 2.2 实现雷区生成与布置

接下来，我们需要生成雷区并布置雷。雷区可以看作是一个二维数组，每个元素表示一个格子的状态。在初始状态下，所有格子都是未点击的状态。

首先，我们定义一个常量来表示雷区的大小，这里我们假设使用 10x10 的雷区。

const gridSize = 10;

然后，我们创建一个二维数组来表示雷区，并初始化每个格子的状态为未点击。

const grid = [];
for (let i = 0; i < gridSize; i++) {
  grid.push([]);
  for (let j = 0; j < gridSize; j++) {
    grid[i].push({
      clicked: false,
      hasMine: false,
      number: 0
    });
  }
}

接下来，我们需要在雷区中随机布置指定数量的雷。假设我们需要布置 10 个雷。

const mineCount = 10;
let minePlaced = 0;

while (minePlaced < mineCount) {
  const x = Math.floor(Math.random() * gridSize);
  const y = Math.floor(Math.random() * gridSize);

  if (!grid[x][y].hasMine) {
    grid[x][y].hasMine = true;
    minePlaced++;
  }
}

现在，我们已经完成了雷区的生成和雷的布置。可以在浏览器中打印出 `grid` 变量，查看雷区的状态。

### 2.3 完善雷区显示与逻辑

在前面的步骤中，我们已经生成了雷区并布置了雷。接下来，我们需要在界面上显示雷区，并实现点击格子的逻辑。

首先，我们需要创建一个函数来动态生成并显示雷区的格子。遍历雷区的二维数组，创建相应的 DOM 元素，并将其添加到游戏容器中。

function createGrid() {
  for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      const cell = document.createElement("div");
      cell.classList.add("grid-cell");
      cell.dataset.row = i;
      cell.dataset.col = j;
      gameContainer.appendChild(cell);
    }
  }
}

然后，我们可以在 CSS 文件中添加一些样式来美化格子的显示。

.grid-cell {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  display: inline-block;
}

接下来，我们需要监听格子的点击事件，并实现对应的逻辑。当点击一个格子时，我们需要判断该格子是否有雷，如果有雷则游戏失败，否则翻开格子并显示格子周围的雷的数量。

document.addEv