html5Game开发系列文章之三搭建基本游戏框架(代码封装)

(function(){
//你的代码
})();

function 函数名(){
//你的代码;
}

函数名();

(function(window){
var j2d={
    //canves context对象
    Context:undefined,
    //坐标
    Point:function(x,y){
        if(isNaN(x)){
            x=0;
        }
        if(isNaN(y)){
            y=0;
        }
        return {"X":x,"Y":y};
    },
    //每秒帧数
    FPS:10,
    //精灵容器
    Containet:new Array(),
    //八个方向
    Directions:{
        North:0,
        NorthEast:1,
        East:2,
        SouthEast:3,
        South:4,
        SouthWest:5,
        West:6,
        NorthWest:7
    }，
    //获取两点之间距离
    GetDistance:function(x,y) {
        return Math.sqrt(Math.pow((x.X - y.X), 2) + Math.pow((x.Y - y.Y), 2));
    },
    
    //计算当前坐标与目标点之间的正切值以获取朝向
    GetDirection:function(current,target){
        //...略
    },
    
    //是否到达指定坐标
    
    RatherPoint:function(direction,p1,p2){
        //...略
    }
    //
};
window.j2d=j2d;
})(window);

GetMoveStep:function(point1,point2,speed){
    var length = j2d.GetDistance(point1,point2);
    var p = j2d.Point(0,0);
    if(length==0){
        return p;
    }
    p.X= (point2.X - point1.X) * speed / length;
    p.Y= (point2.Y - point1.Y) * speed / length;
    return p;
}

    ObjectEntity:function(){
        this.DrawObject=undefined;//绘制对象
        this.ID=undefined;//编号
        this.Name=undefined;//名字
        this.Offset={"X":0,"Y":0};//偏移量
        this.COntainet=new Array();//子对象集合
        this.X":0,"Y":0};//绘制起始坐标
        this.Coordinate={"X":0,"Y":0};//当前所在坐标
        this.Draw=function(){
            if(j2d.Context&&this.DrawObject){
                var point = this.Coordinate;
                var w = this.Width;
                var h = this.Height;
                j2d.Context.drawImage(this.DrawObject,//绘制对象
                                      parseInt(this.DrawPoint.X),//
                                      parseInt(this.DrawPoint.Y),//
                                      parseInt(w),//裁剪尺寸
                                      parseInt(h),//裁剪的尺寸
                                      parseInt(point.X-this.Offset.X),//
                                      parseInt(point.Y-this.Offset.Y),
                                      parseInt(w),//绘制大小。
                                      parseInt(h) //绘制大小。
                                 );
                for(var n=0;n<this.Containet.length;n++){//执行子集合里面的Draw方法
                    if(this.Containet[n]&&this.Containet[n].Draw){
                        this.Containet[n].Draw(gameTime);
                    }
                }
            }
        }
    }

Map:function(){
        j2d.ObjectEntity.call(this);
        this.Update=function(gameTime){
            for(var n=0;n<this.Containet.length;n++){
                if(this.Containet[n]){
                    if(this.Containet[n].Update){
                        this.Containet[n].Update(gameTime);
                    }
                }
            }
        };
    }

    Sprite:function(){
        j2d.ObjectEntity.call(this);
        this.Speed=100;//速度
        var action="",//当前动作
        list,//动作列表
        index=0,//当前动作的帧索引
        timeStep=0;//距上次更新时的时间步长
        this.AddAnimation=function(key,value){
            if(!list){
                list=new Object();
            }
            list[key]=value;
            return true;
        };
        
        this.SetAnimation=function(key){
            if(action!=key){
                index=0;
                action=key;
                timeStep=3600000;//这里将时间设为一个较大的数值是为了切换动作后能马上更换图片
            }
        };
        
        this.Update=function(gameTime){
            if(action&&action!=""&&list[action]){
                timeStep+=gameTime;
                if(timeStep>=list[action].Interval){//是否达到每帧的切换时间
                    timeStep=0;
                    this.DrawPoint=j2d.Point(list[action].Frames[index]*this.Width,this.Direction*this.Height);
                    if(list[action].Callback){
                        list[action].Callback(index,action);
                    }
                    if(index>=list[action].Frames.length-1){
                        index=0;
                    }else{
                        index++;
                    }
                }
            }
            
            for(var n=0;n<this.Containet.length;n++){
                if(this.Containet[n]){
                    if(this.Containet[n].Update){
                        this.Containet[n].Update(gameTime);
                    }
                }
            }
        };
    }