HTML5游戏实战 1 50行代码实现正面跑酷游戏
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
前段时间看到一个“熊来了”的HTML5跑酷游戏，它是一个典型的正面2D跑酷游戏，这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法。
CanTK(Canvas ToolKit)是一个开源的游戏引擎和APP框架，是开发HTML5游戏或者APP的利器，如果你喜欢它，请在github上给它加星，您的支持是我们努力的动力：https://github.com/drawapp8/cantk
Gamebuilder是一个在线开发HTML游戏或者APP的集成开发环境，目标是让开发游戏和玩游戏一样简单和有趣。
0.先Show一下最终成果:
在线运行：http://gamebuilder.duapp.com/apprun.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-41416104149375
在线编辑：http://gamebuilder.duapp.com/gamebuilder.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-41416104149375
1，先新建一个项目，删除场景里的球和地面，然后设置场景的物理引擎参数，把X/Y方向的重力设置为0。
2，再向场景中放入一个帧动画控件，用作游戏的背景。
设置它的图像显示方式为“缩放”：
设置它的宽度和高度属性为“填充父控件”：
给它指定一组图片：
得到下面的效果图：
3，再向场景中放入一个帧动画控件，用来显示榛子。
给它指定一组图片，并设置其名称和帧率等属性：
启用它的物理引擎：
4，再向场景中放入一个帧动画控件，用来显示石头。
给它指定一组图片，并设置其名称和帧率等属性：
启用它的物理引擎：
5，再向场景中放入一个帧动画控件，用来显示熊。
给它指定一组图片，并设置其名称和帧率等属性：
启用它的物理引擎：
6，再向场景中放入一个帧动画控件，用来显示人。
给它指定一组图片，并设置其名称和帧率等属性：
启用它的物理引擎：
7，再向场景中放入一个图片文字控件，用来显示总分数。
8，再向场景中放入一个图片文字控件，用来显示单次分数。
9，界面构建完成了，效果如下：
现在我们来写代码：
在场景的onOpen事件中定义几个函数：
var nut = this.find("ui-nut");var win = this;var totalScore = 0;var nut, stone, man, bear, delta, total;//左右移动人物this.handlePointerMove = function(point) { var x = Math.max(Math.min(point.x, win.w * 0.8), win.w * 0.2); man.setPosition(x, man.y);}//处理人物与榛子和石头的碰撞事件this.handleOnBeginContact = function(body) { var el = body.element; var score = el.name == "ui-nut" ? 1000 : -600; var x = man.x + ((man.w - delta.w)>>1); totalScore += score; delta.setText(score).setVisible(true).setPosition(x, man.y); var config = {yEnd: delta.y-100, opacityStart:1, opacityEnd:0.2, scaleStart:1, scaleEnd:0.2, duration:500, onDone: function() {delta.setVisible(false);total.setText(totalScore);}}; el.play("dispear", 1, function() { el.setVisible(false).setPosition(0, 0).setV(0, 0);}); delta.animate(config);}//初始化游戏this.initGame = function() { totalScore = 0; nut = this.find("ui-nut"); stone = this.find("ui-stone"); man = this.find("ui-man"); bear = this.find("ui-bear"); delta = this.find("ui-delta-score"); total = this.find("ui-total-score"); nut.setVisible(false); stone.setVisible(false); function generateObj() { var random = Math.random(); var obj = random < 0.5 ? nut : stone; obj.setVisible(true).setPosition(win.w >>1, win.h).setV(0, -5).play("normal", 10000); totalScore += 500; setTimeout(generateObj, 1000); } generateObj();}this.initGame();
在人物的onBeginContact事件中调用前面的函数handleOnBeginContact：
this.getWindow().handleOnBeginContact(body);
简单吧，我们用了不足50行代码就实现了这个游戏的主体部分。
参考资料：https://github.com/drawapp8/gamebuilder/wiki/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3