HTML5游戏开发(四)加载

加载图像

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

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

加载画面的CSS样式

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

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

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

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

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

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

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

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

加载关卡

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

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

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

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

以上。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180401G16HR300?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券