游戏源码h5免费—游戏源码h5免费版 收藏 0

H5小游戏开发连载教程之扫雷游戏实现「含源码」

接上篇教程：

很抱歉，让大家久等了，从上周开始，工作很忙，一直没时间写，在这期间，我也在思考是否有更好或更简单的实现方案，在不同的设备上都能有不错的体验；通过这篇教程，我为大家带来一个非常简单的扫雷游戏实现方案；原本打算用两篇文章的，由于过于简单，就用一篇文章搞定了；

我们先欣赏下本篇文章实现的游戏界面：

扫雷游戏界面

扫雷游戏界面

我想，Windows的扫雷游戏大家应该都玩过吧？其实，这个游戏是有成功诀窍的，它考察了你思考问题的能力；如果1个格子的数值是1，那么它的周围8个方向有且只有一个雷；同理，格子数值是2，它的周围8个方向有且只有2个雷；由于1个格子最多有8个相邻格子，所以1个格子周围最多包含8个雷；

现在，我们正式开始。首先，我们在src根目录创建一个文件：shared.js文件，这个文件用于定义所有游戏公用的变量及函数；我们在该文件中定义一个genArr函数；该函数非常简单，用于创建一个指定长度的数组并用指定的值填充；在我们的游戏教程中，会大量使用该函数生成用于遍历的数组；

然后，在src/components/mine文件夹下创建一个文件game.js。我们首先用JS文档注释声明2个类型，并引入一些我们将要用到的函数；通过语义，大家应该能明白这2个类型中字段的含义吧？GameOptions类型中的rows是行数，cols是列数，mineCount是雷的数量；Block类型的num是格子的值，open是打开标识，flag是插旗标识，插旗是用于标记已确定了的雷，以防误点击；

然后，我们导出一个匿名函数。大家切记：我们以下所有的JS代码全部写在该函数内部；

然后，我们创建一个用于保存游戏状态的响应式对象

然后，我们定义一个根据网格行列数生成二维数组阵列的函数，初始格子的值num全部设为0，open和flag属性都为false；

然后，我们定义一个获取格子对象的函数，由于我们很多地方需要获取格子对象，所以定义一个函数比较好；

扫雷游戏有一个原则就是，首次单击的格子不能是，所以，我们必须在玩家首次点开一个格子后，再生成分布图；我们生成分布图的函数需要一个行列坐标，来确保该坐标一定不是。如下是生成分布图函数：

当玩家点开一个格子后，如果该格子的值是0，那么我们需要深度递归遍历，将相邻的值为0和1的格子全部自动打开；如下是自动打开格子的函数定义：

当玩家点击的格子值为9时，我们需要打开所有的，并结束游戏；如下是自动打开所有的函数：

当玩家打开了所有不是雷的格子后，我们需要结束游戏，如下是用于判断是否已完成挑战的函数：

我们需要一个函数，用于开始新游戏，该函数用于对游戏状态进行重置或更新，并启动游戏；如下是开始游戏函数定义：

我们需要一个用于处理格子单击事件的函数。

我们需要一个用于处理格子上下文菜单的函数，该函数用于插旗和移除旗之间切换。

如下是3个计算属性定义，分别用于统计插旗数量，打开的格子数量，未打开的格子数量。

最后，我们在导出的匿名函数的底部返回组件中使用到的变量和函数。

如下是src/components/mine/Index.vue文件源码，我们使用table承载游戏界面；我认为table很适合二维数组数据的可视化；

如下是本篇教程中用到的几张图片，由于是在网上找的，担心有版权问题，仅提供截图，就不放到文章里面了，大家可以用自己的图片替代，将图片放到src/components/mine/img文件夹中；其实这个不是重点，重点是实现原理。

感谢阅读！以上就是本篇教程的全部内容，童鞋们都理解了吗？我感觉扫雷游戏的实现非常简单，几乎没什么难度，童鞋们应该都能理解吧？如果还有疑问，可以问我；

上一篇：

前端实战：从零到一实现H5拼图小游戏(附源码)

我去年曾写过一个用H5，Javascript，css3实现的拼拼乐小游戏，技术栈采用自己封装的类Jquery框架 Xuery ，其中涉及到了很多经典的 javascript 算法和css3特性 ，对大家的编程能力会有很大的提高，文末我也会放上源码获取方式，大家可以学习体验一下。

因为该应用属于 H5 游戏，为了让项目更轻量，我没有采用第三方 ui 库，如果大家想采用基于 vue 的第三方移动端ui库，我给大家推荐几个我之前用过的比较靠谱的：

• Mint 饿了么推出的移动端ui库
• NutUI 一套京东风格的移动端组件库
• muse-ui 基于MaterialUI风格的移动端UI组件
• cube-ui 滴滴团队开发的移动端UI组件库
• vant 有赞团队的电商风格的移动端组件库
• atom-design atom风格的移动端ui组件库
• mand-mobile 滴滴团队研发的基于金融场景的移动端ui组件库

以上推荐的都是社区比较完善，bug比较少的组件库，大家可以感受一下。

回到我们的小游戏开发，考验更多的是大家对 javascript 和css3 的掌握程度，在学习完这篇文章之后相信大家对 javascript 和 css3 的编程能力都会有极大的提升，后面还会介绍如何使用 canvas 实现生成战绩海报图的功能。

我们先来看看游戏的预览界面：

本文的算法实现方式在之前的拼拼乐文章中已经说明，这里主要介绍核心算法， 至于vue-cli的使用方法，笔者之前也写过对应的文章，大家可以研究学习一下。vue-cli搭建项目方式如下：

关于vue-cli3配置实战，可以移步 一张图教你快速玩转vue-cli3

目前笔者主要整理了如下核心功能，接下来笔者会一一带大家实现： 实现纯javascript上传预览图片 实现拼图分割功能 实现洗牌算法 实现生成战绩海报功能

文件上传预览主要采用FileReader API实现，原理就是将file对象传给FileReader的readAsDataURL然后转化为data:URL格式的字符串（base64编码）以表示所读取文件的内容。 具体代码如下：

一般我们处理这种拼图游戏都会有如下方案： 用canvas分割图片 采用n张不同的切好的切片图片（方法简单，但是会造成多次请求） * 动态背景分割

经过权衡，笔者想出了第三种方法，也是自认为比较优雅的方法，即动态背景分割，我们只需要使用1张图片，然后利于css的方式切割图片，有点经典的雪碧图的感觉，如下：

本质就是我们设置九个div，每个div都使用同一张图片，并且图片大小等于游戏画布大小，但是我们通过backgroundPosition（背景定位）的方式来实现切割图片。这样做的另一个好处是方便我们实现洗牌逻辑。

洗牌逻辑依托于随机算法，这里我们结合坐标系，实现一个随机生成二维坐标系的逻辑，然后通过改变每个切片的translate位置，配合过渡动画，即可实现洗牌功能和洗牌动画。

数组乱序比较简单，代码如下：

洗牌逻辑基于数组乱序，具体逻辑如下：

n维矩阵主要用来做洗牌和计算成功率的，具体实现如下：

置换算法主要用来切换拼图的，比如用户想移动拼图，可以通过置换来实现：

生成战绩海报笔者采用canvas来实现，对于canvas的api不熟悉的可以查看MDN，讲的比较详细。这里笔者简单实现一个供大家参考：

H5拼图小游戏我已在github开源， 感兴趣的可以在我github上学习参考。以上的逻辑部分的代码可以直接整合到vue项目中即可，由于实现比较简单，这里我就不详细介绍了。

• H5-dooring H5页面制作工具
• mitu 在线图片编辑器

如果想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com