话说阿望还在大学时，某一天寝室突然停网了，于是和室友两人不约而同地打开了扫雷，比相同难度下谁更快找出全部的雷，玩得不亦乐乎，就这样，扫雷伴我们度过了断网的一周，是整整一周啊，不用上课的那种，可想而知我们是有多无聊了。
这两天临近过年了，该放假的已经放假了，不该放假的已经请假了，公交不打挤了，地铁口不堵了，公司也去了大半部分的人了，就留阿望这种不得不留下来值班的人守着空荡荡的办公室了，于是，多年前那种无所事事的断网心态再次袭来，于是，想玩扫雷的心再次蹦跶出来，于是，点开了电脑的附件，于是，发现我的电脑上并没有扫雷【手动微笑.jpg】。
怎么想起要写扫雷的阿望就不多废话了，直接开干。
扫雷游戏规则
想当年阿望还是在大学才参透扫雷的游戏规则的，初高中的时候都是靠运气瞎点，从没赢过，当然了，境界提升以后，追求的自然就不是赢了，而是速度。
来，看规则：
大白话游戏规则，计算逻辑如下：
游戏开始，选择难度 鼠标左键随机点开一个格子A（你想用右键标雷也可以） 左键点击后一共有三种情况 1) 是数字，假设是2，表示以该格子A为中心的九宫格除了该格子以外的8个格子内有2个雷 2）是空白，表示以该格子A为中心的九宫格除了该格子以外的8个格子内没有雷，并且系统计算分别以这8个格子为中心九宫格除了该格子以外的8个格子是否是空白 a. 是空白，继续计算以这8个格子为中心九宫格除了该格子以外的8个格子是否是空白，循环扩散 b. 是格子边界，停止边界扩散 c. 是数字，数字格子翻出来显示，停止扩散 3）是雷，game over 了。。。 如果点第一次只翻了一个数字是比较难开始游戏的，如果第一次翻了一大片出来，恭喜你，可以开始秀你的智商了，在确认是雷点的格子点右键，即可标记地雷格，表示你认定这个格子是地雷 如果数字周围的雷被全部标记出来了，但数字周围还有没被翻开的格子的话，双击该格子，自动将其他格子翻开
好，这下规则我们了解了，接下来，摩拳擦掌，开始写代码咯，本次代码用vue来写，没有原因，习惯了而已。
扫雷代码逻辑
看着游戏规则，我们先来理一理，要如何完成这个功能，我们以最简单的，最能使人理解的步骤，来完成这次功能。
难度选择
根据选择的游戏难度绘制游戏主界面，就是格盘
根据选择的游戏难度随机生成地雷放到盘中
计算每个格子周围的雷数
完成用户交互（左键点击翻格子，右键点击放雷）
空白格扩散翻格子
计算游戏结束
生成项目
避免vue新手不知如何下手，那就从建项目开始吧，环境安装我就不讲了，脚手架也是要有的
第一步，初始化lovesweeping工程（阿望不喜欢地雷，喜欢小桃心）
项目很小，不需要路由，不需要vuex，即可完成，只带了sass，连eslint都可以不要，看官们可以根据自己的喜好建项目
项目生成之后，helloworld就可以删掉了，它的存在并没有什么意义
文件切分
这一步主要是构建工程结构，简单画一下主要的几个文件
- 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>