首页 | 编程 | Java

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

2019年11月30日 作者：Awang原文

前言

话说阿望还在大学时，某一天寝室突然停网了，于是和室友两人不约而同地打开了扫雷，比相同难度下谁更快找出全部的雷，玩得不亦乐乎，就这样，扫雷伴我们度过了断网的一周，是整整一周啊，不用上课的那种，可想而知我们是有多无聊了。

这两天临近过年了，该放假的已经放假了，不该放假的已经请假了，公交不打挤了，地铁口不堵了，公司也去了大半部分的人了，就留阿望这种不得不留下来值班的人守着空荡荡的办公室了，于是，多年前那种无所事事的断网心态再次袭来，于是，想玩扫雷的心再次蹦跶出来，于是，点开了电脑的附件，于是，发现我的电脑上并没有扫雷【手动微笑.jpg】。

怎么想起要写扫雷的阿望就不多废话了，直接开干。

扫雷游戏规则

想当年阿望还是在大学才参透扫雷的游戏规则的，初高中的时候都是靠运气瞎点，从没赢过，当然了，境界提升以后，追求的自然就不是赢了，而是速度。

来，看规则：

项目生成之后，helloworld就可以删掉了，它的存在并没有什么意义

文件切分

这一步主要是构建工程结构，简单画一下主要的几个文件

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

好，初步认识了项目结构以后，咱把该新建的建好，可以不加东西，不报错就行

然后就是把组件间的切换代码写好，再来一步步的填充代码

界面长这样，当然，你要觉得难看自己换个样式也行

随机生成地雷

首先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;
 },

把地雷位置暴露出来

没问题了，来，接着往下走，格盘数据基本都设置好了，那我们接下来要做的就是，点开格子操作

点击交互

这一步先做简单点，有个明显的区别就可以了，点雷我们先不管，先看点数字和空白的情况，首先得明确，到时候格子的可见属性是全部要被隐藏的，点击了才会显示出来，这就用到了我们上一步提到的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方法再加一步判断，如果是雷，游戏结束

当然，这只是其中一种实现方式，把所有的计算全部放在玩游戏之前了，爱动脑筋的朋友们也可以想想，如果放在每一次点击时做计算该如何组织代码

阿望的源代码中还集合了【重开一局】、【改变难度】、【游戏计时】等功能，样式兼容手机和PC在线玩，在手机上玩的时候我在纠结手机如何模仿PC端的右键点击标雷操作，没有好的想法，不想用双击，于是多加了一个状态，点击页面【标记】按钮，即表示标记雷点，再点击一次表示还原，正常点开数字格，坐火车无聊的小朋友可以玩一玩哟

查看阿望的源码： mineSweeping

在线试玩：mine-sweeping-online

希望各位看官不吝右上角赐个小星星哦，阿望这厢有礼啦，新年快乐啦 ★,° :.☆(￣▽￣)/$: .°★ 。

总结

以上所述是小编给大家介绍的阿望教你用vue写扫雷小游戏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对来客网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

相关链接