html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟

《html5游戏开发-愤怒的小鸟-开源讲座(二)-跳入弹出的小鸟》

《html5游戏开发-愤怒的小鸟-开源讲座(三)-跳入弹出的小鸟》

愤怒的小鸟是一款人气火爆的益智游戏，现在我试着用lufylegend库件和Box2dWeb物理引擎来看看在html5中如何制作此类经典的物理游戏。

准备工作一

首先，你需要下载lufylegend库件1.4.1版

/article/1360488.html

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

做好了了上面的准备工作，现在就来跟着笔者来一步步的试一下吧。

一，旋转飞起的小鸟

首先来建一个小鸟

[javascript] view
plaincopy

function Bird(){

base(this,LSprite,[]);

var self = this;

var bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));

self.addChild(bitmap);

}

有了这个类，我们把它显示到画面上就很简单了

[javascript] view
plaincopy

backLayer = new LSprite();

addChild(backLayer);

bird = new Bird();

bird.rotate = 0;

bird.x = 200;

bird.y = 430;

bird.yspeed = -5;

backLayer.addChild(bird);

玩过愤怒的小鸟的朋友们都知道，游戏开始时，小鸟跳上弹弓的时候有一个旋转动作，我现在通过lufylegend库件的LTweenLite缓动类来实现这一功能。

[javascript] view
plaincopy

LTweenLite.to(bird,1,

{

x:100,

yspeed:5,

delay:1,

rotate:-360,

onUpdate:function(){

bird.y += bird.yspeed;

},

onComplete:function(){

start();

},

ease:Sine.easeIn

}

);

通过上面的代码可以看到，LTweenLite类不但可以改变一些LSprite对象的常用属性，其实可以改变任意自定义的属性，上面就是通过LTweenLite将yspeed由-5变到了，然后通过onUpdate来改变小鸟的y坐标。

下面是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample02/index.html



二，弹出的小鸟

接下来在小鸟弹起后的位置加上一个弹弓

[javascript] view
plaincopy

bitmap = new LBitmap(new LBitmapData(imglist["slingshot1"]));

bitmap.x = 215;

bitmap.y = 290;

backLayer.addChild(bitmap);

bird = new LSprite();

bird.name = "bird01";

backLayer.addChild(bird);

bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));

bird.addChild(bitmap);

bitmap = new LBitmap(new LBitmapData(imglist["slingshot2"]));

bitmap.x = 190;

bitmap.y = 290;

backLayer.addChild(bitmap);

效果如图



上面代码将弹弓的前后两个分叉加到了画面上。

接着通过鼠标来拖拽小鸟，首先加入鼠标按下事件

[javascript] view
plaincopy

backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,downStart);

startX = bird.x + bird.getWidth()*0.5;

startY = bird.y + bird.getHeight()*0.5;

上面代码加上了鼠标事件，并记录下了小鸟中心的位置作为弹弓的中心位置。

然后当鼠标按下的时候，判断下鼠标是否点击到了小鸟，然后移除鼠标按下事件，并加入鼠标移动事件和鼠标弹起事件。

[javascript] view
plaincopy

function downStart(event){

if(event.offsetX > bird.x && event.offsetX < bird.x + bird.getWidth() &&

event.offsetY > bird.y && event.offsetY < bird.y + bird.getHeight()){

backLayer.removeEventListener(LMouseEvent.MOUSE_DOWN,downStart);

backLayer.addEventListener(LMouseEvent.MOUSE_MOVE,downMove);

backLayer.addEventListener(LMouseEvent.MOUSE_UP,downOver);

}

}

先来实现下鼠标移动时候的，让小鸟跟随鼠标

[javascript] view
plaincopy

unction downMove(event){

var r = Math.sqrt(Math.pow((startX - event.selfX),2)+Math.pow((startY - event.selfY),2));

if(r > 100)r = 100;

var angle = Math.atan2(event.selfY - startY,event.selfX - startX);

bird.x = Math.cos(angle) * r + startX - bird.getWidth()*0.5;

bird.y = Math.sin(angle) * r + startY - bird.getHeight()*0.5;

}

解释下上面的代码，首先，计算鼠标位置和弹弓的中心位置之间的距离，当距离大于100的时候，使其等于100。接着计算鼠标拖拽的角度，然后通过这个角度来计算并设置小鸟的坐标。

接着，看一下鼠标弹起后的功能，上面的代码里并没有用到box2dweb，我通过将小鸟变为box2d刚体，然后给小鸟加上一个力，来让小鸟弹飞出去。

[javascript] view
plaincopy

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