我正在使用 HTML5 和 JavaScript 创建一个简单的游戏。
最初,当游戏开始时,加载图像和声音需要一些时间。 在此期间,用户必须等待并且屏幕看起来不愉快。
这就是我想做的
检查图像和声音的加载状态。
加载资源时增加加载百分比,分别增加进度条。
我真的不知道从哪里开始。请指导我。
最佳答案
监控所有加载项的加载状态可能会让人望而生畏,但简而言之,最好的方法是执行以下操作:
首先,添加到
totalResources
计数器,因此游戏知道需要多少资源。添加
eventListeners
加载资源,并添加到loadingResources
柜台。如果加载成功或失败,请添加到loadingResources
柜台。一旦计数器相等,要么加载了所有资源,要么加载某些文件时出现一些错误。
这种方法的问题是,在极少数情况下,loadingResources
可以匹配 totalResources
过早变化。您可以通过制作一个标志来检查所有需要加载的资源是否已经开始加载来解决这个问题。
现在,根据您制作游戏的方式,资源加载失败不应真正阻止游戏运行。例如,如果声音没有正确加载,它就不会播放。如果资源需要加载,您可能想要重试或中止。
至于基于 % 的加载,这有点不确定。 HTML5 规范包括一个进度条,但对于多个资源,您最好的选择可能只是一个随着资源加载而填满的进度条。
附录:
声音文件加载起来非常痛苦,而且我在所有浏览器上都没有成功完善它。以下是我的处理方式:
首先,不要依赖
load()
调用加载audio
的函数元素。相反,强制它播放,就像这样:sound.channels[i].volume = 0;
sound.channels[i].play();
(此外,要重播声音,请在声音暂停时将
duration
设置为接近 0 的值。)为了允许同时播放多个声音,最好有多个音频元素(因此是上面的
channels
数组)。但是,您无需等待所有声道加载完毕。一旦加载,克隆节点并再次强制静音播放以避免任何延迟。据说使用
canplaythrough
更可靠事件回调以查看声音是否准备就绪。如果声音加载失败,请使用error
打回来。问题是有许多错误会导致无法加载声音文件。不要忘记使用
<source>
允许多种音频格式的元素。
关于javascript - 为 HTML5 游戏添加游戏加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11951870/