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.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