HTML5遊戲開發（四）載入
var mp3Support, oggSupport; var audio = document.createElement('audio'); if (audio.canPlayType){
mp3Support = "" != audio.canPlayType('audio/mpeg');
oggSupport = "" != audio.canPlayType('audio/ogg');
}else{ // audio標籤不被支援
mp3Support = false;
oggSupport = false;
}
loader.soundFileExtn = mp3Support?".mp3":oggSupport?'.ogg':undefined;
}, loadImage:function(url){ this.totalCount ++; this.loaded = false;
$('#loadingscreen').show(); var image = new Image();
image.src = url;
image. = loader.itemLoaded; return image;
}, soundFileExtn:'.ogg', loadSound:function(url){ this.totalCount ++; this.loaded = false;
$('#loadingscreen').show(); var audio = new Audio();
audio.src = url + loader.soundFileExtn;
audio.addEventListener('canplaythrough', loader.itemLoaded, false); return audio;
}, itemLoaded:function(){
loader.loadedCount++;
$('#loadingmessage').html('Loaded ' + loader.loadedCount + ' of ' + loader.totalCount); if (loader.loadedCount === loader.totalCount){ // loader完成了資源載入
loader.loaded = true;
$("#loadingscreen").hide(); if (loader.){
loader.();
loader. = undefined;
}
}
}
}loader物件包含以下幾個組成部分：
-
init()方法，用以探查並儲存瀏覽器支援的音訊檔案格式 -
載入影象和聲音檔案的兩個方法——
loadImage()和loadSound()。呼叫時，這兩個方法都會遞增變數totalCount，並將結果顯示在載入畫面上 -
itemloaded()方法，當某個資源完成夾載入時呼叫它。該方法更新已載入資源的數目和載入訊息。一旦所有的資源都載入完成，載入畫面就會隱藏起來，而一個可選的loader.()方法會被呼叫（若定義了）。這允許我們指定一個回撥函式，在所有的資源載入完成後被呼叫。
注意 使用回撥函式可以很容易地讓我們在影象載入時進行等待，一旦影象載入完畢，就立刻開始遊戲。
在loader可以使用之前，我們還需要再game.init()方法內部呼叫loader.init()方法，這樣當遊戲完成初始化時，loader也完成初始化了。現在，game.init()`方法如下所示：
// 在game.init()中初始化loader
init:function(){ // 初始化物件
levels.init();
loader.init(); // 隱藏所有的遊戲圖層，顯示開始畫面
$('.gamelayer').hide();
$('#gamestartscreen').show(); // 獲取遊戲畫布及其繪畫環境的引用
game.canvas = $('#gamecanvas')[0];
game.context = game.canvas.getContext('2d');
},載入關卡
現在，我們有了資源載入器，讓我們來著手載入關卡。首先載入遊戲的背景、前景和彈弓影象，通過在levels物件內部定義load()方法實現。
level物件內部load()方法的基本框架
// 為某一關卡載入所有的資料和影象
load:function(number){ // 宣告一個新的當前關卡物件
game.currentLevel = {number:number, hero:[]};
game.score = 0;
$('#score').html('得分: ' + game.score); var level = levels.data[number]; // 載入背景、前景和彈弓影象
game.currentLevel.backgroundImage = loader.loadImage("images/backgrounds/"+
level.background + '.png');
game.currentLevel.foregroundImage = loader.loadImage("images/backgrounds/" +
level.foreground + '.png');
game.slingshotImage = loader.loadImage("images/slingshot.png");
game.slingshotFrontImage = loader.loadImage("images/slingshot-front.png"); // 一旦所有的影象載入完成，呼叫game.start()函式
if (this.loader.loaded){
game.start();
}else{
loader. = game.start;
}
}
load()方法為game物件添加了currentLevel屬性來儲存已載入的關卡資料。目前只加載了三幅圖。最終，我們會使用這個方法載入所有用於構建遊戲的資源，包括英雄、敵人、障礙物。
一旦影象被載入完畢，我們就呼叫game.start()方法。根據是否全部載入完成，我們立刻呼叫它，或者設定它為事件的回撥函式。start()方法是遊戲真正開始的地方。
載入中
以上。
作者：Viljw
連結：https://www.jianshu.com/p/0f4146d16661
作者：FFIVE
連結：https://www.imooc.com/article/33216
來源：慕課網