憤怒的小鳥是一款人氣火爆的益智遊戲，現在我試著用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 Bird(){
base(this,LSprite,[]);
var self = this;
var bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));
self.addChild(bitmap);
}有了這個類，我們把它顯示到畫面上就很簡單了
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緩動類別來實現此功能。
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
#二，彈出的小鳥
#接下來在小鳥彈起後的位置加上一個彈弓
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);
效果如圖
上面程式碼將彈弓的前後兩個分叉加到了畫面上。
接著透過滑鼠來拖曳小鳥，首先加入滑鼠按下事件
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,downStart); startX = bird.x + bird.getWidth()*0.5; startY = bird.y + bird.getHeight()*0.5;
上面程式碼加上了滑鼠事件，並記錄下了小鳥中心的位置作為彈弓的中心位置。
然後當滑鼠按下的時候，判斷下滑鼠是否點擊到了小鳥，然後移除滑鼠按下事件，並加入滑鼠移動事件和滑鼠彈起事件。
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);
}
}先來實現下滑鼠移動時候的，讓小鳥跟隨滑鼠
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刚体，然后给小鸟加上一个力，来让小鸟弹飞出去。
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
本次就写到这里，在下一讲中会加入碰撞功能，并且让镜头时刻跟随小鸟，敬请期待。
以上就是html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！
