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

时间: 2024-10-15 03:49:58

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

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

今天继续分析flappy bird的源码.重温一下源码的目录结构. 在本系列第一篇中我们分析了game.js文件,也就是整个程序的架构.这一篇我们来看看option.js文件,这个文件的内容很简单,主要是配置一些游戏中各类元素的参数. 我们还是按照惯例先上源代码: var flappy = (function (self) { 'use strict'; //设置 self.option = { //重力加速度,屏幕像素和实际物理上的米有差别,所以存在换算 g: 400, //跳跃的初速度,控制

21款网页版html5小游戏源码

html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js html5 2048数字游戏源码_2048网页版源码下载 html5盲打高手打飞字游戏下载_网页版英文打飞字游戏源码下载 jQuery flappy bird电脑版小游戏源码下载 网页版html5 3d俄罗斯方块游戏源码下载 jQuery html5迷宫游戏源码下载 html5网页游戏仿flappy

HTML5小游戏源码收藏

html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js html5 2048数字游戏源码_2048网页版源码下载 html5盲打高手打飞字游戏下载_网页版英文打飞字游戏源码下载 jQuery flappy bird电脑版小游戏源码下载 网页版html5 3d俄罗斯方块游戏源码下载 jQuery html5迷宫游戏源码下载 html5网页游戏仿flappy

11款手机微信小游戏源码特效

html5微信吃苹果游戏源码下载 html5手机淘宝万能时装屋小游戏源码下载 html5 3d拳王游戏制作3D拳击游戏源码下载 html5 3d拼图游戏制作3D魔方游戏源码下载 htm5 3d游戏制作3D熊出没游戏源码下载 html5微信小游戏超级染色游戏源码下载 html5读心术小游戏源码下载_读心术微信小游戏源码下载 找你歌微信html5游戏源码下载_找你歌微信游戏源码下载 方言等级考试游戏源码下载_方言等级测试微信游戏源码下载 中秋节吃月饼游戏html5微信游戏源码下载 9款html5微信

Spark SQL源码分析之核心流程

自从去年Spark Submit 2013 Michael Armbrust分享了他的Catalyst,到至今1年多了,Spark SQL的贡献者从几人到了几十人,而且发展速度异常迅猛,究其原因,个人认为有以下2点: 1.整合:将SQL类型的查询语言整合到 Spark 的核心RDD概念里.这样可以应用于多种任务,流处理,批处理,包括机器学习里都可以引入Sql. 2.效率:因为Shark受到hive的编程模型限制,无法再继续优化来适应Spark模型里. 前一段时间测试过Shark,并且对Spark

HashMap的小总结 + 源码分析

一.HashMap的原理 所谓Map,就是关联数组,存的是键值对--key&value. 实现一个简单的Map,你也许会直接用两个LIst,一个存key,一个存value.然后做查询或者get的时候,就遍历key的list,然后返回相应的value. 这样时间复杂度显然就是线性的,但这在map中已经是效率最低的get的方法了.而Hash主要提高效率的,也就是在这个位置--key的定位和查询这. 在数据结构中,我们学了hash这一技术,也就是散列表的技术.我们把整个表格看作是许多许多的空桶,然后散

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

阅读目录 jQuery API中Data的基本使用方法介绍 jQuery.acceptData(elem)源码分析 jQuery.data(elem, name, data)源码分析 internalRemoveData方法源码分析 internalData方法的源码分析 jQuery.fn.extend({data: function( key, value ) {}})源码分析 jQuery.extend({removeData: function( elem, name ) {}})源码分

第一篇:Spark SQL源码分析之核心流程

/** Spark SQL源码分析系列文章*/ 自从去年Spark Submit 2013 Michael Armbrust分享了他的Catalyst,到至今1年多了,Spark SQL的贡献者从几人到了几十人,而且发展速度异常迅猛,究其原因,个人认为有以下2点: 1.整合:将SQL类型的查询语言整合到 Spark 的核心RDD概念里.这样可以应用于多种任务,流处理,批处理,包括机器学习里都可以引入Sql.    2.效率:因为Shark受到hive的编程模型限制,无法再继续优化来适应Spark

jQuery源码分析(九) 异步队列模块 Deferred 详解

deferred对象就是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题,比如一些Ajax操作,动画操作等.(P.s:紧跟上一节:https://www.cnblogs.com/greatdesert/p/11433365.html的内容) 异步队列有三种状态:待定(pending).成功(resolved)和失败(rejected),初始时处于pending状态 我们可以使用jQuery.Deferred创建一个异步队列,返回一个对象,该对象含有如下操作: done(fn/arr