之前写的小游戏，要么就比较简单，要么就是比较难看，或者人物本身是不会动的。
结合了其它人的经验，研究了一下精灵运动，就写一个简单的小游戏来试一下。
介绍一下几个主要的类：
- Frame：帧的定义，主要描述动画的一帧
- Animation：动画的定义，主要描述一个连贯的动画，由多个帧组成
- Sprite：精灵的定义，主要描述一个完整的实体，由多个动画组成
- TimeProcess：时间管理，由
requestAnimationFrame完成 - Person：一个完整人定义，就是主人公--
男人 - BlockBase：块的基类，下降中的障碍物基类，包含一些基本的参数与方法
- NormalBlock：普通块，继承于
BlockBase，最基础的块 - MissBlock,LeftBlock...等：其它特殊功能的块
- BlockFactory：块工厂，生产块的类
- Main：游戏主入口
游戏的文件结构：
- wfn.js：基础文件，包含动画定义，公共方法（都是比较简单的）
- person.js：人物的定义
- block.js：各种障碍物块的定义
- 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
Frame：帧的定义，就类似flash中的帧
1 //帧的定义 2 /** 3 @param x int 帧在雪碧图中的起始x坐标 4 @param y int 帧在雪碧图中的起始y坐标 5 @param w int 帧在雪碧图中的宽 6 @param y int 帧在雪碧图中的高 7 @param dw int 帧实际的宽 8 @param dh int 帧实际的高 9 */10 var Frame = function(x,y,w,h,dw,dh){11 12 this.x = x;13 this.y = y;14 this.w = w;15 this.h = h;16 this.dw = dw;17 this.dh = dh; 18 }
Animation：动画的定义，一个动作需要多个连贯的帧才能完成
1 //一个动画得定义 2 var Animation = function(param) { 3 4 this.startX = param.startX || 0; 5 this.startY = param.startY || 0; 6 this.fs = param.fs || 1; 7 this.sw = param.sw || 0; 8 this.sh = param.sh || 0; 9 this.width = param.width || param.sw;10 this.height = param.height || param.sh;11 this.dir = param.dir || "right";12 this.loop = !!param.loop;13 //this.fps = param.fps || 30;14 15 //this.lazy = 1000 / this.fps;16 //this.last = 0;17 18 this.ls = [];19 //当前帧20 this.current = null;21 //当前帧得索引22 this.index = -1;23 24 this.init();25 }26 Animation.prototype = {27 init : function(){28 29 for(var i=0;i = this.ls.length){46 47 if(this.loop){48 49 this.current = this.ls[0];50 this.index = 0;51 }52 }53 else{54 55 this.index += 1;56 57 this.current = this.ls[this.index];58 }59 },60 //重置为第一帧61 reset : function(){62 63 this.current = this.ls[0];64 this.index = 0;65 },66 size : function(){67 68 return {w:this.width,h:this.height};69 }70 }
Sprite：精灵的定义，一个完整的个体，是需要多个动画，例如向左，向右等
1 //一个精灵的定义 2 /** 3 @param objParam object 动画的json对象 {"left":[frame1,frame2],"right":[frame1,frame2]} 4 @param def string 默认动画索引 5 @param img object 精灵得雪碧图 6 @param cxt object canvas对象 7 @param x int 精灵的起始位置x 8 @param y int 精灵的起始位置y 9 */ 10 var Sprite = function(img,cxt,fps,param){ 11 12 this.animations = {}; 13 this.img = img; 14 this.cxt = cxt; 15 this.x = param.x || 0; 16 this.y = param.y || 0; 17 this.fps = fps; 18 19 this.xspeed = param.xspeed || 0; 20 this.yspeed = param.yspeed || 0; 21 22 this.yaspeed = param.yaspeed || 0; 23 24 this.lazy = 1000 / this.fps; 25 this.last = 0; 26 27 this.moveLazy = 33; 28 this.moveLast = 0; 29 30 //当前动画 31 this.index = null; 32 33 this.key = ""; 34 } 35 Sprite.prototype = { 36 add : function(key,animation){ 37 38 this.animations[key] = animation; 39 40 if(!this.index){ 41 this.index = animation; 42 this.key = key; 43 } 44 }, 45 //修改当前动画 46 change : function(key){ 47 48 if(key == this.key)return false; 49 50 var index = this.animations[key]; 51 52 if(!index)return false; 53 54 this.index = index; 55 this.okey = this.key; 56 this.key = key; 57 this.index.reset(); 58 }, 59 //绘画出当前帧 60 draw : function(){ 61 62 if(!this.index || !this.img)return false; 63 64 var frame = this.index.current; 65 66 this.cxt.drawImage(this.img,frame.x,frame.y,frame.w,frame.h,this.x,this.y,frame.dw,frame.dh); 67 }, 68 //更新精灵 69 update : function(){ 70 71 var t = new Date().getTime(); 72 73 var diff = t - this.last; 74 75 var moveDiff = t - this.moveLast; 76 77 if(this.last == 0){ 78 diff = this.lazy; 79 moveDiff = this.moveLazy; 80 } 81 82 if(diff >= this.lazy){ 83 84 this.index.next(); 85 86 this.last = t; 87 } 88 89 if(moveDiff >= this.moveLazy){ 90 91 if(this.yaspeed)this.yspeed += this.yaspeed; 92 93 if(this.xspeed)this.x += this.xspeed; 94 if(this.yspeed)this.y += this.yspeed; 95 96 this.moveLast = t; 97 } 98 }, 99 //移动100 move : function(x,y){101 102 this.x = x;103 this.y = y;104 },105 setXSpeed : function(xs){106 107 this.xspeed = xs;108 },109 setYSpeed : function(ys,yas){110 111 this.yspeed = ys;112 this.yaspeed = yas || 0;113 },114 //获取当前精灵得大小115 size : function(){116 117 var frame = this.index.current;118 119 return {w:frame.dw,h:frame.dh,x:this.x,y:this.y,r:this.x+frame.dw,b:this.y+frame.dh};120 }121 }
下面是游戏试玩：
键盘左右控制移动，界面上的按钮是给iphone触屏用，图片全面兼容iphone4的retina，可以直接放在phonegap中使用！
第 0层
加载中...
完整源码猛击：
PS：bug这种玩意，是肯定会有的了。。。大家就见谅吧。。