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

flappy pig小游戏源码分析(4)——核心pig模块(未完待续)的更多相关文章

  1. flappy pig小游戏源码分析(1)——主程序初探

    闲逛github发现一个javascript原生实现的小游戏,源码写的很清晰,适合想提高水平的同学观摩学习.读通源码后,我决定写一系列的博客来分析源码,从整体架构到具体实现细节来帮助一些想提高水平的朋 ...

  2. flappy pig小游戏源码分析(3)——解剖util

    这一节我们继续高歌猛进,如果对源码中有无论无何都理解不通的问题,欢迎和我交流,让我也学习一下,我的qq是372402487. 还是按照惯例看看我们的目录结构. 我们在前两节中已经分析了game.js, ...

  3. flappy pig小游戏源码分析(2)——解剖option

    今天继续分析flappy bird的源码.重温一下源码的目录结构. 在本系列第一篇中我们分析了game.js文件,也就是整个程序的架构.这一篇我们来看看option.js文件,这个文件的内容很简单,主 ...

  4. xss小游戏源码分析

    配置 下载地址:https://files.cnblogs.com/files/Lmg66/xssgame-master.zip 使用:下载解压,放到www目录下(phpstudy),http服务下都 ...

  5. HTML5小游戏源码收藏

    html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...

  6. Creator仿超级玛丽小游戏源码分享

    Creator仿超级玛丽小游戏源码分享 之前用Cocos Creator 做的一款仿超级玛丽的游戏,使用的版本为14.2 ,可以直接打包为APK,现在毕设已经完成,游戏分享出来,大家一起学习进步.特别 ...

  7. jQuery1.9.1源码分析--数据缓存Data模块

    jQuery1.9.1源码分析--数据缓存Data模块 阅读目录 jQuery API中Data的基本使用方法介绍 jQuery.acceptData(elem)源码分析 jQuery.data(el ...

  8. jQuery 源码分析(十) 数据缓存模块 data详解

    jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据,避免了在JavaScript对象和DOM元素之间出现循环引用,以及由此而导致的内存泄漏. 数据缓存模块为DOM元素和JavaS ...

  9. 【Pig源码分析】谈谈Pig的数据模型

    1. 数据模型 Schema Pig Latin表达式操作的是relation,FILTER.FOREACH.GROUP.SPLIT等关系操作符所操作的relation就是bag,bag为tuple的 ...

随机推荐

  1. DataGrid表格控件

    代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--& ...

  2. WebUI框架

    Telerik Kendo UI http://demos.telerik.com/kendo-ui/window/right-to-left-support

  3. uva 108

    降维  枚举行累加   然后求单行上最大连续和 #include <iostream> #include <cstring> #include <cstdio> # ...

  4. static 内部类

    一般情况下是不可以用static修饰类的.如果一定要用static修饰类的话,通常static修饰的是匿名内部类. 在一个类中创建另外一个类,叫做成员内部类.这个成员内部类可以静态的(利用static ...

  5. Android支付接入(二):移动游戏基地

    原地址:http://blog.csdn.net/simdanfeg/article/details/9011863 上篇博文跟大家一起走了一遍支付宝支付,今天我们来看看移动支付.众所周知目前付费通道 ...

  6. 在WIN32 DLL中使用MFC

    最近用WIN32 DLL,为了方便要用到MFC的一些库,又不想转工程,就网上找了很多方法,发现没有详细的介绍,有的也行不通,现在成功在WIN32 DLL中使用了MFC,记录一下以防以后用到忘记 一.修 ...

  7. PHP基础语法3

    文件系统 判断文件是否存在 如果只是判断文件存在,使用file_exists就行,file_exists不仅可以判断文件是否存在,同时也可以判断目录是否存在,从函数名可以看出, is_file是确切的 ...

  8. C++常用语法

    unordered_map<int, Node*> mp; if (mp.find(key) == mp.end()) unordered_map<int, Node*>::i ...

  9. Linux C/C++ 编程练手 --- 大数相加和大数相乘

    最近写了一个大数相乘和相加的程序,结果看起来是对的.不过期间的效率可能不是最好的,有些地方也是临时为了解决问题而直接写出来的. 可以大概说一下相乘和相加的解决思路(当然,大数操作基本就是两个字符串的操 ...

  10. Export BOM - BOMPXINQ.EXPLODER_USEREXIT API

    --======================================================================== -- Procedure    : explode ...