码迷,mamicode.com
首页 > 移动开发 > 详细

HTML5APP实战(1): 围住神经猫(二)

时间:2015-03-01 21:04:51      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:html5   神经猫   web   

     之前的文章分析了围住神经猫游戏的"偶然性",这篇文章主要介绍通过Gamebuilder + CanTk来完成整个游戏的设计开发。

    1.新建项目删除场景中的球和草地,并放置背景图片,和猫移动的方块:

     技术分享

    这里场景的背景图和猫移动的圆圈均是简单的Label图片。


    2.放置一个帧动画来表示猫

   技术分享

    猫从蹲下到站立一共有16个状态,点击选择图片来进行图片的拆分。

    3.放置游戏开始的界面图片:

    技术分享

    点击开始游戏的时候隐藏该控件并把帧动画显示出来:

    技术分享

    Gamebuilder提供了非常人性化的代码编辑工具,而且极大的降低了非程序员的游戏开发难度,几乎不需要几行代码,你就能完成复杂的操作逻辑:)

    4.接下来在场景窗口的Onopen事件处理函数里面实现主要的程序逻辑:

    技术分享

    这部分代码较多,主要是最短路径和最大通路算法的实现,这不在我们的讨论范围内,需要的可以去在线编辑界面的场景Onopen事件处理中找到。

    5.最后在游戏结束界面放置一张图片,以便重新开始游戏:

    技术分享

    实现当用户点击"再来一次"游戏的逻辑:

    技术分享

    

    到这里整个围住神经猫游戏基本结束了。就是这样一款简简单单的小游戏,风靡了整个微信圈子。还被人吹的神乎其神。我相信借用Gamebuilder+CanTK这套神器,下次引爆微信圈子的小游戏,会出自你之手:)

    参考资料:

    https://github.com/drawapp8/gamebuilder/wiki/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3


HTML5APP实战(1): 围住神经猫(二)

标签:html5   神经猫   web   

原文地址:http://blog.csdn.net/gentlycare/article/details/44004843

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!