加载图像
完成关卡之前,需要实现图像加载器和加载画面。让某一关加载图像,并在图像加载完成后开始游戏。
设计一个简单的加载画面,它包含一张进度条GIF图片和显示已加载图像数目的文字。首先,将加载画面的CSS样式添加到styles.css中。
加载画面的CSS样式
这些CSS样式为游戏背景蒙上了一层浅灰色,用白色的文本显示加载信息,让用户知道游戏正在加载中,尚未准备好接受用户的任何输入。
下面,我们创建一个JavaScript资源加载器loader对象。loader将首先加载资源,然后更新加载画面的div元素。
loader对象包含以下几个组成部分:
方法,用以探查并保存浏览器支持的音频文件格式
加载图像和声音文件的两个方法—— 和 。调用时,这两个方法都会递增变量totalCount,并将结果显示在加载画面上
方法,当某个资源完成夹加载时调用它。该方法更新已加载资源的数目和加载消息。一旦所有的资源都加载完成,加载画面就会隐藏起来,而一个可选的 方法会被调用(若定义了)。这允许我们指定一个回调函数,在所有的资源加载完成后被调用。
注意使用回调函数可以很容易地让我们在图像加载时进行等待,一旦图像加载完毕,就立刻开始游戏。
在loader可以使用之前,我们还需要再 方法内部调用loader.init() game.init()`方法如下所示:
加载关卡
现在,我们有了资源加载器,让我们来着手加载关卡。首先加载游戏的背景、前景和弹弓图像,通过在levels对象内部定义 方法实现。
level对象内部 方法的基本框架
方法为game对象添加了currentLevel属性来保存已加载的关卡数据。目前只加载了三幅图。最终,我们会使用这个方法加载所有用于构建游戏的资源,包括英雄、敌人、障碍物。
一旦图像被加载完毕,我们就调用 方法。根据是否全部加载完成,我们立刻调用它,或者设置它为onload事件的回调函数。 方法是游戏真正开始的地方。
以上。
领取专属 10元无门槛券
私享最新 技术干货