flappy pig小遊戲源碼分析(4)——核心pig模塊(未完待續)

熱身以後，咱們要動點真格的了，遊戲叫flappy pig，咱們的pig終於要出場了。

老規矩，看看目錄結構，讀者對着目錄結構好好回想咱們已經講解的幾個模塊：

其中game.js是遊戲主程序，option.js是遊戲配置文件，util是咱們的通用工具庫函數。

那麼pig是什麼呢，咱們先上源碼：

---

var flappy = (function (self) {
    'use strict';//開啓嚴格模式 var option = self.option,//把前面添加好的option拿出來
        $ = self.util.$;//把前面添加好的util的選擇器拿出來

    //豬
    self.pig = {//給flappy對象添加一個pig屬性
        Y: 0, //豬當前高度（底邊）
        init: function (overCallback, controller) {//豬的初始方法
            var t = this;//

            t.s = 0, //初始化小豬的位移
            t.time = 0, //初始化小豬的位移時間
            t.$pig = $('pig');//獲取頁面中的小豬對象
            t.$pig.style.left = option.pigLeft + 'px';//設置頁面中小豬距離左邊的位置
            t._controller = controller;//將控制者傳入

            t._addListener(overCallback);//添加監聽函數,執行的結果等價於t._overCallback = overCallback
        },
        //添加監聽
        _addListener: function (overCallback) {
            this._overCallback = overCallback;
        },
        //啓動
        start: function () {
            var t = this,
                interval = option.frequency / 1000;//用20/1000

            t.s = option.v0 * t.time -t.time * t.time * option.g*2; //這裏是小豬的運動軌跡公式，讀者看不懂不要緊，稍後會詳細解釋
            t.Y = option.pigY + t.s;//當前高度等於以前的高度+跳起的高度
            if (t.Y >= option.floorHeight) {//判斷，若是豬的當前高度比地板的高度大
                t.$pig.style.bottom = t.Y + 'px';//那麼就移動豬
            } else {
                t._dead();//不然就摔死了
            }
            t.time += interval;//累加時間
        },
        //跳
        jump: function () {//小豬的跳躍方法
            var t = this;//獲取小豬對象

            option.pigY = parseInt(t.$pig.style.bottom, 10);//將字符串解析爲一個十進制整數，並賦值給配置項中pigY
            t.s = 0;//將跳躍位移設爲0
            t.time = 0;//將time設爲0
        },
        //撞到地面時觸發
        _dead: function () {
            this._overCallback.call(this._controller);//當_dead函數觸發時，執行this._overCallback函數，並將其中的this指向this._controller
        },
        //撞到地面的處理
        fall: function () {
            var t = this;//獲取小豬對象

            //摔到地上，修正高度
            t.Y = option.floorHeight;//小豬對象的Y軸設置爲地板高度
            t.$pig.style.bottom = t.Y + 'px';//設置dom位置，也就是把Y值加上‘px‘變成字符串
        },
        //撞到柱子的處理
        hit: function () {
            var t = this;//獲取小豬對象

            //墜落
            var timer = setInterval(function () {
                t.$pig.style.bottom = t.Y + 'px';//更新小豬DOM的位置
                if (t.Y <= option.floorHeight) {//當小豬的位置小於等於地板高度時
                    clearInterval(timer);//取消定時器
                }
                t.Y -= 12;//小豬高度遞減12
            }, option.frequency);//每20毫秒執行一次
        }
    };

    return self;//返回添加好的flappy對象，以前是flappy = {options:{xxx},util:{xxx}}，如今是flappy = {options:{xxx},util:{xxx},pig:{xxx}}

})(flappy || {})

嗯相信不少同窗看完上面的源碼可能會暈車，我盡力帶你們理清思緒的。

首先化零爲整，這是讀源碼一項必備的技能，咱們用僞代碼理一下做者幹了些啥：

var flappy = (function(self){

獲取配置項

獲取工具庫

給flappy對象添加一個pig對象，其中pig對象的具體屬性和方法是這樣的{

　　Y：表明豬距離地板的高度，

　　init：初始化方法，對頁面中的小豬對象進行一些初始設置，如開始位置等

　　_addListener:給pig對象添加監聽函數

　　start:表示讓小豬開始移動，讓小豬按照必定運動公式開始運動，並判斷小豬是否摔死

　　jump:小豬有一個跳動的方法,調用jump方法時用頁面中小豬的實際位置值重置配置文件option.js中的pigY，同時重置pig.s爲0，time爲0

　　_dead:執行傳入的overCallback函數，這裏注意必定要是call或者apply將函數中的this指向controller，還記得主程序中怎麼傳入這兩個參數的嗎，看game.js中的這麼一句話：

其中t.fall也就是game模塊的fall方法，這個方法還記得嗎，第一節中咱們講過，他是這樣的：

 

另一個參數t也就是game對象了，那麼這裏_dead方法中this._overCallback.call(this._controller)就至關於執行上面圖中的這個fall方法，其中的this指向game對象。因此一旦調用pig._dead()方法，則遊戲結束，而後調用pig.fall()方法，讓小豬躺在地板上，不然小豬會距離地板還有一小段距離。

　　fall:讀者能夠嘗試去掉game.fall()中的pig.fall()這一句試試，天然就明白這句話的意義了

　　hit:小豬有兩種死法(原諒筆者只能用這個說法了)，一是掉在地上摔死了，另外一種是在柱子上撞死了，hit方法就是處理小豬被撞死的狀況的，當調用pig.hit()時，每20毫秒讓小豬的Y值減去12，並賦值給DOM對象的bottom值來實際控制小豬的移動，直到小豬躺在地板上。

})(flappy || {});

以上是對pig的抽象，其中的一些理解上的細節須要讀者狠下一番功夫了，先詳細解釋一下僞代碼中紅字部分的意思。