为 HTML5 游戏添加游戏加载程序

Add a Game Loader for HTML5 game

本文关键字：游戏 程序 加载 添加 HTML5      更新时间：2023-09-26

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

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

所以这就是我想做的

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

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

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

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

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

像这样：

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");
    }
}

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

相关文章：