Загрузка изображений синхронно в конструкторе - PullRequest
0 голосов
/ 21 марта 2020

Я делаю 2D-игру для моей школы. В этой игре вы управляете роботами и выполняете задания с ними. Роботы могут смотреть в 4 направлениях, и у каждого из них есть исходное изображение. Когда игра загружается, изображения загружаются в конструктор Robot ().

constructor(name, x, y, res, facing) { // res - the paths of the images (strings)
    super(x, y, facing);
    this.name = name;
    this.res = res ? res.map(s => { // I want the loaded Image objects
        let img = new Image();
        img.src = s;
        return img;
    }) : null;
}

Проблема в том, что изображения загружаются после первоначального рендеринга, а игра рендерится только при обновлении, поэтому роботы невидимый, пока размер экрана или движение. Я не могу использовать Promise.all() в конструкторе. Поскольку это игра для начинающих программистов, я не хочу использовать обходные пути stati c, поскольку это усложнит добавление новых роботов. Также я не хочу вызывать рисование в конструкторе, потому что роботы могут быть добавлены во время выполнения, а иногда и в большом количестве, поэтому рендеринг после каждого вызова будет действительно неэффективным.

Это пример программы, которую студент может записать в отдельный файл:

let r = map.robot; // the robot is pre-loaded with the map
for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++)
        r.Move();
    r.Turn_right();
}
...