HTML5游戏开发-扫雷及其算法研究

吕蒙曰：士隔三月【1】，当刮目相看。所以，在下在这三月中发奋图强，花了约莫8节信息课的时间研究扫雷。呜呼，由于在下才能尚且不足，所以也就只能勉强打过中级难度的吧。不过，一边玩的同时，我还一边对扫雷这个游戏的制做方法构思了一下。所以说，本文中的算法完全是凭借自己对扫雷游戏规则的总结而自行研发出来的，倘若和MS的扫雷玩法有些出入，还望各位看官见谅。

【1】出自《孙权劝学》，原文为“士别三日”，由于在下这三个月来都不曾发表博客，所以引申到“士隔三月”，各位看官休怪休怪

以下是本次开发的游戏截图：

测试地址：http://yuehaowang.github.io/demo/minesweeper/

算法研究

扫雷虽然属于游戏开发初级学者研究的范畴，但是由于我是那种好高骛远的家伙，所以，虽然接触游戏开发约2年了，可是到现在才来研究扫雷，实在是惭愧惭愧。
首先，我想我们需要对扫雷游戏的算法进行一系列的研究。

布雷算法

这个算法嘛，顾名思义，就是说如何在场景中布雷。这个算法其实很简单，就是单一地使用随机取位来完成。不过值得注意的是，可能有些朋友和我一样，一开始认为是先把数字标好再去布雷，其实应该是先布雷，再根据布雷情况给每个格子标数字。

智能帮扫算法

其实这个所谓的“智能帮扫算法”是我随便给这个算法取的一个名字，可能俗气了点，看官莫怪～什么是“智能帮扫算法”呢？首先我来对其下个定义：

当玩家扫开到某个方块后，如果四周没有雷，或者这个方块四周的雷全部被扫除了，那么这时候就需要帮助玩家把四周的方块全部扫出。这样的算法叫做智能帮扫算法

如果实现了这个算法，那么点击一个方块，扫开一大片的效果就可以实现了。某些看官可能不理解为什么，我可以在这里罗嗦一下：根据定义我们可以看出，这个算法只是帮助扫出四周的方块，不过这是一个链环的过程，毕竟四周的方块被扫开后，如果这些方块满足执行帮扫算法的条件，那么帮扫算法就会在被算法扫开的方块上生效，如此渐进下去，知道被扫开的方块不满足条件为止。如果用流程图表示就是：

如果流程图还不能理解的话，就举个Y某我吃巧克力的例子吧。Y某有一天收到M君送来的一盒巧克力，我首先拆开盒子掰下一块巧克力，放进嘴里，发现是苦瓜味的，于是我就下定决心，如果我再吃到苦瓜味的，就把周围的8块都吃了。不想我接下来吃到一块就是苦瓜味的，没有办法，只有把周围八块都吃了，结果刚吃到其中一块，发现又是苦瓜味的，于是继续吃……于是就达到了吃开一片的效果。这里的吃到苦瓜味的巧克力就相当于“四周被标记的雷数等于相应数目”。这个故事的结局和扫雷不同，由于游戏中的雷数>=1，所以无论如何都会因遇到雷停下来，可是万恶的M君送来的巧克力尽然全是苦瓜味的(T_T)

要实现这个算法，说难也不算难。只需把对算法的定义翻译成代码即可。

实现过程

既然是游戏，所以要实现的不仅是算法，还有就是用户界面之类的。

由于纯canvas做游戏很麻烦，所以我这次就直接使用lufylegend游戏引擎实现界面。
引擎地址：http://lufylegend.com/lufylegend
API地址：http://lufylegend.com/lufylegend/api
本文中可能多次出现某些类和函数，或者某些函数和类很重要，所以我把它们的API地址放在下面，这样以来可以方便大家查找：

1. LExtends：http://lufylegend.com/api/zh_CN/out/classes/%E5%85%A8%E5%B1%80%E5%87%BD%E6%95%B0.html#method_LExtends
2. LLoadManage：http://lufylegend.com/api/zh_CN/out/classes/LLoadManage.html
3. LInit：http://lufylegend.com/api/zh_CN/out/classes/%E5%85%A8%E5%B1%80%E5%87%BD%E6%95%B0.html#method_LInit
4. LSprite：http://lufylegend.com/api/zh_CN/out/classes/LSprite.html
5. LBitmap：http://lufylegend.com/api/zh_CN/out/classes/LBitmap.html
6. LBitmapData：http://lufylegend.com/api/zh_CN/out/classes/LBitmapData.html
7. LTextField：http://lufylegend.com/api/zh_CN/out/classes/LTextField.html
8. LButton：