GameBuilder開發遊戲應用系列之60行代碼實作FlappyBird

線上示範：http://osgames.duapp.com/apprun.html?appid=osgames1-911422256817006

線上編輯：http://osgames.duapp.com/gamebuilder.php?appid=osgames1-911422256817006

微信掃描：

運作截圖：

FlappyBird是2014年爆紅的一款遊戲，屬于經典的重力感應遊戲，玩法非常簡單同時又非常虐心，正是這樣的特點讓FlappyBird得以在社交網絡病毒式的傳播。

GameBuilder內建了Box2d實體引擎，開發這一類的重力感應遊戲屬于他的看家本領。

用GameBuilder實作的FlppyBird總共隻需要60行代碼，主要實作了管子在垂直方向上的随機分布（水準方向位置是固定的），當然你可以自己擺管子，那樣的話，可能隻要10行代碼就搞定了。

遊戲主要包括兩方面：

水準布管

螢幕的虛拟寬度設定為100000像素，隻放置上下各四根管子，如下圖：

小鳥越過（螢幕左邊）的管子重新設定到小鳥前面（螢幕右邊）。

• 位置生成函數

win.initPList = function() {
    var x, y;
    for(var i = ; i < ; i++) {
        var position = {x:, y:};
        x =  + i*;
        y = win.randomY();
        position.x = x;
        position.y = y;
        win.pList.push(position);
    }
};
           

• 更新位置清單

win.updatePList = function() {
    var win = this.getWindow();
    var bird = win.find("bird");
    //小鳥越過管子後，播放音效，加分
    if(bird.x > win.nextScoreX) {  
        win.nextScoreX += ;
        win.find("effects").play("disappear.mp3");
        win.score += ;
        win.find("score").setText(win.score);
    }
    //最左側管子移出螢幕外時，将其挪到右邊
    if(win.pList[].x - this.xOffset < - ) {
        var p = win.pList.shift();
        p.x = win.pList[].x + ;
        p.y = win.randomY();
        win.pList.push(p);
    }
};
           

• 定時根據位置清單更新管子位置

win.updateBox = function() {
    win.updatePList();
    for(var i = ; i < ; i++) {
        win.find("boxup" + i).setPosition(win.pList[i].x, win.pList[i].y);
        win.find("boxdown" + i).setPosition(win.pList[i].x, win.pList[i].y + );
    }
    setTimeout(win.updateBox, );
};
           

碰撞檢測

在遊戲中，小鳥作為一個剛體，在遊戲中一直需要保持懸空，一旦有碰撞就視遊戲結束，是以隻要實作小鳥的onBeginContact事件接口即可。

事件代碼：

var win = this.getWindow();
if(!win.gameOver) {
    win.gameOver = true; 
    win.find("bird").setV(, );
    win.openWindow("win-result", function(ret) { win.restartGame();}, false, win.score);
}