2

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

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

所以这就是我想做的

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

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

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

4

3 回答 3

6

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

  • 首先，添加一个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>元素来允许多种音频格式。

于 2012-08-14T12:20:03.507 回答
2

像这样的东西：

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");
    }
}
于 2013-10-23T15:02:31.733 回答
1

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

于 2012-08-15T05:48:37.243 回答