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

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

上一篇：

手把手教你企业级游戏项目开发，2048小游戏（附源码+设计文稿）

文/IT可达鸭

图/IT可达鸭、网络

相信很多人在学习编程或者在工作中，不可避免地会阅读其他的人的代码。一份优秀的源码，除了代码逻辑清晰，还配有相应的注释。

学会阅读源码，是一个优秀程序员必备的技能。当然，源码的阅读与理解是有难度，特别是对于优化后的源码，为了执行效率，必定会使得代码更加难以阅读。

所以源码配备设计文档，有助理解源码。至少，我还是初学者的时候，特别渴望有这样一份文档。所以，我写了这份文档，时刻提醒自己。

首先声明，2048游戏的源码并不是我首创。我是参考了几份比较好的源码，针对一些晦涩的代码做了算法示意图，同时也改进部分代码的逻辑。

例如：改进随机在棋盘中生成2或者4的逻辑、部分显示在不同机型的适配（windows、mac）、针对一些常见的报错信息做了相应的解决方案等等。

《2048》是一款比较流行的数字游戏，最早于2014年3月20日发行。原版2048首先在GitHub上发布，原作者是Gabriele Cirulli，后被移植到各个平台。这款游戏是基于《1024》和《小3传奇》的玩法开发而成的新型数字游戏。

这款游戏的玩法很简单，每次可以选择上下左右滑动，每滑动一次，所有的数字方块都会往滑动的方向靠拢，系统也会在空白的地方乱数出现一个数字方块，相同数字的方块在靠拢、相撞时会相加。不断的叠加最终拼凑出2048这个数字就算成功。

python版本： 3.6.0

编辑器： pycharm

项目所需要的环境安装包：

curses: 命令行界面，输入字符回显与隐藏

itertools: 二维数组迭代工具

random: 生成随机数、在指定列表中随机获取一个元素

windows：在命令行中运行，python 2048_game.py，（pycharm的命令行tab下运行也可以，文章最后有介绍）；

mac: 直接在pycharm下运行即可。

1 移动逻辑

用户进行一次左移操作，首先矩阵中的所有数字逐行向左非零的位置移动，其次是向左合并，最后再进行逐行向左非零的位置移动。这三个步骤结合起来，为用户的一个左移操作。

矩阵数字移动图如上图，相关代码如下图。

有了左移操作，相应就有右移操作、上移操作、下移操作。为了简化代码，这里使用了矩阵变化操作配合左移操作来实现四个方向的操作。

那么矩阵的转置和反转的操作是怎样的？接下来介绍矩阵的运算。

2 矩阵运算

如上图，先看红色的箭头，指示矩阵转置、矩阵反转后的数字位置变化。

再看蓝色箭头，在原矩阵进行左移操作，就相当于矩阵转置后进行上移操作。同样的，左移操作配合矩阵反转、配合矩阵反转+转置，会形成相应的右移操作、下移操作。

其矩阵的转置操作、反转操作代码如下图示例。

有了这些操作之后，我们应该怎么设计这些操作，使得代码简洁而且便于理解？

这里使用了设计模式中的策略模式。

3 设计模式–策略模式

什么是策略模式？

简单的说，就是在有多种算法相似的情况下（四个方位的移动操作），使用 if…else… 所带来的复杂和难以维护。所以使用同一个接口，在代码运行时去调用不同的方法或对象。

策略模式的优点：1. 算法可以自由切换； 2. 避免使用多重判断条件； 3. 扩展性良好。

策略模式的缺点：1. 策略方法或策略类会增多；2. 所有策略类都需要对外暴露。

使用场景： 1. 如果在一个系统里面有许多类，它们之间的区别仅在于它们的行为，那么使用策略模式可以动态地让一个对象在许多行为中选择一种行为; 2. 一个系统需要动态地在几种算法中选择一种; 3. 如果一个对象有很多的行为，如果不用恰当的模式，这些行为就只好使用多重的条件选择语句来实现。

下面以一个四则运算来演示策略模式的运用：

