阿望教你用vue写扫雷小游戏-创新互联

前言

创新互联公司专业为企业提供上林网站建设、上林做网站、上林网站设计、上林网站制作等企业网站建设、网页设计与制作、上林企业网站模板建站服务，10余年上林做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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

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

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

扫雷游戏规则

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

来，看规则：

大白话游戏规则，计算逻辑如下：

游戏开始，选择难度 鼠标左键随机点开一个格子A（你想用右键标雷也可以） 左键点击后一共有三种情况 1) 是数字，假设是2，表示以该格子A为中心的九宫格除了该格子以外的8个格子内有2个雷 2）是空白，表示以该格子A为中心的九宫格除了该格子以外的8个格子内没有雷，并且系统计算分别以这8个格子为中心九宫格除了该格子以外的8个格子是否是空白 a. 是空白，继续计算以这8个格子为中心九宫格除了该格子以外的8个格子是否是空白，循环扩散 b. 是格子边界，停止边界扩散 c. 是数字，数字格子翻出来显示，停止扩散 3）是雷，game over 了。。。 如果点第一次只翻了一个数字是比较难开始游戏的，如果第一次翻了一大片出来，恭喜你，可以开始秀你的智商了，在确认是雷点的格子点右键，即可标记地雷格，表示你认定这个格子是地雷 如果数字周围的雷被全部标记出来了，但数字周围还有没被翻开的格子的话，双击该格子，自动将其他格子翻开

好，这下规则我们了解了，接下来，摩拳擦掌，开始写代码咯，本次代码用vue来写，没有原因，习惯了而已。

扫雷代码逻辑

看着游戏规则，我们先来理一理，要如何完成这个功能，我们以最简单的，最能使人理解的步骤，来完成这次功能。

1. 难度选择
2. 根据选择的游戏难度绘制游戏主界面，就是格盘
3. 根据选择的游戏难度随机生成地雷放到盘中
4. 计算每个格子周围的雷数
5. 完成用户交互（左键点击翻格子，右键点击放雷）
6. 空白格扩散翻格子
7. 计算游戏结束

生成项目

避免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://cdkjz.cn/article/dshiho.html