H5游戏开发实战之 - 忍者跳跃
这是一款快节奏的攀爬游戏，游戏目标是不断的攀高，途中会遇到敌方忍者、生气的飞鸟、同时要避开屋角障碍，点屏幕时忍者会从墙的一头跳到另一头，进行躲避和击杀。
先Show一下最终的成果
在线运行
在线编辑
游戏用到的js代码只有几百行。
下面我们就用 所见即所得 WYSIWYG 的方式，画出游戏的界面。
准备工作
1、申请一个云盘帐号，百度、又拍、新浪都可以；
2、chrome(或firefox)地址栏输入七巧板在线IDE网址：http://osgames.duapp.com/，并登录（文件->登录）；
3、游戏使用的图片上传到云盘；工具->打开资源管理器，然后上传
制作忍者奔跑界面
屏幕分辨率设置为320x480
点击屏幕的周边，选中设备，对设备的特有属性做如下设置
再打开菜单“选项-项目设置”，做如下设置
场景
删除场景中默认的球体和地面，然后设置背景图片，再对场景特有属性做如下设置：
1. y方向重力 = 0
2. 虚拟高度 = 48000
左墙壁
拖放一个静态方块到场景中，按以下设置背景图片，设置位置和大小：
线条颜色改为透明；
把物理引擎属性中默认的摩擦和弹力系数改为 0；名称改为 ui-box-left
右墙壁
对左墙壁进行复制/粘贴，得到相同的一个墙壁，名称改为ui-box-right，然后在通用属性中勾选“左右翻转”，位置属性改为“在父控件的右边”
忍者
方块
拖放一个方块到场景中，把物理引擎属性中默认的摩擦和弹力系数改为 0，密度设为1；
名称改为 renzhe；
帧动画
拖放一个帧动画到忍者方块位置以内(使之嵌入为方块的子对象)，名称改为anim，在帧动画特有属性设置界面中，先“清除图片”，然后设置以下图片到列表中：
并对其进行分组命名，比如红框部分命名为 run_left，其余几个分组依次为：run_right、jump_l2r、jump_r2l、clound，当忍者处于各状态时将播放对应的动画；
再对位置大小做如下设置
再修改方块的大小为56x56，线条颜色为透明
防护罩
拖放一个图片到忍者帧动画位置以内(成为帧动画的子对象)，名称改为pp-child，设置好图片和位置大小；
现在忍者的形象是这样的：
组合关系->
最外层的renzhe是方块，中间的anim是帧动画，最内层的pp-child是图片
随机对象
忍者上跑过程会随机产生以下对象：飞鸟、、防护罩、敌方忍者、屋角；这些对象是左右都有，所以都是成对的。
飞鸟
拖放一个方块到场景中，设置物理引擎属性的弹力和摩擦里为0，密度为1，线条设为透明；
再拖放一个帧动画到方块中，清除列表中的默认单并选择加入飞鸟动画对应的图片文件，根据图片大小设置好对象大小，同时设置好其父控件方块的大小，并把方块命名为 bird-l；
复制粘贴得的另一个飞鸟对象，通用属性中勾选左右翻转，名称改为bird-r，然后调整好位置。
敌方忍者
制作方式类似飞鸟，做2个：enemy-l 和 enemy-r
屋角
制作方式类似飞鸟，做2个：angle-l 和 angle-r
防护罩
制作方式类似飞鸟，做2个：pp-l 和 pp-r
辅助对象
以下对象，都要在通用属性中勾选“不随场景滚动”
能量光柱
帧动画 juezhao；
每次击杀，能收集到1片羽毛，集满3片羽毛引发一次能量光柱的释放，释放过程中忍者3倍加速上跑；
记分牌
图片对象score-bkg，并内嵌一个图片字体对象score
羽毛
2个图片对象 ym1和ym2
暂停按钮
图片对象 pause
新高分旗帜
图片对象 new-highscore
音效
音效对象 ui-sound-effects，在音效对象特殊属性中，添加多个游戏过程中使用的音效文件
界面 绘制 好了，现在看到场景是这样的：
事件处理代码
忍者：碰撞开始事件
this.getWindow().controller.rzOnContact(body);
忍者：刚体移动事件
this.getWindow().controller.rzOnMoved();
暂停按钮：点击事件
this.getWindow().controller.handlePause();
场景：点击事件
this.getWindow().controller.handleJump();
场景：窗口打开前事件
this.resetGame();
场景：窗口打开事件
代码在此
其他界面
再加上：暂停界面、游戏结束时的分数显示界面、游戏方法提示界面、入口界面；
一个完整的忍者跑酷游戏就制作好了。
改进
如果再增加碰撞的粒子特效，游戏道具以及成就勋章，这款游戏的可玩性将更强；使用七巧板在线IDE，实现这些都不难，比如粒子特效都不用写代码就能做到，以后有时间再写吧！