Question

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

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

所以这就是我想做的事情

检查图像和声音的加载状态。
在加载资源时增加加载百分比，并分别增加进度条。

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

Answer 1

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

首先，添加到totalResources计数器，以便游戏知道预期会有多少资源。
将eventListeners添加到加载资源，然后添加到loadingResources计数器。如果加载成功或失败，请添加到loadingResources计数器。
计数器相等后，加载所有资源，或加载某些文件时出现错误。

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

现在，根据您制作游戏的方式，失败的资源负载不应该真正阻止游戏的运行。例如，如果声音没有正确加载，它就不会播放。如果需要加载资源，您可能需要重试或中止。

对于基于％的加载，这有点不确定。 HTML5规范包含一个进度条，但对于多个资源，您最好的选择可能只是在资源加载时填满的栏。

<强>附录：

声音文件加载非常痛苦，而且我在所有浏览器中都没有成功。这就是我如何去做的事情：

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

sound.channels[i].volume = 0;

sound.channels[i].play();

（另外，要重播声音，请在声音暂停时将duration设置为接近0的值。）
为了允许同时播放多个声音，最好有多个音频元素（因此上面是channels数组）。但是，您不需要等待加载所有声道。一旦加载，克隆节点并再次强制进行静音播放以避免任何延迟。
使用canplaythrough事件回调来查看声音是否准备就绪更为可靠。如果无法加载声音，请使用error回调。问题是有许多错误可能导致声音文件无法加载。
请勿忘记使用<source>元素来支持多种音频格式。

Answer 2

想加入我的两分钱值得。除了loadCounter之外，我建议你有errorCounter并根据当前文件是成功还是失败来增加每个变量。在循环结束时，您可以检查这两者的总和是否等于totalCounter。

Answer 3

这样的事情：

var assetsToLoad = [],
    assetsLoaded = 0;

var image = new Image();
image.addEventListener("load", loadHandler, false);
image.src = "image.png";
assetsToLoad.push(image);

//...Load other assests, following the same format...

function loadHandler() {
    assetsLoaded++;
    //Display "Loading" in the console while assets are being loaded
    console.log("Loading...");
    //If everthing is loaded, do this:
    if (assetsLoaded === assetsToLoad.length) {
      //Make the game play, possibly by changing its state from "loading" to "playing"
      console.log("All assets loaded");
    }
}

为HTML5游戏添加游戏加载器

3 个答案: