p5.js 在网页编辑器的 preload() 函数中加载时卡住了

Question

我正在使用 p5.js，我和我的朋友正在开发一个游戏来娱乐。我们正在使用网页编辑器。我们使用

preload

函数导入了一些资源。这将显示加载屏幕。然而，它永远不会“停止”加载。不幸的是，我无法真正将代码放在这里，因为代码太多，但我可以为你们提供一个片段和一个链接。 这里是我们的 p5 草图的链接：

https://editor.p5js.org/adsfzxc940/sketches/jkCZbn4oM

这是我们的预加载函数，我们认为这是问题的根源：

function preload() {
  images = [
    loadImage("defensive.png"),
    loadImage("offensive.png"),
  ];

  sounds = [
    loadSound("blades.mp3"),
    loadSound("shiver.mp3"),
    loadSound("error.mp3"),
    loadSound("lies.mp3"),
  ];

  // Sound variable shortcuts
  music.push(sounds[0], sounds[1], sounds[3]);
  menuSong = music[2];
  error = sounds[2];
  lies = loadSound("lies.mp3");

  // Image variable shortcuts
  // baseImages.defensive = images[1];
  // baseImages.offensive = images[2];
}

所有文件均已定义，您可以通过链接或此图片看到：

我们甚至尝试检查资产位置，但似乎没有什么可以阻止它在加载时卡住。奇怪的是 p5 甚至没有告诉我们有任何错误。我们几乎可以肯定，

preload

函数就是造成这种情况的原因，因为删除它后，游戏运行正常。

任何帮助将不胜感激，因为这已经让我烦恼了几个小时，我们不想重新开始。请注意，我和与我一起参与此工作的人对 JavaScript 非常陌生。

Answer 1

需要考虑的一件事是 loadSound 函数是异步的，它可能会导致加载屏幕无限期挂起。您可以尝试使用 p5.js

preload()

函数来加载资源，因为它可以确保在调用 setup() 和 draw() 之前加载所有资源。

下面是如何在 p5.js 中使用

loadImage()

和

loadSound()

构建预加载函数的示例

preload()

:

function preload() {
  images = [
    loadImage("defensive.png"),
    loadImage("offensive.png"),
  ];

  sounds = [
    loadSound("blades.mp3"),
    loadSound("shiver.mp3"),
    loadSound("error.mp3"),
    loadSound("lies.mp3"),
  ];
}

然后，您可以在设置和绘制函数中使用这些加载的资源。尝试一下，如果有帮助或者您遇到任何其他问题，请告诉我。快乐编码！