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这种玩意，是肯定会有的了。。。大家就见谅吧。。