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：主要用于统一处理定时器的事件，确保全局只有一个计时器

 //定义贞管理类，兼容
     var requestAnimationFrame = window.requestAnimationFrame
                                 || window.mozRequestAnimationFrame
                                 || window.webkitRequestAnimationFrame
                                 || function(cb){setTimeout(cb,1000/60)};

     var TimeProcess = function(){

         this.list = [];
         this.isStart = false;
     }
     TimeProcess.prototype = {

         add : function(cb,param,context){

             this.list.push({cb:cb,param:param,context:context});
         },
         start : function(){

             this.isStart = true;

             var self = this;

             requestAnimationFrame(function(){

                 var item = null,
                     p = [];

                 for(var i=0;i<self.list.length;i++){

                     item = self.list[i];

                     item.cb.apply(item.context,item.param);
                 }

                 if(self.isStart)requestAnimationFrame(arguments.callee);
             });
         },
         stop : function(){

             this.isStart = false;
         }
     }

Frame：帧的定义，就类似flash中的帧

 //帧的定义
     /**
      @param x int 帧在雪碧图中的起始x坐标
      @param y int 帧在雪碧图中的起始y坐标
      @param w int 帧在雪碧图中的宽
      @param y int 帧在雪碧图中的高
      @param dw int 帧实际的宽
      @param dh int 帧实际的高
     */
     var Frame = function(x,y,w,h,dw,dh){

         this.x = x;
         this.y = y;
         this.w = w;
         this.h = h;
         this.dw = dw;
         this.dh = dh;
     }

Animation：动画的定义，一个动作需要多个连贯的帧才能完成

 //一个动画得定义
     var Animation = function(param) {

         this.startX = param.startX || 0;
         this.startY = param.startY || 0;
         this.fs = param.fs || 1;
         this.sw = param.sw || 0;
         this.sh = param.sh || 0;
         this.width = param.width || param.sw;
         this.height = param.height || param.sh;
         this.dir = param.dir || "right";
         this.loop = !!param.loop;
         //this.fps = param.fps || 30;

         //this.lazy = 1000 / this.fps;
         //this.last = 0;

         this.ls = [];
         //当前帧
         this.current = null;
         //当前帧得索引
         this.index = -1;

         this.init();
     }
     Animation.prototype = {
         init : function(){

             for(var i=0;i<this.fs;i++){

                 var x = this.startX + (this.dir=="right"?i*this.sw:0);
                 var y = this.startY + (this.dir=="down"?i*this.sh:0);

                 var frame = new Frame(x,y,this.sw,this.sh,this.width,this.height);

                 this.ls.push(frame);
             }

             this.index = 0;
             this.current = this.ls[0];
         },
         //下一帧
         next : function() {

             if(this.index + 1 >= this.ls.length){

                 if(this.loop){

                     this.current = this.ls[0];
                     this.index = 0;
                 }
             }
             else{

                 this.index += 1;

                 this.current = this.ls[this.index];
             }
         },
         //重置为第一帧
         reset : function(){

             this.current = this.ls[0];
             this.index = 0;
         },
         size : function(){

             return {w:this.width,h:this.height};
         }
     }

Sprite：精灵的定义，一个完整的个体，是需要多个动画，例如向左，向右等

 //一个精灵的定义
     /**
      @param objParam object 动画的json对象 {"left":[frame1,frame2],"right":[frame1,frame2]}
      @param def string 默认动画索引
      @param img object 精灵得雪碧图
      @param cxt object canvas对象
      @param x int 精灵的起始位置x
      @param y int 精灵的起始位置y
     */
     var Sprite = function(img,cxt,fps,param){

         this.animations = {};
         this.img = img;
         this.cxt = cxt;
         this.x = param.x || 0;
         this.y = param.y || 0;
         this.fps = fps;

         this.xspeed = param.xspeed || 0;
         this.yspeed = param.yspeed || 0;

         this.yaspeed = param.yaspeed || 0;

         this.lazy = 1000 / this.fps;
         this.last = 0;

         this.moveLazy = 33;
         this.moveLast = 0;

         //当前动画
         this.index = null;

         this.key = "";
     }
     Sprite.prototype = {
         add : function(key,animation){

             this.animations[key] = animation;

             if(!this.index){
                 this.index = animation;
                 this.key = key;
             }
         },
         //修改当前动画
         change : function(key){

             if(key == this.key)return false;

             var index = this.animations[key];

             if(!index)return false;

             this.index = index;
             this.okey = this.key;
             this.key = key;
             this.index.reset();
         },
         //绘画出当前帧
         draw : function(){

             if(!this.index || !this.img)return false;

             var frame = this.index.current;

             this.cxt.drawImage(this.img,frame.x,frame.y,frame.w,frame.h,this.x,this.y,frame.dw,frame.dh);
         },
         //更新精灵
         update : function(){

             var t = new Date().getTime();

             var diff = t - this.last;

             var moveDiff = t - this.moveLast;

             if(this.last == 0){
                 diff = this.lazy;
                 moveDiff = this.moveLazy;
             }

             if(diff >= this.lazy){

                 this.index.next();

                 this.last = t;
             }

             if(moveDiff >= this.moveLazy){

                 if(this.yaspeed)this.yspeed += this.yaspeed;

                 if(this.xspeed)this.x += this.xspeed;
                 if(this.yspeed)this.y += this.yspeed;

                 this.moveLast = t;
             }
         },
         //移动
         move : function(x,y){

             this.x = x;
             this.y = y;
         },
         setXSpeed : function(xs){

             this.xspeed = xs;
         },
         setYSpeed : function(ys,yas){

             this.yspeed = ys;
             this.yaspeed = yas || 0;
         },
         //获取当前精灵得大小
         size : function(){

             var frame = this.index.current;

             return {w:frame.dw,h:frame.dh,x:this.x,y:this.y,r:this.x+frame.dw,b:this.y+frame.dh};
         }
     }

下面是游戏试玩：

键盘左右控制移动，界面上的按钮是给iphone触屏用，图片全面兼容iphone4的retina，可以直接放在phonegap中使用！

 

第0层

< >

加载中...

 

完整源码猛击：下载

PS：bug这种玩意，是肯定会有的了。。。大家就见谅吧。。