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.onload = 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.onload){
loader.onload();
loader.onload = undefined;
}
}
}
}loader对象包含以下几个组成部分：
init()方法，用以探查并保存浏览器支持的音频文件格式加载图像和声音文件的两个方法——
loadImage()和loadSound()。调用时，这两个方法都会递增变量totalCount，并将结果显示在加载画面上itemloaded()方法，当某个资源完成夹加载时调用它。该方法更新已加载资源的数目和加载消息。一旦所有的资源都加载完成，加载画面就会隐藏起来，而一个可选的loader.onload()方法会被调用（若定义了）。这允许我们指定一个回调函数，在所有的资源加载完成后被调用。
注意 使用回调函数可以很容易地让我们在图像加载时进行等待，一旦图像加载完毕，就立刻开始游戏。
在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.onload = game.start;
}
}load()方法为game对象添加了currentLevel属性来保存已加载的关卡数据。目前只加载了三幅图。最终，我们会使用这个方法加载所有用于构建游戏的资源，包括英雄、敌人、障碍物。
一旦图像被加载完毕，我们就调用game.start()方法。根据是否全部加载完成，我们立刻调用它，或者设置它为onload事件的回调函数。start()方法是游戏真正开始的地方。
加载中
以上。
作者：Viljw
链接：https://www.jianshu.com/p/0f4146d16661
随时随地看视频
