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的抽象,其中的一些理解上的细节需要读者狠下一番功夫了,先详细解释一下伪代码中红字部分的意思。
flappy pig小游戏源码分析(4)——核心pig模块(未完待续)的更多相关文章
- flappy pig小游戏源码分析(1)——主程序初探
闲逛github发现一个javascript原生实现的小游戏,源码写的很清晰,适合想提高水平的同学观摩学习.读通源码后,我决定写一系列的博客来分析源码,从整体架构到具体实现细节来帮助一些想提高水平的朋 ...
- flappy pig小游戏源码分析(3)——解剖util
这一节我们继续高歌猛进,如果对源码中有无论无何都理解不通的问题,欢迎和我交流,让我也学习一下,我的qq是372402487. 还是按照惯例看看我们的目录结构. 我们在前两节中已经分析了game.js, ...
- flappy pig小游戏源码分析(2)——解剖option
今天继续分析flappy bird的源码.重温一下源码的目录结构. 在本系列第一篇中我们分析了game.js文件,也就是整个程序的架构.这一篇我们来看看option.js文件,这个文件的内容很简单,主 ...
- xss小游戏源码分析
配置 下载地址:https://files.cnblogs.com/files/Lmg66/xssgame-master.zip 使用:下载解压,放到www目录下(phpstudy),http服务下都 ...
- HTML5小游戏源码收藏
html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...
- Creator仿超级玛丽小游戏源码分享
Creator仿超级玛丽小游戏源码分享 之前用Cocos Creator 做的一款仿超级玛丽的游戏,使用的版本为14.2 ,可以直接打包为APK,现在毕设已经完成,游戏分享出来,大家一起学习进步.特别 ...
- jQuery1.9.1源码分析--数据缓存Data模块
jQuery1.9.1源码分析--数据缓存Data模块 阅读目录 jQuery API中Data的基本使用方法介绍 jQuery.acceptData(elem)源码分析 jQuery.data(el ...
- jQuery 源码分析(十) 数据缓存模块 data详解
jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据,避免了在JavaScript对象和DOM元素之间出现循环引用,以及由此而导致的内存泄漏. 数据缓存模块为DOM元素和JavaS ...
- 【Pig源码分析】谈谈Pig的数据模型
1. 数据模型 Schema Pig Latin表达式操作的是relation,FILTER.FOREACH.GROUP.SPLIT等关系操作符所操作的relation就是bag,bag为tuple的 ...
随机推荐
- 【链表】bzoj 1150: [CTSC2007]数据备份Backup
1150: [CTSC2007]数据备份Backup Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1136 Solved: 458[Submit] ...
- PAT-乙级-1032. 挖掘机技术哪家强(20)
1032. 挖掘机技术哪家强(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 为了用事实说明挖掘机技术到底 ...
- PHP 5.3连接sql server 2008 R2
我的机器为: xp sp3 sql server 2008 developer apache 2.2.2 php 5.3 从5.3开始,php就不再提供mssql.dll了,所以要php连接sql ...
- CI框架大纲总结
一.大纲 1.codeigniter框架的授课内容安排 2.codeigniter框架的简介 |-----关于框架的概念 |-----使用CI框架的好处 |-----为什么选择CI框架 3.codei ...
- maven新建Spring MVC + MyBatis + Oracle的Web项目中pom.xml文件
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- java中 正则表达式的使用
推荐使用第一种 第一种: //对接收的文件名的合法性进行验证 String fileName="127.0.0.1_01_20140428165022174.jpg"; Strin ...
- SQL Server 2012 连接到数据库引擎
第 1 课:连接到数据库引擎 https://msdn.microsoft.com/zh-cn/library/ms345332(v=sql.110).aspx 本课将介绍主要的工具以及如何连接并 ...
- atomikos的Jta配置
配置说明见: http://www.atomikos.com/Documentation/JtaProperties atomikos的一些配置,文档中说明的比较清楚,有两个属性配置不太明确:com. ...
- git rebase无法处理的问题
在进行代码整理的时候,遇到了冲突 现在chucklu_master分支指向这个commit SHA-1: 88fa1ee9263402626d85b5a4362e1b620935953f * remo ...
- python中的commands模块
commands模块用于调用shell命令 有3中方法: commands.getstatus() 返回执行状态 commands.getoutput() 返回执行结果 commands.ge ...