使用HTML5制作爱消除的网页游戏

作者:课课家教育更新于： 2016-08-19 09:00:52

　　其实HTML5真是一个强大的软件，我们来说下HTML5未来的两大趋势吧。

　　①：移动优先

　　从如今层出不穷的移动应用就知道，在这个智能手机和将平板电脑大爆炸的时代，移动优先已成趋势，不管是开发什么，都以移动为主。

　　②：游戏开发者领衔“主演”

　　因为许多游戏开发商都被Facebook或者Zynga推动着发展，而未来的Facebook应用生态系统是基于HTML5的，尽管在HTML5平台开发出游戏非常困难，但是游戏开发商却都愿意那么做。通过PhoneGap及appmobi的XDK将Web应用游戏打包整合到原生应用中也是一种方式，不过Facebook差不多就这么干的——基于Web应用及浏览器，但却将之打包整合进原生应用。

　　接下来我们课课家教育将为大家带来的是：HTML5教程—制作网页小游戏。因为考虑到大家是新手的原因，所以大型的游戏，我们课课家教育官网课程里有，这个只是为了锻炼新手和方便大家了解而推出的课程，希望大家能够多多支持，谢谢大家。本文档要分析的案例是一个爱消除的网页小游戏，从中可以体会一些MugedaAPI的用法和使用Mugeda动画制作网页游戏的方法。

　　步骤①：首先我们就要确定游戏规则：

　　1、开始游戏时，我们的手机出现在最上面一行的任意一格；

　　2、开始游戏时，里面的彩色石头随机从上往下落，而且填满所有的方框，相同的三个石头不能相邻的排在一列或者一行；

　　3、当手机从上移动到最下面一行的任意一格，那么就算胜利，或游戏时间结束，消除的石头数量超过30个也算胜利。

　　步骤②：接下来我们要学习游戏的玩法

　　当我们只要三个相同的石头相邻的排在一列或者一行，他们就会消失，同时上面的石头往下落，落到消失的石头位置上。

　　接着我们来说一下我们的设计思路：

　　当游戏开始的时候，首先要生成一个8*8=64的石头阵列，而且会从上到下一次落下。并且阵列的石头会存放到一个数组中。而且我们要确定每个石头都有相应的类型。

　　当我们对石头对象添加inputstart、inputend事件监听。实现点击输入和拖动输入。当有有效输入时，交换对应的两个相邻的石头。等待检测时发现是否会形成消掉石头的条件，如果没有则再交换回来。

　　而且游戏开始后，我们会在每帧都调用一次runcheck()函数来检测是否有生成消掉石头的条件。检测的方式是：首先按行遍历一遍数组，看有没有连续超过三个相邻石头的类型是相同的。然后再按列遍历一遍数组，看有没有连续超过三个相邻石头的类型是相同的。如果有，则将相同的石头消除，并且生成新的石头，并从上到下依次落下。

　　关键点（这里就是要编辑的程序代码了）：

　　步骤③：生成新的石头对象（输入代码），如下图：

　　步骤④：输入函数参数，如下图:

　　步骤⑤：消除石头的代码，（如下图）

　　步骤⑥：生成新的石头对象的代码（如下图）

　　总结：其实我们可以通过设计一个简单的小游戏从而可以更深刻的理解MugedaAPI的用法。但是其实具体用到的API接口请参考[MugedaHTML5技术教程之11]MugedaAPI简介。有关游戏的逻辑则因人而异，这里不做具体讨论，建议是做的过程先易后难，其实我们需要先做最简单的游戏充分熟悉了MugedaAPI的用法后，我们才可以再制作稍微复杂的游戏。

　　小编结语：相信大家看完之后，都会觉得这并不难吧，尽管我们可能感觉到自己的能力不足，但我相信你按照步骤来操作的话，那么你一定能够掌握，如果你有兴趣，你也可以自己尝试一下的，最重要的是千万不要粗心而忘记了其中的步骤。最后感谢大家支持我们课课家教育，如果大家还想了解更多更精彩的教程，那么欢迎继续关注我们课课家教育，我们将为大家带来更多更精彩的教育咨询。