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文件夹中；其实这个不是重点，重点是实现原理。

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

上一篇：

选择购买商业手游联运平台源码时要注意什么？

手游创业的朋友大都经历过自研手游联运平台和购买商业手游联运联运平台源码的纠结，但是大多数慎重考虑后都是选择了后者，因为自研手游联运平台的综合成本远远超过了购买一款功能完备的手游联运平台源码的价格。那么购买商业手游联运平台源码时要注意什么呢？下面就跟小编来了解一下吧。

一、跨平台多端开，可以完美实现数据互通

手游联运平台要支持Android、ios、电脑端、WAP端、微信端齐开，可以跨平台展示，完美实现数据同步互通，一站式管理。支持手游，H5游戏同步上线。玩家一个账号多款游戏直接玩，无需再注册账号。

二、登录方式多种多样，玩家登录方便快捷

不仅支持手机号注册，还要支持一键登录，微信、QQ、游客登录，这样玩家登录方便快捷，不用再繁琐的注册账号。

三、支付宝、微信等支付接口协助申请

游戏企业刚做手游联运平台支付接口肯定是没申请的，那么游戏联运平台提供商有义务协助且是免费协助申请，有了支付接口的平台才是有灵魂的平台。大的游戏联运平台提供商经验十足，且有专门的售后人员协助，能够帮助游戏企业更快的完成申请支付商户号的流程。

四、提供游戏接入，没有经验也能完成对接

作为游戏行业新手，游戏平台开发商要提供游戏商资源，确保合作；当您安装部署软件时，作为手游联运平台提供商有义务协助您完成，就算没有操作经验也能完成游戏对接。

五、选择知名游戏平台提供商，后续服务有保障

要选择知名游戏平台商提供的平台，要能测试，在线多测。测试前台，后台，APP盒子，SDK等。最好到公司考察，看下公司的综合实力如何，别后续服务跟不上，开视频了解一下也是可以的。溪谷科技就是一家相当不错的游戏运营平台提供商，系统安全稳定，经过海量数据测试，还有金牌售后一对一服务哦。

以上就是选择购买商业手游联运平台源码时要注意的事项啦，其他更多小细节就不一一列举了，想要购买商业手游联运平台源码的朋友不妨考虑一下溪谷软件哦。溪谷软件作为知名的游戏运营产品研发企业，已经有11年的游戏运营平台开发经验，服务了3000+游戏企业，产品稳定可靠，并且拥有专业的售后服务团队，能够快速解决客户遇到的问题。如果您对溪谷手游联运平台源码感兴趣，可以直接联系售前工程师哦。

赶快咨询客服

tel：13270282266（海唐）

tel：18652263285（小龙）

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