javascript - 为 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>允许多种音频格式的元素。