HTML5游戏实战 3 60行代码实现水平跑酷游戏

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               

跑酷游戏无疑是目前最受欢迎的游戏类型之一,3D跑酷游戏可能比较难做一点(这个我不懂),2D跑酷却是非常容易的,只要有美术资源,做一个《天天酷跑》这类流行游戏也并非是什么难事。 这里通过一个松鼠跑酷的游戏介绍一下用Gamebuilder+CanTK开发游戏的方法,这个游戏的主场景仅用了60来行代码。

CanTK(Canvas ToolKit)是一个开源的游戏引擎和APP框架,是开发HTML5游戏和APP的利器,如果你喜欢它,请在github上给它加星,您的支持是我们努力的动力:https://github.com/drawapp8/cantk

0.先Show一下最终成果:

在线运行:http://gamebuilder.duapp.com/apprun.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-951412475814586

在线编辑:http://gamebuilder.duapp.com/gamebuilder.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-951412475814586

1,新建一个项目,删除场景里的球和地面,把手机设置成横屏

设置场景的物理引擎参数,把Y方向的重力设置为50,像素和米之间的比例为50:

设置场景的背景图片:

设置场景的虚拟宽度:

2,在场景中放入一张图片,用它来创建一条路径。

效果如下:

通过拷贝粘贴,并使用不同的图片,生成一条完整的路径(拖动场景可以查看场景的全部视图)。

3,前面放置的图片路径,纯粹是为了达到视觉上的效果,物理上的效果还需要放置刚体来实现。
让刚体在运行时不可见:

设置刚体的物理属性,不要弹力和摩擦力。

效果如下:

4,在场景中放一个图片文字,用来表示分数。

5,在场景中放一个帧动画,用来表示榛子。

设置它的物理参数:

通过拷贝粘贴生成一系列榛子。

6,在场景中放一个帧动画,用来表示松鼠。

在这个帧动画里放一个多边形,让它运行时不可见:

设置它的物理参数:

7,在场景中放几个静态刚体,用来检测松鼠是否掉下去了。

8,在场景中放一个静态刚体,用来检测松鼠是否到家了。

界面上的工作及基本上OK了。作为一个程序员来说调整游戏界面可能有些单调,这时不妨把自己想象成产品经理或者UI设计师吧。

9,现在我们来写程序。

在场景的onOpen事件中:

//初始化游戏this.initGame = function() {    for(var i = 0; i < this.children.length; i++) {        var iter= this.children[i];        if(iter.name === "ui-acorn") {            iter.setFrameRate(30).play("normal", 100000);        }    }//设置松鼠的初速度,先播放jumpdown,再播放run    var squirrel = this.find("ui-squirrel", true);    squirrel.nutBonus = 0;    squirrel.setV(10, 20);    squirrel.play("jumpdown", 1, function() {        squirrel.play("run", 1000);    });}//对话框关闭时重新开始游戏。this.onDialogClose = function(retInfo) {    this.replay();    this.initGame();}this.initGame();

在场景的onPointerUp事件中,给松鼠一个向上的速度,播放jumpup动画:


var squirrel = this.find("ui-squirrel", true);var vy = squirrel.jumpingUp ? -6 : -22;squirrel.setV(4, vy).play("jumpup", 2, function() { squirrel.play("run", 10000); });  squirrel.jumpingUp = true;

在松鼠的onBeginContact(碰撞)事件中:

var win = this.getWindow();var element = body.element;function onDialogClose(retInfo) { win.onDialogClose(retInfo);}switch(element.name) {    case "ui-acorn": {//在榛子撞到后,增加分数,并播放消失的动画,然后移除榛子。        this.nutBonus++;        element.play("dispear", 1, function() {win.removeChild(element);});        break;    }    case "ui-target": {//在到达目的地后,显示分数对话框。关闭对话框重新开始游戏。        var info = {levelScore:Math.round(this.x/100) * 100, nutBonus:this.nutBonus*100};        win.openWindow("win-success", onDialogClose, false, info);        this.setEnable(false);        break;    }    case "ui-failed": {//在掉下后,显示分数对话框。关闭对话框重新开始游戏。        var info = {levelScore:Math.round(this.x/100) * 100, nutBonus:this.nutBonus*100};        win.openWindow("win-failed", onDialogClose, false, info);        this.setEnable(false);        break;    }    default: {//落地时,设置向右的速度。        this.jumpingUp = false;        this.setV(8);        break;    }}

在松鼠的onMoved事件中,移动场景的视图,并显示总分数。

var win = this.getWindow();win.setOffset(this.x - 200, this.y - 200);var score = win.find("ui-score");var distance = Math.round((this.x / 100)) * 100;var totalScore = distance + this.nutBonus * 100;score.setText(totalScore);

游戏中还有几个对话框,它们都很简单,做好一个后拷贝粘贴生成,然后界面做些调整就好了,为了不让文章太长。关于对话框的使用,在单独的文章中介绍吧。

谢谢阅读,欢迎任何建议和反馈。

参考资料:

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

           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

这里写图片描述

猜你喜欢

转载自blog.csdn.net/jggyff/article/details/83856207