HTML5游戏开发（四）加载

加载图像

完成关卡之前，需要实现图像加载器和加载画面。让某一关加载图像，并在图像加载完成后开始游戏。

设计一个简单的加载画面，它包含一张进度条GIF图片和显示已加载图像数目的文字。首先，将加载画面的CSS样式添加到styles.css中。

加载画面的CSS样式

这些CSS样式为游戏背景蒙上了一层浅灰色，用白色的文本显示加载信息，让用户知道游戏正在加载中，尚未准备好接受用户的任何输入。

下面，我们创建一个JavaScript资源加载器loader对象。loader将首先加载资源，然后更新加载画面的div元素。

loader对象包含以下几个组成部分：

方法，用以探查并保存浏览器支持的音频文件格式

加载图像和声音文件的两个方法—— 和 。调用时，这两个方法都会递增变量totalCount，并将结果显示在加载画面上

方法，当某个资源完成夹加载时调用它。该方法更新已加载资源的数目和加载消息。一旦所有的资源都加载完成，加载画面就会隐藏起来，而一个可选的 方法会被调用（若定义了）。这允许我们指定一个回调函数，在所有的资源加载完成后被调用。

注意使用回调函数可以很容易地让我们在图像加载时进行等待，一旦图像加载完毕，就立刻开始游戏。

在loader可以使用之前，我们还需要再 方法内部调用loader.init() game.init()`方法如下所示：

加载关卡

现在，我们有了资源加载器，让我们来着手加载关卡。首先加载游戏的背景、前景和弹弓图像，通过在levels对象内部定义 方法实现。

level对象内部 方法的基本框架

方法为game对象添加了currentLevel属性来保存已加载的关卡数据。目前只加载了三幅图。最终，我们会使用这个方法加载所有用于构建游戏的资源，包括英雄、敌人、障碍物。

一旦图像被加载完毕，我们就调用 方法。根据是否全部加载完成，我们立刻调用它，或者设置它为onload事件的回调函数。 方法是游戏真正开始的地方。

以上。