这一步先做简单点，有个明显的区别就可以了，点雷我们先不管，先看点数字和空白的情况，首先得明确，到时候格子的可见属性是全部要被隐藏的，点击了才会显示出来，这就用到了我们上一步提到的isOpen属性，默认肯定全是不可见的，点击之后，非雷翻开
点数字
点数字很简单，直接翻开，将isOpen属性设置为true
来点不一样的，isOpen === true 的时候字体变红色，走你┏ (゜ω゜)=☞
@click.left="handleClickLattice(lattice[(col - 1) * rows + row - 1])" // 点了格子 handleClickLattice(lattice) { // 是数字 if (lattice.mineNum) { if (!lattice.isOpen && !lattice.isMark) { lattice.isOpen = true; } } },
点空白
第二个难点来咯，点空白格需要注意以下几点：1、空白格表示周围8格都没有雷 2、扩散周围8格，判断雷数，循环往复 3、遇边界停止扩散，遇数字停止扩散
假设横9纵9的格盘，第二排第三列格为空白格即第12格，那么点了该空白格之后，首先将其与周围8格（2，3，4，11，12，13，20，21，22）一起，isOpen置为true，然后分别以周围8格为中心，判断该格子是数字，停止扩散，是空白格，继续扩散
这一步写完，
// 代码把下半部分补齐 handleClickLattice(lattice) { ... else { // 是空白 const latticeIndexArr = this.getLatticeIndex(lattice.index); this.showWhiteAround(lattice, latticeIndexArr); } }, // 展示周围的空白标记，直至边缘（格子边缘或者数字） showWhiteAround(lattice, latticeIndexArr) { // 避免有重复的数据停不下来，去个重 latticeIndexArr = [...new Set(latticeIndexArr)]; for (let i = 0; i < latticeIndexArr.length; i++) { const item = latticeIndexArr[i]; latticeIndexArr.splice(i, 1); i--; if (this.lattice[item].isOpen) { continue; } this.lattice[item].isOpen = true; if (!this.lattice[item].mineNum) { const arr = this.getLatticeIndex(this.lattice[item].index); this.showWhiteAround(this.lattice[item], latticeIndexArr.concat(arr)); } } },
基本明面上的扫雷步骤就已经完成了，handleClickLattice方法再加一步判断，如果是雷，游戏结束
右键标记雷点
这个就很简单了，写个右击事件，修改一下格子的isMark和isOpen属性，这一步的基本逻辑就是
右击格子 格子本身已经被打开 1）是：格子已经被标记为地雷？ a. 是：取消标记（isMark和isOpen取反），剩余地雷数+1 b. 否：说明是右击了已经被点开的数字格，不做任何操作 2）否：isMark和isOpen取反，记录该格子已经被标记为地雷，格子处于打开状态，剩余地雷数-1，判断是否结束
// 右键确认是雷点 handleSureMinePoint(lattice) { if (!lattice.isOpen) { lattice.isMark = true; lattice.isOpen = true; this.minePosition.splice(this.minePosition.indexOf(lattice.index), 1); this.judgeIsOver(); } else { if (lattice.isMark) { lattice.isMark = false; lattice.isOpen = false; this.minePosition.push(lattice.index); } } },
游戏是否结束
游戏结束一共有三种情况：1、点到雷了，直接结束 2、雷被标记完了（有可能失败了，标错了） 3、翻开的格子数 + 雷数 = 总格子数
完成功能
接下来要做的就是把格子属性隐藏起来，假装不知道，再假装鼠标一点，格子就翻过来了。这就用到之前提到的格子属性isMark和isOpen，本身元素处于隐藏状态，当被标记或者被打开的时候设置相应的属性使其可见就行了，如此，便完成了扫雷的基本功能，有兴趣的小朋友可以自己融合多种功能试一试
当然，这只是其中一种实现方式，把所有的计算全部放在玩游戏之前了，爱动脑筋的朋友们也可以想想，如果放在每一次点击时做计算该如何组织代码
阿望的源代码中还集合了【重开一局】、【改变难度】、【游戏计时】等功能，样式兼容手机和PC在线玩，在手机上玩的时候我在纠结手机如何模仿PC端的右键点击标雷操作，没有好的想法，不想用双击，于是多加了一个状态，点击页面【标记】按钮，即表示标记雷点，再点击一次表示还原，正常点开数字格，坐火车无聊的小朋友可以玩一玩哟
查看阿望的源码： mineSweeping
在线试玩：mine-sweeping-online
希望各位看官不吝右上角赐个小星星哦，阿望这厢有礼啦，新年快乐啦 ★,° :.☆(￣▽￣)/$: .°★ 。
总结