HTML5游戏框架cnGameJS开发实录-资源加载模块代码详解

　　该模块是游戏的入口，我们通过该模块加载资源，并且在资源加载完成后调用游戏对象的入口函数。另外该模块还包括游戏场景之间的切换，以及加载百分比的计算和显示。

　　当开始游戏时，首先传入需要加载的资源列表，然后传入游戏对象,最后传入每个资源加载完成后调用的函数，该函数可以获取加载的百分比。如下：

cnGame.loader.start(["src1","src2","src3"],gameObj,function(loadedPercent){});

　　这样的话，会先加载前面传入的三个图像资源，并且每次加载完一张图片，就调用后面的回调函数，该函数可以获取加载的百分比，实现加载界面，告诉用户目前加载的进度之类的功能。当加载完成后，调用游戏对象gameObj的intialize方法，开始游戏。

2.具体实现：

　　首先我们看看加载器的代码：

/**
     *图像加载器
    **/    
    var loader={
        sum:0,            //图片总数
        loadedCount:0,    //图片已加载数
        loadingImgs:{}, //未加载图片集合
        loadedImgs:{},    //已加载图片集合
        /**
         *图像加载，之后启动游戏
        **/    
        start:function(src,gameObj,onLoad){//可传入src数组或单个src "xxx.jpg" or ["xxx.jpg","ggg,gif","www.png"]
        
            if(cg.core.isArray(src)){ 
                this.sum=src.length;
                for(var i=0,len=src.length;i<len;i++){
                    this.gameObj=gameObj;
                    this.onLoad=onLoad;
                    this.loadingImgs[src[i]]=new Image();
                    this.loadingImgs[src[i]].onload=imgLoad(this);
                    this.loadingImgs[src[i]].src=src[i];
                    this.loadingImgs[src[i]].srcPath=src[i];//没有经过自动变换的src
                }
                    
            }
            
        }
        
    }

　　首先，资源加载器保存如下几个字段：已加载资源的列表，未加载资源的列表，资源总数，已加载总数。当调用start方法，加载器就开始遍历图片src数组，并生成image对象进行加载。另外我们需要为每个图片对象保存srcPath，该参数为原始的src参数（因为默认情况下浏览器会把src参数转换成完整的图片路径）。之后就是为每张图片添加onLoad的处理程序，我们需要在该处理程序中进行加载百分比的计算，以及把加载好的图片对象保存进loadedImgs对象，方便用户后续使用。图片加载的处理程序如下：

/**
     *图像加载完毕的处理程序
    **/    
    var imgLoad=function(self){
        return function(){
            self.loadedCount+=1;
            self.loadedImgs[this.srcPath]=this;
            this.onLoad=null;                    //保证图片的onLoad执行一次后销毁
            self.loadedPercent=Math.floor(self.loadedCount/self.sum*100);
            self.onLoad&&self.onLoad(self.loadedPercent);
            if(self.loadedPercent===100){
                self.loadedCount=0;
                self.loadedPercent=0;
                loadingImgs={};
                if(self.gameObj&&self.gameObj.initialize){
                    self.gameObj.initialize();
                    if(cg.loop&&!cg.loop.stop){//结束上一个循环
                        cg.loop.end();
                    }
                    cg.loop=new cg.GameLoop(self.gameObj);//开始新游戏循环
                    cg.loop.start();
                }
                
            }
            
        
        }
    }

　　每张图片加载完成后，加载数量加1，把该图像对象保存，并且计算加载完成的百分比。最后还需要删除该图像的处理程序（因为图像已加载完成，处理程序已无用，可以释放掉节约内存资源）。当加载百分比为100%，则重置所有值，并释放loadingImgs，为下次加载资源所用，另外，还会启动游戏循环（游戏循环负责每帧对所有游戏对象的更新和绘制）

/**
 *
 *资源加载器
 *
**/
cnGame.register("cnGame",function(cg){

    /**
     *图像加载完毕的处理程序
    **/    
    var imgLoad=function(self){
        return function(){
            self.loadedCount+=1;
            self.loadedImgs[this.srcPath]=this;
            this.onLoad=null;                    //保证图片的onLoad执行一次后销毁
            self.loadedPercent=Math.floor(self.loadedCount/self.sum*100);
            self.onLoad&&self.onLoad(self.loadedPercent);
            if(self.loadedPercent===100){
                self.loadedCount=0;
                self.loadedPercent=0;
                loadingImgs={};
                if(self.gameObj&&self.gameObj.initialize){
                    self.gameObj.initialize();
                    if(cg.loop&&!cg.loop.stop){//结束上一个循环
                        cg.loop.end();
                    }
                    cg.loop=new cg.GameLoop(self.gameObj);//开始新游戏循环
                    cg.loop.start();
                }
                
            }
            
        
        }
    }
    /**
     *图像加载器
    **/    
    var loader={
        sum:0,            //图片总数
        loadedCount:0,    //图片已加载数
        loadingImgs:{}, //未加载图片集合
        loadedImgs:{},    //已加载图片集合
        /**
         *图像加载，之后启动游戏
        **/    
        start:function(src,gameObj,onLoad){//可传入src数组或单个src "xxx.jpg" or ["xxx.jpg","ggg,gif","www.png"]
        
            if(cg.core.isArray(src)){ 
                this.sum=src.length;
                for(var i=0,len=src.length;i<len;i++){
                    this.gameObj=gameObj;
                    this.onLoad=onLoad;
                    this.loadingImgs[src[i]]=new Image();
                    this.loadingImgs[src[i]].onload=imgLoad(this);
                    this.loadingImgs[src[i]].src=src[i];
                    this.loadingImgs[src[i]].srcPath=src[i];//没有经过自动变换的src
                }
                    
            }
            
        }
        
    }
    
    
    this.loader=loader;
});

以上就是HTML5游戏框架cnGameJS开发实录-资源加载模块代码详解的详细内容，更多请关注Gxl网其它相关文章！