HTML5小游戏【是男人就下一百层】UI美化版

之前写的小游戏，要么就比较简单，要么就是比较难看，或者人物本身是不会动的。

结合了其它人的经验，研究了一下精灵运动，就写一个简单的小游戏来试一下。

介绍一下几个主要的类：

• Frame：帧的定义，主要描述动画的一帧
• Animation：动画的定义，主要描述一个连贯的动画，由多个帧组成
• Sprite：精灵的定义，主要描述一个完整的实体，由多个动画组成
• TimeProcess：时间管理，由requestAnimationFrame完成
• Person：一个完整人定义，就是主人公--男人
• BlockBase：块的基类，下降中的障碍物基类，包含一些基本的参数与方法
• NormalBlock：普通块，继承于BlockBase，最基础的块
• MissBlock,LeftBlock...等：其它特殊功能的块
• BlockFactory：块工厂，生产块的类
• Main：游戏主入口

游戏的文件结构：

1. wfn.js：基础文件，包含动画定义，公共方法（都是比较简单的）
2. person.js：人物的定义
3. block.js：各种障碍物块的定义
4. main.js：游戏主逻辑入口文件，处理主要逻辑

游戏的文件结构：

TimeProcess：主要用于统一处理定时器的事件，确保全局只有一个计时器

 1 //定义贞管理类，兼容
 2     var requestAnimationFrame = window.requestAnimationFrame
 3                                 || window.mozRequestAnimationFrame
 4                                 || window.webkitRequestAnimationFrame
 5                                 || function(cb){setTimeout(cb,1000/60)};
 6 
 7     var TimeProcess = function(){
 8     
 9         this.list = [];
10         this.isStart = false;
11     }
12     TimeProcess.prototype = {
13         
14         add : function(cb,param,context){
15             
16             this.list.push({cb:cb,param:param,context:context});
17         },
18         start : function(){
19             
20             this.isStart = true;
21             
22             var self = this;
23             
24             requestAnimationFrame(function(){
25                 
26                 var item = null,
27                     p = [];
28                             
29                 for(var i=0;i<self.list.length;i++){
30                     
31                     item = self.list[i];
32                     
33                     item.cb.apply(item.context,item.param);
34                 }
35                 
36                 if(self.isStart)requestAnimationFrame(arguments.callee);
37             });
38         },
39         stop : function(){
40             
41             this.isStart = false;
42         }
43     }

View Code