从类加载方法(图像/音频)中返回值

Question

对于我当前的game-development项目，我使用的是纯JS和HTML5 Canvas，而不是jQuery。

我有X图像加载在一个级别的开始。到目前为止，我一直在使用加载处理程序来增加一个计数器(计数加载了多少图像)，直到计数器的值为X。

一旦完成，它就开始在画布上画东西。

现在，我已经到了一个阶段，我试图把尽可能多的东西传递到它自己的特定类中。我的问题是，如果我将所有加载器放入类中，我不知道如何检查计数器的值是否正确。

我的想法是创造出这样的东西：

在GameLevel.js中

function init(player,level,actors,enemies)
    var loaded_components = 0;
    if (player.initializeImages==true)
        loaded_components++;
    if (level.initializeImages==true)
        loaded_components++;
    (...)
    if (loaded_components==5)
        initiateDrawing();

例如，在Player.js中

initializeImages(){
    loaded=0;
    maxload=10;
    this.idle.addEventListener("load",loadHandler);
    this.idle.id = "idle";
    this.idle.src = "path/idle.png";
    (...)
    loadHandler(ev){
        if (ev.id == "idle")
            loaded++;
        (...)
        if (loaded==maxLoad){
            return true;
        }
    }
}

因此，这里的问题是:我不知道如何使代码在测试时停止initializeImage()方法的返回值。如果有意义的话，我希望将所有的东西加载到正在加载的特定类中。

我也知道你可以在没有检查的情况下加载一些东西，而且我一直在用音频进行测试，但是它是不安全的，我真的很想改变它！我对此相当陌生，但如果有人有一个可行的解决方案，我很想听听。

提前感谢！

编辑:试过了，但我失败了！

我有一个类，它接收一些画布，绘制到它们，并且只有在绘制这些画布之后，代码才会向前移动。

我尝试在构造函数中做出承诺，因此它将是：

constructor(layer1,layer2,layer3,layer4){
   this.layer1 = layer1;
   (...)
   var promise = new Promise(function(resolve,reject){
         **(load everything here)**
         **(once everything is loaded, draw to the
         multiple canvasses referenced above)**
         **(all done, resolve)**
   });
}

这不管用。我试着用GameLevel.js在外面做出承诺，方式如下：

(in gameLevel):
   var promise = new Promise(..){
           scene = new Scene(layer1, layer2 (...))
           resolve("done");
   promise.then(function(){
           beginGame();
  }

这也不起作用，承诺不是..。等待，等待场景完成它的完全创建和初始化。我做错了什么？

Answer 1

下面是一个加载和呈现循环的示例。

​

function loadimage(src){
  return new Promise(resolve=>{
    let img = new Image();
    img.onload = ()=>resolve(img)
    img.src=src
  })  
}

function stageinit(){
  let imagesPromise = [
    loadimage('https://via.placeholder.com/150'),
    loadimage('https://via.placeholder.com/300')
  ]
  return Promise.all(imagesPromise)
}

stageinit().then(images=>{
    //images are loaded, do whatever you want

    let canvas = document.querySelector('canvas')
    let ctx = canvas.getContext('2d')
    let x = 0
    function gameloop(){
      requestAnimationFrame(gameloop)
      ctx.fillRect(0,0,500,500)
      ctx.drawImage(images[0],x,0)
      ctx.drawImage(images[1],x,200)
      x+=1
    }
    gameloop()
  }
)

canvas{width:80vmin;height:80vmin;border:3px solid yellow}

<canvas width=500 height=500></canvas>

​