代码放在 CodePen 上：https://codepen.io/dinnerwithouttomato/pen/BazzaZK

体验地址：https://qiutongxue.gitee.io/webpage/minesweeper/

我们打开扫雷玩几把，可以发现扫雷的大概流程是这样的：

不难看出，扫雷的基本逻辑还是很简单的，“地图“可以用二维数组表示，地雷用 -1 表示，空白格用 0 表示，数字格就用相应的数字表示。点击空白格之后的扩散现象其实就是一个搜索的过程，DFS、BFS 都能实现。其它的细节在下一节会提及。

游戏没有界面是不行的！最基本的开始按钮要有吧，基本的网格也要有吧。当然细节上不用着急去深挖，先把整体的一个格子造起来：

OK，div 还挺多的，不着急，一个个来。首先最外层的 div 是为了给 Vue 挂载的，让 Vue 知道，哦我控制的是这一块区域。下面一层是主界面区域，大概就是包含了按钮、文本、方格之类的。按钮的部分就不说了，与按钮同级的是游戏区域，也就是真正能点的地方了。这里我把这些小方格全都按照 div 来处理，并且是一行一行排列的，minesArray 是一个二维数组，记录每个位置表示什么（-1 表示地雷，0 表示空格……）。使用 v-for 遍历 minesArray，这样数组有多大，游戏区域就有多大。这样就能组成一个网格了…吗？

当然不是，首先 div 是无形无影的，其次因为行高的原因，行与行之间有一定的距离，这就完全不像网格！出于顺眼的考虑，就先小小的美化一下：

在 .cell 中有几点需要提一下， inline-height 设置和 height 相同的值，是为了让格子里的数字能够垂直居中。 vertical-align 为了让每个格子能垂直对齐（当格子里有数字时格子会下沉？）。

另外，因为网格的关系，也可以使用 display: grid，网格布局或许会更容易（？）一些。

现在就舒服多了嘛：

然后在把 Vue 挂载到 #app 上：

rolSize 和 colSize 分别为网格的行数和列数，初级扫雷是一个 8 × 8 的网格。mineSize 是地雷的数量，初级扫雷为 9 个

在 html 中，网格的大小取决于 minesArray 的大小，所以确定了 minesArray 才能把网格绘制出来。可以使用 mounted()，在 Vue 挂载之后就自动初始化：

根据 minesArray 返回的结果，各数字颜色对应各类，比如数字 1 对应 num-color-1，数字 -1 对应 num-color--1，在 css 中对样式进行定义：

现在看着舒服多了，有点内味儿了。

数字布置完成，接下来应该把格子的数字藏起来，等我点击的时候再出现。用一个存放 boolean 值的二维数组 visited 记录哪些方格被访问过了，访问过的方格就把数字显示出来。

现在 data 中声明好 visited：

然后初始化该数组（和 minesArray 一起放在 mounted 中初始化）：

设置 mask 和 num-color 的 css 样式：

设置 visited 样式，当已访问时格子消失：

在 clickCell 中将点击后的格子设为已访问：

可以点几下方格试试，数字立马就出现了。

离扫雷的实现就差最后几步了。而这一步是最重要的，也是最影响游戏体验的。

在扫雷时，一下点开一大块区域的感觉别提有多爽了，而目前的进度点击空白才出现一个格子！这就跟便秘一样难受！所以赶紧来疏通肠道。

首先，在 clickCell 中判断当前的格子是否为 0，若是，开始搜索扩散：

我这里用的是 DFS，纯粹是因为代码简单哈哈哈。这代码已经简单到不用我多说了。这其实就是模拟点击操作，因为 0 的周围 8 格必不是雷，所以看到 0 就把周围 8 个格子点开就完事了。当然了，BFS 应该更加正统一些，毕竟排雷都是一圈一圈排过去的嘛。

游戏结束有两种方式：1. 踩到地雷 2. 排完所有雷

