html5遊戲開發-憤怒的小鳥-開源講座(一)-跳入彈出的小鳥

http://blog.csdn.net/lufy_legend/article/details/7804165

憤怒的小鳥是一款人氣火爆的益智遊戲，現在我試着用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

本次就寫到這裏，在下一講中會加入碰撞功能，並且讓鏡頭時刻跟隨小鳥，敬請期待。