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

標籤：

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

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

其中game.js是遊戲主程式，option.js是遊戲設定檔，util是我們的通用工具庫函數。

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

var flappy = (function (self) {    ‘use strict‘;//開啟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的抽象，其中的一些理解上的細節需要讀者狠下一番功夫了，先詳細解釋一下虛擬碼中紅字部分的意思。

 

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