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

    在之前的二节中，我做出一个基本的游戏精灵--一条红色的飞行的小飞龙，但是在进行下一步开发前，我觉得有必要对现有的代码进行封装！在这一节中，我将封装一些基本的方法，并演示如何在JS中实现继承！

    首先了解下什么叫立即调用的函数：

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

　　顾名思义，即函数定义完后会立即调用或执行自己，在这里，它相当于

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

函数名();

　　封装在里面的代码，外部是无法访问的，这样能确保不会因为外面的同名变量而产生不可预料的异常！然后可以通过一个全局变量来访问相关内容！网上一些JS库都是这种方式封装的，包括jQuery！在这里我们建一个立即调用函数并将上一节用到的几个方法，封装进去，然后通过一个全局变量window.j2d来访问里面的方法！

(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);

    封装好后，我们可以直接通用j2d来调用相关方法了！不过在这里要先改进一下计算移动步长GetMovePoint这个方法，上一节中没有细致考虑导致方法过于冗余！在这里改进调整下！

    如果精灵是横向或者纵向移动，每次移动步长直接是当前移动速度即可，如果是斜向移动，则需要计算目标点的长度，并根据对应的比例获取x坐标长度与y坐标长度！

    根据勾股定理：两条直角边的长度的平方之和等于斜边的平方，则得出获取两个坐标点的距离为Math.sqrt(Math.pow((point2.X - point1.X), 2) + Math.pow((point2.Y - point1.Y), 2));

    因为同号两数相乘得正数，异号两数相乘得负数，所以这里得出的结果永远是正数！再根据 斜边/长(高) = 速度/x步长(y步长) (两者比例一致的，斜边上的移动步长即为当前速度)就能得出对应的x轴移动步长或者y轴移动步长了！优化后方法如下（方法名调整为GetMoveStep）：

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;
}

　　下面我将实现精灵对象的基类封装，每个精灵都有一个Draw方法，用来绘制精灵对象，一个Update方法，用来实现相关逻辑处理

    ObjectEntity:function(){
        this.DrawObject=undefined;//绘制对象
        this.ID=undefined;//编号
        this.Name=undefined;//名字
        this.Offset={"X":0,"Y":0};//偏移量
        this.Containet=new Array();//子对象集合
        this.Width=0;//宽
        this.Height=0;//高
        this.Direction=0;//朝向
        this.DrawPoint={"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);
                    }
                }
            }
        }
    }

　　然后，我们再定义一个地图对象，继承自ObjectEntity,其实javascript中并不存在类，继承等东西，但是我们可以通过一些方法来实现继承等功能，实现继承有多种方法，这里使用call来实现(其它还有原型继承等，更多请自行搜索了解)！

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);
                    }
                }
            }
        };
    }

　　Map里面只新增一个Update方法，遍历子集合里面的所有对象并运行其Update方法(注：随着后面更多的功能增加，会有更多的方法增减，但是目前为了方便理解与突出重点，用不到的方法暂时不放出来)

　　OK,地图定义完了，再定义一个Sprite类，在之前的演示中，我们的精灵只有一个动行，即飞行，但是这远远不够的，可能我还要有站立，行走，攻击，死亡，打坐，受伤，施法...等很多动作，在这里我不想把这些动作写死，我打算在实际开发中动态添加，在这里我定义一个AddAnimation方法，来用添加动作动画，再定义一个SetAnimation，来设置当前动作。但是精灵的基本图片要求不变，即每个方向为一行！其实在一般的游戏中，精灵图片一般都是单张单张分开的，但是为了减少HTTP请求，我将所有图片都拼合到一张图片里面了，加载的时候慢点，但是不需要频繁的去请求，智者见智，仁者见仁，如果不想一次加载的，可以自己更改相关方法，但是原理还是一致的！

　

    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);
                    }
                }
            }
        };
    }

　　实现了封装后，下面的开发中我们将大大简化相关代码，在下面，我将再次实现一个会行走的精灵，这次我不再打算用上次的小龙了，必竟这是老外们的龙，咱们中国人，当然要用中国元素，所以我决定用一个小美女，嗯，现在美女大家都喜欢，不是吗，特别对于代码老是报“找不到对象”的错误的同学们来说！

