1.功能
該模組是遊戲的入口，我們透過該模組載入資源，並且在資源載入完成後呼叫遊戲物件的入口函數。另外模組還包括遊戲場景之間的切換，以及載入百分比的計算和顯示。
當開始遊戲時，首先傳入需要載入的資源列表，然後傳入遊戲物件,最後傳入每個資源載入完成後所呼叫的函數，該函數可以取得載入的百分比。如下：
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開發實錄-資源載入模組程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
