热身之后,我们要动点真格的了,游戏叫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的抽象,其中的一些理解上的细节需要读者狠下一番功夫了,先详细解释一下伪代码中红字部分的意思。