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

本次就写到这里，在下一讲中会加入碰撞功能，并且让镜头时刻跟随小鸟，敬请期待。
9楼yangxin114昨天 17:17
继续来学习，刚刚接触游戏开发，前来吸取经验~n楼主V5~
8楼lwgreatperson昨天 15:55
bucuo
Re: lufy_Legend昨天 16:23
回复lwgreatpersonnduoxiezhichi
7楼caoruifang1990昨天 13:42
很好！借鉴啦。
Re: lufy_Legend昨天 15:37
回复caoruifang1990n多谢支持
6楼td_dingo昨天 20:59
虽然我不做这个，但是看起来很不错，支持一下
Re: lufy_Legend昨天 11:49
回复td_dingon多谢支持
5楼a67251026昨天 18:13
终于出新文章了~  期待下篇~
Re: lufy_Legend昨天 20:46
回复a67251026n多谢支持
4楼yangxin114昨天 17:57
楼主，问个与本题无关的游戏常识。n不知如何快速确认图片中各部分的坐标...因为素材是网上下载的n比如很多小鸟在同一个图片里，如何快速确定各个小鸟图片的起始坐标和大小呢？n有没有工具方便一点的，每次用鼠标画矩形画的我要崩溃了
Re: lufy_Legend昨天 18:11
回复yangxin114n用photoshop可以看坐标的，鼠标放到图片上就可以显示鼠标相对于图片的坐标了
3楼yezi_1983昨天 17:31
很好 期待下一篇
2楼haxer昨天 14:57
虽然看不懂，但还是支持。
Re: lufy_Legend昨天 15:48
回复haxern主要是我也不能每次都把库件的使用方法说一遍，看一看我以前的文章应该就能懂了
1楼zwxcatcat昨天 14:46
很好 期待下一篇