先从简单的开始。踩到地雷就是当前点击的格子是 -1，触发失败条件：

胜利的判断比较复杂，我这里用的是一种比较弱智的思路：算出所有安全格子的数量 noMineBlocks，如果当前的步数 === 安全格子总数，游戏胜利：

在该方法开头有个判断条件：

一个是游戏结束的时候，另一个是已经访问过（即点开数字）的时候。前者是必须要加的，因为我的弱智胜利条件需要这个约束，不然重复点击同一个格子会出大问题——还没点完所有格子就胜利了。

当然，真正胜利的判断条件肯定不会是我这样，这里还需要优化一下子。

对应的胜利方法：

两个方法都用一个 showMines 方法，为的是在游戏结束时，不管成功与否把所有的地雷显示出来。传入的 boolean 类型表示游戏胜利与否，如果胜利，地雷格子被插上旗子（变绿 ）：

然后 cellFilter 判断是否为 0，若是返回 ''，否则返回原来的数：

但是测试的时候发现，本来是 0 的方格一点变化都没有，就像是未点击一样：

实际上是因为 div 是跟着内容变的，返回了一个 '' 值后，div 认为自己没有容纳任何东西，就不出现。解决方法也很简单，只要给这个 div 一个大小就行：

实际效果：

现在的话扫雷味儿就很足了吧。

关于字体：扫雷的字体太难找啦，既然不影响大局，我就放弃了^^

主界面也是有阴影的：

游戏区域与主区域之间要加些空隙：

在 game-area 上面（同级）插入 top-box，管理按钮、计时器、雷数计数器：

设置样式：

设置按钮样式：

效果如下：

从 iconfont 中找几个有代表性的表情放到项目中：

引入 js 文件：

插入到 中：

调整样式：

为了实现表情的变化，xlink:href 的值与 emojiType 息息相关。可以根据目前的状态，将 emojiType 设置成 default, click, fail, success，就能在变化时自动从库中引用 icon-emoji-xxx 对应的表情：

要在按下时改变表情，需添加 @mousedown 事件监听，以及在 @mouseup 时复原：

终于找到字体啦，用的是 FX-LED.TTF 液晶字体，导入到 css 中，再设置相应的样式就行：

这。。勉强够用哈

随着我们需求的不断增加，存放状态的二维数组将会越来越多（minesArray, visited flag…）。显然，同时维护这么多数组不是一个好事，不仅维护起来非常麻烦（牵一发而动全身），代码量也会成倍增长，更别说什么逻辑请不清晰，易不易读了。基于面向对象编程的思想，我们可以把这些状态放在一个类中进行统一管理。

首先创建一个 Cell 类，这个类是每个小格子的抽象形式，存放的是当前格子的各种状态：坐标、是否被访问、实际的数值、是否被标记等等：

this.neighbors 存放当前小格子的周围 8 个”邻居“，能减少重复的计算。

然后创建一个二维数组，专门管理这些 Cells：

这样每个格子都由这个 cell 进行管理，实际上已经脱离了二维数组 cellMatrix，cell 中属性的改变可以被监听到，跳出了那个巨坑，不再需要 this.$set() 了。

2020.11.13 指正： 能被监听到的原因与二维数组的初始化中的 push 有关。

经过这么一番修改，代码少了很多，看着也不太累了。最主要的是，因为有了 neighbors 的存在，在【困难】难度下点格子的速度快了很多，终于不用卡了呜呜呜（不过第一次点击还是会卡那么一会）。

这个讲道理应该放在界面优化的，不过按照时间顺序来说，这是在优化了代码之后才做的事，所以索性就扔这里了。

我们地雷终于要有新面貌了！终于不再是数字了！

首先，还是去 iconfont 上找个符合意境的图标，小小的编辑一下大小、名字等等（别忘了更新 js 哦）：

把代码扔到 html 里，使用 v-if 控制其出现的位置：