为HTML5游戏添加游戏加载器

Question

我正在用HTML5和JavaScript创建一个简单的游戏.

最初,当游戏开始时,需要一些时间来加载图像和声音.在此期间,用户必须等待并且屏幕看起来不愉快.

所以这就是我想要做的

1. 检查图像和声音的加载状态.

2. 加载资源时增加加载百分比,并分别增加进度条.

我真的没有任何关键从哪里开始.请指导我.

Answer 1

监控所有装载物品的装载状态可能令人生畏,但简而言之,最好的方法是执行以下操作:

• 首先,添加到totalResources计数器,以便游戏知道预期有多少资源.

• 添加eventListeners到加载资源,并添加到loadingResources计数器.如果加载成功或失败,请添加到loadingResources计数器.

• 计数器相等后,加载所有资源,或加载某些文件时出现一些错误.

使用这种方法的方法是,在极少数情况下,loadingResources可以totalResources过早地匹配变量.您可以通过创建一个标志来解决此问题,该标志检查是否已经开始加载所有需要加载的资源.

现在,根据您制作游戏的方式,失败的资源负载不应该真正阻止游戏的运行.例如,如果声音无法正确加载,则无法播放.如果需要加载资源,您可能需要重试或中止.

对于基于%的加载,这有点不确定.HTML5规范包括一个进度条,但对于多个资源,您最好的选择可能只是在加载资源时填满的条形图.

附录:

声音文件是一个巨大的痛苦加载,我几乎没有成功完善它在所有浏览器.这是我如何去做的:

1. 首先,不要依赖load()函数来调用加载audio元素.相反,强迫它发挥,如下:

   sound.channels[i].volume = 0;

   sound.channels[i].play();

   (另外,要重放声音,请duration在声音暂停时将其设置为接近0的值.)

2. 为了允许多个声音同时播放,最好有多个音频元素(因此channels上面的数组).但是,您无需等待加载所有声道.一旦加载,克隆节点并再次强制进行静音播放以避免任何延迟.

3. 使用canplaythrough事件回调来查看声音是否准备就绪更为可靠.如果无法加载声音,请使用error回调.问题是有许多错误可能导致声音文件无法加载.

4. 不要忘记使用<source>元素来允许多种音频格式.