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

2022-12-19,,,,

今天继续分析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文件就可以了,改完后他会立刻反应到每个引入他的文件中去。如果你把这些配置项分别写在各自的模块中,那么一旦需要调整,你可以想象你有多么痛苦。

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

flappy pig小游戏源码分析(2)——解剖option的相关教程结束。

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

下载本文的Word格式文档,以方便收藏与打印。