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

今天继续分析flappy bird的源码。重温一下源码的目录结构。

在本系列第一篇中我们分析了game.js文件,也就是整个程序的架构。这一篇我们来看看option.js文件,这个文件的内容很简单,主要是配置一些游戏中各类元素的参数。

我们还是按照惯例先上源代码:


var flappy = (function (self) {
    ‘use strict‘;

    //设置
    self.option = {
        //重力加速度,屏幕像素和实际物理上的米有差别,所以存在换算
        g: 400,
        //跳跃的初速度,控制猪的弹跳力
        v0: 400,
        //柱子移动速度
        vp: 2.5,
        //频率,控制动画帧数,默认20ms
        frequency: 20,
        //关卡数
        levels: 100,
        //开头的空白距离
        safeLift: 500,

        //地板高度(和图片有关)
        floorHeight: 64,

        //猪的宽度
        pigWidth: 33,
        //猪的高度
        pigHeight: 30,
        //猪当前高度
        pigY: 300,
        //猪距离左边的距离,
        pigLeft: 80,

        //柱子Html
        pillarHtml: ‘<div class="top"></div><div class="bottom"></div>‘,
        //柱子宽度
        pillarWidth: 45,
        //柱子上下间隔高度
        pillarGapY: 108,
        //柱子左右间隔宽度
        pillarGapX: 250,
        //上柱子的基础定位值(就是top值,和css写法有关)
        pillarTop: -550,
        //下柱子的基础定位值
        pillarBottom: -500
    };

    return self;//这个执行完之后flappy就是一个含有option属性的对象了

})(flappy || {});

关于其中var flappy = (function(self){

//其他细节

})(flappy || {})的用法如果还是不太理解,可以再去看看本系列的第一篇。

看完这个源码我相信绝大多数同学都没有一点压力,唯一可能产生疑问的就是,为什么要这么做呢?我们为什么要单独的用一个文件来专门存放这些配置参数呢?

我们经常听到关于程序设计的一些专业术语如:低耦合、高内聚、可维护性、模块化等等,先抛开这些模糊的概念不谈,我们来说说现实生活中随处可见的一个概念——单一职责原则。

大扫除的时候,扫地的同学只负责扫地、擦玻璃的同学只负责擦玻璃、擦黑板的同学只负责擦黑板,大家各司其职互不牵涉。检查的时候发现地没有扫干净,那就肯定是扫地同学的责任,相应的玻璃没干净就找擦玻璃的同学来负责。一旦扫地的同学不仅负责扫地,同时还顺便帮忙擦擦玻璃的话,检查时如果发现玻璃没擦干净,这个时候想要知道谁负责的话就很很麻烦了,起码要把两个人叫来问个清楚,说不定他俩再互相推脱一下。在程序设计中我们把各司其职个安其分称之为单一职责原则,一旦出了任何问题,我们能很快的找到哪个模块该对问题负责。

了解了什么是单一职责原则,我们再来看看这个option.js文件,我们很容易的就会知道,这个option.js文件的职责就是配置游戏参数供其它模块使用,一旦需要调整参数,比如我要把猪变大一点,把柱子之间的距离加大一点同时把地板额高度设高一点,我只需要更改option.js文件就可以了,改完后他会立刻反应到每个引入他的文件中去。如果你把这些配置项分别写在各自的模块中,那么一旦需要调整,你可以想象你有多么痛苦。

这一节的内容很简单,但是需要读者自己加深理解,形成程序设计的思想并加以运用。

时间: 2024-08-09 23:58:26

flappy pig小游戏源码分析(2)——解剖option的相关文章

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

热身之后,我们要动点真格的了,游戏叫flappy pig,我们的pig终于要出场了. 老规矩,看看目录结构,读者对着目录结构好好回想我们已经讲解的几个模块: 其中game.js是游戏主程序,option.js是游戏配置文件,util是我们的通用工具库函数. 那么pig是什么呢,我们先上源码: var flappy = (function (self) { 'use strict';//开启严格模式 var option = self.option,//把前面添加好的option拿出来 $ = s

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微信

HashMap的小总结 + 源码分析

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

九宫格小游戏源码分享

九宫格小游戏,可从本地图库载入一张图片,填充到9个ImageView,另涉及Timer计时.图库控件.每个格子都是相同的控件,动态添加到首页中的,在初始化后,响应touch事件,之后通过多次消息传递,来完成整个拼图过程.里面有个随机发牌的经典算法,也可参考. 初始化时,激发每个格子的init事件和initCheckOk来完成布局=>单个控件响应 touch事件,发出广播,要求机动单元格给予回应,是否允许交换位置 =>机动单元格响应广播. 广播是通过承载页sm("do_Page&quo

微信游戏圈小游戏源码共享下载

源码数量不少于300套!持续更新中! 皇家VIP群入会费请咨询QQ   截止于2014-10-18,更新的一些游戏截图   截止于2014-10-13,微信小游戏VIP交流群已经共享的源码截图 列举一下部分游戏的名称: 随意门(屌丝版) 植物大战僵尸 逼死强迫症2 胸口碎大石 粉绿男女 打击者 黄金矿工 反腐小王子 转你妹 纸飞机 狂射iphone6 小兔子快快跑 跳跳狗 扫雷 奇葩连连看 看你有多花 开心消消乐 进化 拯救精子 打老虎 色域迷惑人 厕纸挑战 气球砰砰砰 横冲直闯 疯狂飙车 粑粑

2048小游戏源码

2048小游戏 下载地址:http://www.devstore.cn/code/info/737.html 运行截图:   

jQuery网页版五子棋小游戏源码下载

体验效果:http://hovertree.com/texiao/game/4/ 网页五子棋源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery五子棋游戏 -</title> <script type="