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的抽象，其中的一些理解上的细节须要读者狠下一番功夫了，先详细解释一下伪代码中红字部分的意思。