html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟
愤怒的小鸟是一款人气火爆的益智游戏,现在我试着用lufylegend库件和Box2dWeb物理引擎来看看在html5中如何制作此类经典的物理游戏。
准备工作一
首先,你需要下载lufylegend库件1.4.1版
http://blog.csdn.net/lufy_legend/article/details/7751425
box2dweb你可以到这里下载
http://code.google.com/p/box2dweb/downloads/list
关于lufylegend库件的使用方法,大家可以看一下我以前的一些文章和教程,或者看下面的api说明。
http://lufy.netne.net/lufylegend-js.php?v=api
准备工作二
由于笔者的失误,没有将Box2dWeb的功能封转完,要制作物理游戏的话,不得不对lufylegend-1.4.1做一些扩展,大家可以下载这个扩展文件,等下次库件的1.5版发布的时候会将这些扩展加进去的。
http://fsanguo.comoj.com/download.php?i=lufylegend-1.4.1.extension.js
做好了了上面的准备工作,现在就来跟着笔者来一步步的试一下吧。
一,旋转飞起的小鸟
首先来建一个小鸟
二,弹出的小鸟
接下来在小鸟弹起后的位置加上一个弹弓
function downOver(event){backLayer.removeEventListener(LMouseEvent.MOUSE_UP,downOver);backLayer.removeEventListener(LMouseEvent.MOUSE_MOVE,downMove);var startX2 = bird.x + bird.getWidth()*0.5;var startY2 = bird.y + bird.getHeight()*0.5;var r = Math.sqrt(Math.pow((startX - startX2),2)+Math.pow((startY - startY2),2));var angle = Math.atan2(startY2 - startY,startX2 - startX);bird.addBodyCircle(bird.getWidth()*0.5,bird.getHeight()*0.5,bird.getWidth()*0.5,1,.5,.4,.5);var force = 7;var vec = new LGlobal.box2d.b2Vec2(-force*r*Math.cos(angle),-force*r*Math.sin(angle));bird.box2dBody.ApplyForce(vec, bird.box2dBody.GetWorldCenter());}上面代码首先计算了一下小鸟的被拖拽的距离,以及被拖拽的角度。addBodyCircle给小鸟加入body,让其变为一个刚体。
ApplyForce给刚体加上一个力。
好了,点开下面链接进行测试,通过拖拽小鸟,将小鸟弹飞出去吧。
http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample02/index02.html
下面给出本次教程的源码,当然,lufylegend库件和box2dweb需要自己下载配置一下
http://fsanguo.comoj.com/download.php?i=AngryBirds1.rar
本次就写到这里,在下一讲中会加入碰撞功能,并且让镜头时刻跟随小鸟,敬请期待。