阿望教你用vue写扫雷小游戏

游戏界面

画格盘

通过游戏难度选择来决定游戏格盘的大小，组件间已通过App将游戏难度传至界面组件中，我们用props把数据接收到，消化成自己的数据，画格盘需要的数据有：横排格子数，纵排格子数

画格子：我们将格子的索引暴露出来，后续可以帮助我们试错。整个格局有两种方式来表示格盘，坐标式和索引式，比如横9纵9的格子，[0, 0]代表第1个格子，[2, 3]代表第三行第四列也就是第20个格子。此次使用索引式来标志格盘

<div
  v-for="col in cols" :key="Math.random() + col"
  class="game-content-row">
  <span
   v-for="row in rows" :key="Math.random() + row"
   class="game-block">
   <span></span>
  </span>
 </div>

随机生成地雷

首先data中添加一个minePosition属性，用来记录雷点位置

随机生成地雷比较简单，主要注意，生成的地雷点数在格盘个数范围内，那么就可以写出随机生成的地雷了。界面组件已收集到横排格子数、纵排格子数、雷数，那么就能得到格子总数，假设横9纵9，10个雷，那么就是生成10个81以内的随机数（如果索引从0开始，即80以内）。

// 随机获取雷点位置
 getMinePosition() {
  // 定义一个数组装不重复的格点
  let mineArr = [];
  // 循环雷数生成不重复的雷点
  for (let n = 0; n < this.gameInfo[2]; n++) {
   const random = Math.floor(Math.random() * this.latticeNum);
   if (mineArr.indexOf(random) === -1) {
    mineArr.push(random);
   } else {
    n--;
   }
  }
  this.minePosition = mineArr;
 },

把地雷位置暴露出来

格子周围的雷数

确认了雷点位置，接下来要做的就是确认每一个非雷点位置周围的雷的数量，我们用对象来描述一个格子，这个对象主要包含以下几个属性

// 格子属性
 lattice: [{
  index: 0, // 格子索引
  mineNum: 0, // 周围雷数
  isMine: false, // 是否是雷
  isOpen: false, // 是否已经被点开
  isMark: false, // 是否被标记
 }],

这里我们主要用到index, isMine, mineNum属性，这一步，主要是计算每个格子元素的mineNum值，依赖于以下两个方法，个人觉得扫雷游戏最难理解的，最难捋清的逻辑，其中一个就是获取非雷点位置周围8个位置索引的方法getLatticeIndex（另一个是点击空白格扩散）