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

- src
 - components
  - SelectLevel.vue [新增，难度选择组件]
  - LoveSweeping.vue [新增，游戏界面组件]
 - App.vue [父组件，负责组件间的切换和某些数据传递]
 - main.js
- package.json

// 难度
 level: [
  {
   text: '青铜', // 难度描述
   value: [9, 9, 10] // 格子横排数，格子纵排数，雷数
  }, {
   text: '黄金',
   value: [12, 9, 20] 
 ]

<li v-for="(item, index) in level" :key="index" @click="handleChoseLevel(item.value)"></li>

// 选择难度
 handleChoseLevel(level) {
  this.$emit("chose-level", level);
 }

<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>

// 随机获取雷点位置
 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, // 是否被标记
 }],

// 获取格子周围的雷数，
 getMineNumAroundLattice(lattice, index) {
  // 先获取格子周围的有效索引
  const latticeIndexArr = this.getLatticeIndex(index);
  // 循环索引，索引值在雷点数组中的，即为雷，当前格子的雷点数加1
  latticeIndexArr.forEach(i => {
   if (this.minePosition.indexOf(i) > -1) {
    lattice.mineNum ++;
   }
  });
 },
 // 获取格子周围的有效索引
 getLatticeIndex(index) {
  // 存索引值的变量
  let latticeIndexArr = [];
  // 当前格子位于第几行
  const latticeRow = Math.ceil(index / this.rows);
  // 当前格子位于第几列（求余为0说明是最右边一列）
  const latticeCol = Math.ceil(index % this.rows) || this.rows;
  // 第一行没有上一行，不需要计算减1的行值，最后一行没有下一行，不需要计算加1的行值
  for (let i = (latticeRow === 1 "text-align: center">

没问题了，来，接着往下走，格盘数据基本都设置好了，那我们接下来要做的就是，点开格子操作
点击交互
这一步先做简单点，有个明显的区别就可以了，点雷我们先不管，先看点数字和空白的情况，首先得明确，到时候格子的可见属性是全部要被隐藏的，点击了才会显示出来，这就用到了我们上一步提到的isOpen属性，默认肯定全是不可见的，点击之后，非雷翻开
点数字
点数字很简单，直接翻开，将isOpen属性设置为true
来点不一样的，isOpen === true 的时候字体变红色，走你┏ (゜ω゜)="htmlcode">

@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
希望各位看官不吝右上角赐个小星星哦，阿望这厢有礼啦，新年快乐啦 ★,° :.☆(￣▽￣)/$: .°★ 。
总结
以上所述是小编给大家介绍的阿望教你用vue写扫雷小游戏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！