阿望教你用vue写扫雷小游戏-创新互联
前言
话说阿望还在大学时，某一天寝室突然停网了，于是和室友两人不约而同地打开了扫雷，比相同难度下谁更快找出全部的雷，玩得不亦乐乎，就这样，扫雷伴我们度过了断网的一周，是整整一周啊，不用上课的那种，可想而知我们是有多无聊了。
这两天临近过年了，该放假的已经放假了，不该放假的已经请假了，公交不打挤了，地铁口不堵了，公司也去了大半部分的人了，就留阿望这种不得不留下来值班的人守着空荡荡的办公室了，于是，多年前那种无所事事的断网心态再次袭来，于是，想玩扫雷的心再次蹦跶出来，于是，点开了电脑的附件，于是，发现我的电脑上并没有扫雷【手动微笑.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
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享题目：阿望教你用vue写扫雷小游戏-创新互联
文章路径：http://6mz.cn/article/dshiho.html