4 curses 模块的使用

curses 模块的主要用法，命令行界面，输入字符回显与隐藏。

这里梳理了使用的方式: 1. curses.initsr() 启用curses模块； 2. while 循环体不断渲染界面；3. stdscr.clear() 每次循环前清屏；4. 清屏后， stdsrc.addstr() 设置回显字符串; 5. stdscr.getch() 等待用户输入，这里是一个断点，只要用户没有进行输入操作，就会一直停留在这里。

程序分为四个模块， 配置信息模块、主逻辑模块、判断模块、算法模块。

配置信息模块： 棋盘大小（4X4）、键盘控制的定义（上下左右的按键）、胜利条件；

主逻辑模块： 初始化、棋盘重置、随机在棋盘位置生成数字、画一个棋盘、移动策略接口、获取用户操作、游戏主逻辑；

判断模块：判断是否赢了、判断是否结束、判断是否可以移动；

算法模块：四个方向移动算法、数字合并算法、矩阵转置、矩阵反转；

具体细分如下思维导图：

提前编写代码框架是一个良好的习惯，这样在开发的时候就比较容易把控项目整体进度。

开发过程中，如果被某个细节难住，可以使用标签 #todo 来标记它。先去写其他简单模块，等有时间再回过头来解决这个难点。

节选一个判断模块代码框架（cube 表示矩阵的浅拷贝）：

大体框架如下图（与源码分开，单独一个代码文件，主要用来查看）：

以下分四个模块，主要根据难易程度进行排序，先从简单模块的代码入手。

• 分模块编写-配置信息

• 分模块编写-判断模块

判断是否赢，是否游戏结束：

判断是否可以向左移动

判断是否可以向右、向上、向下移动：利用矩阵操作（转置与反转）配合左移判断。

判断用户的选择是否可以移动（这里也用到了策略模式）

• 分模块编写-算法部分

移动的基础操作（左移）

四个方向移动：根据上面的矩阵操作示意图可以知道，左移的基本操作，配合矩阵操作，就能衍生出其他三个方向的移动操作。

数字合并（向左合并）

矩阵转置

矩阵反转

• 分模块编写-主逻辑部分

初始化：

棋盘重置：

随机在棋盘生成数字：

画一个棋盘：

移动策略：根据用户的选择，在程序运行时自动选择相应的移动算法。

获取用户操作：

主逻辑：

• windows 环境下可能出现的问题：

1. 报错 ModuleNotFoundError: No module named \’_curses\’

解决方案：

下载一个：curses-2.2.1+utf8-cp36-cp36m-win_amd64.whl 文件

使用pip 进行安装： pip install curses-2.2.1+utf8-cp36-cp36m-win_amd64.whl

（其中cp36 表示对应python版本为3.6， amd64 对应的是64位系统）

1. 报错 Redirection is not supported.

解决方案：如图所示

1. 显示的内容不对

解决方案：

进入Terminal 控制台，使用命令启动运行代码： python 2048_game.py

4. 报错 _curses.error: addwstr() returned ERR

解决方案：

把terminal 这个框放大就行，原因是因为 curses 需要合适的界面大小进行渲染游戏界面，界面太小会导致渲染失败。

• Mac 环境下可能出现的问题：

我在Mac环境下，直接就可以运行了，好像还没遇到问题。

• 游戏演示

终于看到运行结果了

至此，2048的游戏就设计完成了。当然里面有很多东西可以优化，例如排行榜、文件存储、双人对战、分值计算加入时间因素、接入H5页面等等。我记得产品经理曾说过这么一句话：先保证80%的功能可以用，再去考虑优化问题。

网上有很多2048的小游戏，但唯独，自己写出来的游戏，才是最香的。

如果有疑问想获取源码，可以关注后，在后台私信我，回复：python2048。 我把源码发你。持续关注\”IT可达鸭\”，每天除了分享有趣Python源码，还会介绍NLP算法。最后，感谢大家的阅读，祝大家工作生活愉快！

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