　　先展示一下我们要用到的精灵素材（这里只有部分，全图放在下载文件中，站立10帧，行走10帧，8个方向，计160张图片拼合而成，说实话，处理图片真是一个很麻烦的过程！原图可都是一张一张零散的图片）

　　同时，这里我也将加入地图元素，不再像上一节中精灵只能在无尽的白色背景中行走了！实现代码：

j2d.Context=document.getElementById("scene").getContext("2d");

//为Sprite添加一个RunTo方法，用来控制行走
j2d.Sprite.prototype.RunTo=function(point,Callback){
    clearInterval(this.runTimer);
    var speed=parseFloat(this.Speed/1000)*(1000/j2d.FPS);
    //point = arguments[0];
    var me = this;
    
    var moveStep = j2d.GetMoveStep(this.Coordinate,point,this.Speed);

    me.runTimer=setInterval(function(){
        var x = parseInt(me.Coordinate.X+moveStep.X),
        y=parseInt(me.Coordinate.Y+moveStep.Y);
        if(x<0||x>(j2d.Context.canvas.width-me.Offset.X)||y<0||y>(j2d.Context.canvas.height - me.Offset.Y)||j2d.RatherPoint(me.Direction,me.Coordinate,point)){//碰撞检测与判断是否到达目标点
            clearInterval(me.runTimer);
            if(Callback){
                Callback(me);
            };
        }else{
            me.Coordinate.X=x;
            me.Coordinate.Y=y;
        }
    },1000/j2d.FPS)
};


var map,hero;
var mapImg = new Image();
mapImg.onload=function(){
    map = new j2d.Map();//地图
    map.DrawObject=mapImg;
    map.Width = mapImg.width;
    map.Height=mapImg.height;
    var heroImg = new Image();
    heroImg.onload=function(){
        hero = new j2d.Sprite();//美女
        hero.DrawObject=heroImg;
        hero.Width = 70;
        hero.Height=200;
        hero.Speed=5;//移动速度
        hero.Offset = j2d.Point(35,160);
        hero.Coordinate = j2d.Point(400,350);//所处位置
        hero.AddAnimation("Stand",{//添加动作-站立
            Interval:10,
            Frames:[0,1,2,3,4,5,6,7,8,9]
        });
        hero.AddAnimation("Walk",{//添加动作 - 行走
            Interval:10,
            Frames:[10,11,12,13,14,15,16,17,18,19]
        });
        hero.SetAnimation("Stand");//设置当前动作为-站立
        map.Containet.push(hero);
        j2d.Containet.push(map);
        
        j2d.Context.canvas.onclick=function(){//点击事件
            var point = j2d.GetMousePoint();//获取点击坐标
            hero.Direction=j2d.GetDirection(hero.Coordinate,point);//设置朝向
            hero.SetAnimation("Walk");//设置行走动画
            hero.RunTo(point,function(){//开始行走
                hero.SetAnimation("Stand");//到达目标点的回调方法：此处为改变动作为站立
            });
        };
        
        j2d.Run();//开始执行
        
        
    };
    heroImg.src="Data/Sprite/1.png";
};
mapImg.src = "Data/Map/1.gif";

　　好，我们来运行一下结果吧：

　　冰山上一个漂亮的美女正在孤独的行走，慢慢前行...,冰山上的美女，简称冰女，要是石头上的美女，简称...咳咳，我什么都没有说啊...

　　今天本节到此为止，开发已经渐入佳境了，不过，还有很多功能没有出来，比如地图没有障碍，人物没有阴影，2.5D效果处理，地图切换，怪物，技能等，不过别急，请关注本人的Html5 Game开始系列文章，让我们一起走近html5,感受html5的魅力，享受html5之神奇之旅...

    作者：翅膀的初衷
    QQ:4585839
    总目录：点击进入
    本章代码下载：点击下载
    本系列效果演示：http://www.jiniannet.com/html5/

　　这篇文章是旧历2011年的最后一篇文章了，过两天要回家过年了，下面的更新将在节后回来继续。如果代码与文章中存在不足之处，欢迎大家指点（本代码在IE9,火狐（中国版）9.01中测试通过）！

　　本文（包括本系列其它文章）为原创作品，如有转载请保留作者信息与出处，其中涉及到的图片，来源于网络，仅供学习研究目的使用，请勿用于其它用途，否则由此产生的任何后果均与本人无关！