Функции изображения HTML5 Canvas запускаются, но иногда изображения не отображаются

Question

Я создаю интерфейс для игры telnet. Функции изображений запускаются, когда я получаю обновление telnet, и все анализируется.

По большей части моя функция работает правильно. Иногда, когда изображения меняются, на холсте рисуется первая функция изображения floorLoad и четвертая функция изображения southWall . Я использую загрузчик функций, и в консоли я вижу, что все функции изображения запускаются и находятся в правильном порядке. Если я перезагружаю комнату, уходя и возвращаясь к ней, она работает так, как задумано. Вот наглядный пример того, о чем я говорю.

Вот как это выглядит, когда это нормально

Вот ошибка, которая возникает

Обратите внимание, что пол покрывает всю площадь floorLoad и стрелку, указывающую вниз, которая southWall

Буду признателен за любую помощь или руководство по устранению неполадок. У меня нет 404, все изображения загружаются из кеша, я использую предварительный загрузчик изображений при первой загрузке на страницу:

    // Preload Room Art
    $('#preload').load('art_preload.php', function() {   
        $('#preload').remove();   
    });

Вот моя функция художественного оформления комнаты:

function room_update (str) {

var north_wall_neg;
var east_wall_neg;
var south_wall_neg;
var west_wall_neg;

//////////////////////////////////////////////////////////////////
// Room Exits
//////////////////////////////////////////////////////////////////
var exits;
var room_exits = str.match( /<prompt\ .*~(.*)~.*>/ );
if ( room_exits !== null && room_exits.length !== 0 ) {
    exits = room_exits[1];
} else {
    exits = "";
}

//////////////////////////////////////////////////////////////////
// Room Art
//////////////////////////////////////////////////////////////////
var room_art = str.match( /<RA\ (.*)\ (.*)\ (.*)\ (.*)\ (.*)>/ );
if ( room_art !== null && room_art.length !== 0 ) {

    function roomArt () {
        var defer = $.Deferred();
        //////////////////////////////////////////////////////////////////
        // Vars
        //////////////////////////////////////////////////////////////////
        var imgPath = "./images/room_art/";

        //////////////////////////////////////////////////////////////////
        // Floor
        //////////////////////////////////////////////////////////////////
        var floor_tile_num = room_art[5];
        function floorLoad (floor_tile_num) {
            var defer = $.Deferred();
            var images = ['tile' + floor_tile_num + '.png'];
                var loadedImages = {};
                var promiseArray = images.map(function(imgurl){
                   var prom = new Promise(function(resolve,reject){
                       var img = new Image();
                       img.onload = function(){
                           loadedImages[imgurl] = img;
                           resolve();
                       };
                       img.src = imgPath + imgurl;
                   });
                   return prom;
                });
                Promise.all(promiseArray).then(function(){
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 45);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 95);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 145);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 195);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 245);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 295);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 345);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 45);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 95);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 145);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 195);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 245);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 295);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 345);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 45);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 95);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 145);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 195);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 245);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 295);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 345);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 45);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 95);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 145);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 195);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 245);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 295);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 345);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 45);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 95);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 145);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 195);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 245);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 295);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 345);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 45);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 95);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 145);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 195);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 245);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 295);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 345);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 45);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 95);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 145);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 195);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 245);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 295);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 345);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 45);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 95);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 145);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 195);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 245);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 295);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 345);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 45);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 95);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 145);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 195);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 245);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 295);
                    ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 345);
                });
                console.log("<-- FLOOR -->");
                return defer;
        }

        //////////////////////////////////////////////////////////////////
        // North Wall
        //////////////////////////////////////////////////////////////////
        var north_wall_num  = room_art[1];
        if ( north_wall_num < 0 ) {
            north_wall_num = north_wall_num.replace("-", "");
            north_wall_neg = "1";
        }
        function northWall (pos, north_wall_num) {
            var defer = $.Deferred();
            if ( pos.indexOf(" N ") != -1 ) {
                var arrowExit = new Image();
                arrowExit.src = './images/room_art/arrowExit.png';
                arrowExit.onload = function(){
                    ctx.drawImage(arrowExit, 201, 45);
                };
            } else {
                var images = ['Cwall' + north_wall_num + '.png', 'wall' + north_wall_num + '.png', 'Door1.png', 'DoorN1.png'];
                var loadedImages = {};
                var promiseArray = images.map(function(imgurl){
                   var prom = new Promise(function(resolve,reject){
                       var img = new Image();
                       img.onload = function(){
                           loadedImages[imgurl] = img;
                           resolve();
                       };
                       img.src = imgPath + imgurl;
                   });
                   return prom;
                });
                Promise.all(promiseArray).then(function(){
                    // Corners
                    if ( pos.indexOf(" W ") != -1 ) {
                        ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 2, 45);
                    } else if ( north_wall_neg == "1" ) {
                        ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 2, 45);
                    } else {
                        drawRotatedImage(loadedImages['Cwall' + north_wall_num + '.png'], 27, 70, 270);
                    } 
                    if ( pos.indexOf(" E ") != -1 ) {
                        ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 402, 45);
                    } else if ( north_wall_neg == "1" ) {
                        ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 402, 45);
                    } else {
                        ctx.drawImage(loadedImages['Cwall' + north_wall_num + '.png'], 402, 45);
                    }
                    // Walls
                    ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 52, 45);
                    ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 102, 45);
                    ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 152, 45);
                    ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 202, 45);
                    ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 252, 45);
                    ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 302, 45);
                    ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 352, 45);
                    // Door
                    if ( pos.indexOf(" -N ") != -1 ) {
                        ctx.drawImage(loadedImages['Door1.png'], 217, 65);
                    }
                    if ( pos.indexOf(" oN ") != -1 ) {
                        ctx.drawImage(loadedImages['DoorN1.png'], 217, 65);
                    }
                });
            }
            console.log("<-- N WALL -->");
            return defer;
        }

        //////////////////////////////////////////////////////////////////
        // East Wall
        //////////////////////////////////////////////////////////////////
        var east_wall_num   = room_art[2];
        function eastWall (pos, east_wall_num) {
            var defer = $.Deferred();
            if ( pos.indexOf(" E ") != -1 ) {
                var arrowExit = new Image();
                arrowExit.src = './images/room_art/arrowExit.png';
                arrowExit.onload = function(){
                    drawRotatedImage(arrowExit, 427, 221, 90);
                };
            } else {
                if ( pos.indexOf(" -E ") != -1 ) {
                    var images = ['Cwall' + east_wall_num + '.png', 'wall' + east_wall_num + '.png', 'Door1.png']; 
                } else if ( pos.indexOf(" oE ") != -1 ) {
                    var images = ['Cwall' + east_wall_num + '.png', 'wall' + east_wall_num + '.png', 'DoorN1.png']; 
                } else {
                    var images = ['Cwall' + east_wall_num + '.png', 'wall' + east_wall_num + '.png'];
                }
                var loadedImages = {};
                var promiseArray = images.map(function(imgurl){
                   var prom = new Promise(function(resolve,reject){
                       var img = new Image();
                       img.onload = function(){
                           loadedImages[imgurl] = img;
                           resolve();
                       };
                       img.src = imgPath + imgurl;
                   });
                   return prom;
                });
                Promise.all(promiseArray).then(function(){
                    // Walls
                    if ( pos.indexOf(" N ") != -1 ) {
                        drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 70, 90);
                    }
                    drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 120, 90);
                    drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 170, 90);
                    drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 220, 90);
                    drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 270, 90);
                    drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 320, 90);
                    if ( pos.indexOf(" S ") != -1 ) {
                        drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 370, 90);
                    }
                    // Door
                    if ( pos.indexOf(" -E ") != -1 ) {
                        drawRotatedImage(loadedImages['Door1.png'], 417, 221, 90);
                    }
                    if ( pos.indexOf(" oE ") != -1 ) {
                        drawRotatedImage(loadedImages['DoorN1.png'], 417, 221, 90);
                    }
                });
            }
            console.log("<-- E WALL -->");
            return defer;
        }

        //////////////////////////////////////////////////////////////////
        // South Wall
        //////////////////////////////////////////////////////////////////
        var south_wall_num  = room_art[3];
        if ( south_wall_num < 0 ) {
            south_wall_num = south_wall_num.replace("-", "");
            south_wall_neg = "1";
        }
        function southWall (pos, south_wall_num) {
            var defer = $.Deferred();
            if ( pos.indexOf(" S ") != -1 ) {
                var arrowExit = new Image();
                arrowExit.src = './images/room_art/arrowExit.png';
                arrowExit.onload = function(){
                    drawRotatedImage(arrowExit, 228, 370, 180);
                };
            } else {
                if ( pos.indexOf(" -S ") != -1 ) { 
                    var images = ['Cwall' + south_wall_num + '.png', 'wall' + south_wall_num + '.png', 'Door1.png'];
                } else if ( pos.indexOf(" oS ") != -1 ) { 
                    var images = ['Cwall' + south_wall_num + '.png', 'wall' + south_wall_num + '.png', 'DoorN1.png']; 
                } else { 
                    var images = ['Cwall' + south_wall_num + '.png', 'wall' + south_wall_num + '.png'];
                }
                var loadedImages = {};
                var promiseArray = images.map(function(imgurl){
                   var prom = new Promise(function(resolve,reject){
                       var img = new Image();
                       img.onload = function(){
                           loadedImages[imgurl] = img;
                           resolve();
                       };
                       img.src = imgPath + imgurl;
                   });
                   return prom;
                });
                Promise.all(promiseArray).then(function(){
                    // Corners
                    var south_wall_num_neg;
                    if ( pos.indexOf(" W ") != -1 ) {
                        drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 27, 370, 180);
                    } else if ( south_wall_neg == "1" ) {
                        drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 27, 370, 180);
                    } else {
                        drawRotatedImage(loadedImages['Cwall' + south_wall_num + '.png'], 27, 370, 180);
                    } 
                    if ( pos.indexOf(" E ") != -1 ) {
                        drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 427, 370, 180);
                    } else if ( south_wall_neg == "1" ) {
                        drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 427, 370, 180);
                    } else {
                        drawRotatedImage(loadedImages['Cwall' + south_wall_num + '.png'], 427, 370, 90);
                    }
                    // Walls
                    drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 77, 370, 180);
                    drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 127, 370, 180);
                    drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 177, 370, 180);
                    drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 227, 370, 180);
                    drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 277, 370, 180);
                    drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 327, 370, 180);
                    drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 377, 370, 180);
                    // Door
                    if ( pos.indexOf(" -S ") != -1 ) {
                        drawRotatedImage(loadedImages['Door1.png'], 227, 360, 180);
                    }
                    if ( pos.indexOf(" oS ") != -1 ) {
                        drawRotatedImage(loadedImages['DoorN1.png'], 227, 360, 180);
                    }
                });
            }
            console.log("<-- S WALL -->");
            return defer;
        }

        //////////////////////////////////////////////////////////////////
        // West Wall
        //////////////////////////////////////////////////////////////////
        var west_wall_num   = room_art[4];
        function westWall (pos, west_wall_num) {
            var defer = $.Deferred();
            if ( pos.indexOf(" W ") != -1 ) {
                var arrowExit = new Image();
                arrowExit.src = './images/room_art/arrowExit.png';
                arrowExit.onload = function(){
                    drawRotatedImage(arrowExit, 27, 217, 270);
                };
            } else {
                if ( pos.indexOf(" -W ") != -1 ) {
                    var images = ['Cwall' + west_wall_num + '.png', 'wall' + west_wall_num + '.png', 'Door1.png']; 
                } else if ( pos.indexOf(" oW ") != -1 ) {
                    var images = ['Cwall' + west_wall_num + '.png', 'wall' + west_wall_num + '.png', 'DoorN1.png']; 
                } else {
                    var images = ['Cwall' + west_wall_num + '.png', 'wall' + west_wall_num + '.png'];
                }
                var loadedImages = {};
                var promiseArray = images.map(function(imgurl){
                   var prom = new Promise(function(resolve,reject){
                       var img = new Image();
                       img.onload = function(){
                           loadedImages[imgurl] = img;
                           resolve();
                       };
                       img.src = imgPath + imgurl;
                   });
                   return prom;
                });
                Promise.all(promiseArray).then(function(){
                    // Walls
                    if ( pos.indexOf(" N ") != -1 ) {
                        drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 70, 270);
                    }
                    drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 120, 270);
                    drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 170, 270);
                    drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 220, 270);
                    drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 270, 270);
                    drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 320, 270);
                    if ( pos.indexOf(" S ") != -1 ) {
                        drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 370, 270);
                    }
                    // Door
                    if ( pos.indexOf(" -W ") != -1 ) {
                        drawRotatedImage(loadedImages['Door1.png'], 36, 217, 270);
                    }
                    if ( pos.indexOf(" oW ") != -1 ) {
                        drawRotatedImage(loadedImages['DoorN1.png'], 36, 217, 270);
                    }
                });
            }
            console.log("<-- W WALL -->");
            return defer;
        }

        //////////////////////////////////////////////////////////////////
        // Room Art Function Calls
        //////////////////////////////////////////////////////////////////
        floorLoad(floor_tile_num)
        .then(northWall(exits, north_wall_num))
        .then(eastWall(exits, east_wall_num))
        .then(southWall(exits, south_wall_num))
        .then(westWall(exits, west_wall_num));
        console.log("<-- SEQUENCE -->");
        return defer;
    }

    roomArt();
}

//////////////////////////////////////////////////////////////////
// On <prompt
//////////////////////////////////////////////////////////////////
if ( room_exits !== null && room_exits.length !== 0 ) {
    console.log("Room exists...");
    function darkRoom () {
        var defer = $.Deferred();
        var room_dark = str.match( /<room\ .*><(.*)>.*<room end>/ );
        if ( room_dark !== null && room_dark.length !== 0 ) {
            if ( room_dark[1] == "dark" ) {
                ctx.fillStyle = "#000000";
                ctx.fillRect(2, 45, 450, 350);
                console.log("it's dark!");
            }
        }
        return defer;
    }
    darkRoom();
    // Door Artwork
    // North Wall
    switch (true) {
        case room_exits[1].indexOf(" N ") != -1:
            var arrowExit_n = new Image();
            arrowExit_n.src = './images/room_art/arrowExit.png';
            arrowExit_n.onload = function(){
                ctx.drawImage(arrowExit_n, 201, 45);
            };
            break;
        case room_exits[1].indexOf(" -N ") != -1:
            var doorClosed_n = new Image();
            doorClosed_n.src = './images/room_art/Door1.png';
            doorClosed_n.onload = function(){
                ctx.drawImage(doorClosed_n, 217, 65);
            };
            break;
        case room_exits[1].indexOf(" oN ") != -1:
            var doorOpen_n = new Image();
            doorOpen_n.src = './images/room_art/DoorN1.png';
            doorOpen_n.onload = function(){
                ctx.drawImage(doorOpen_n, 217, 65);
            };
            break;
    }

    // West Wall
    switch (true) {
        case room_exits[1].indexOf(" W ") != -1:
            var arrowExit_w = new Image();
            arrowExit_w.src = './images/room_art/arrowExit.png';
            arrowExit_w.onload = function(){
                drawRotatedImage(arrowExit_w, 27, 217, 270);
            };
            break;
        case room_exits[1].indexOf(" -W ") != -1:
            var doorClosed_w = new Image();
            doorClosed_w.src = './images/room_art/Door1.png';
            doorClosed_w.onload = function(){
                drawRotatedImage(doorClosed_w, 36, 217, 270);
            };
            break;
        case room_exits[1].indexOf(" oW ") != -1:
            var doorOpen_w = new Image();
            doorOpen_w.src = './images/room_art/DoorN1.png';
            doorOpen_w.onload = function(){
                drawRotatedImage(doorOpen_w, 36, 217, 270);
            };
            break;
    }
    // South Wall
    switch (true) {
        case room_exits[1].indexOf(" S ") != -1:
            var arrowExit_s = new Image();
            arrowExit_s.src = './images/room_art/arrowExit.png';
            arrowExit_s.onload = function(){
                drawRotatedImage(arrowExit_s, 228, 370, 180);
            };
            break;
        case room_exits[1].indexOf(" -S ") != -1:
            var doorClosed_s = new Image();
            doorClosed_s.src = './images/room_art/Door1.png';
            doorClosed_s.onload = function(){
                drawRotatedImage(doorClosed_s, 227, 360, 180);
            };
            break;
        case room_exits[1].indexOf(" oS ") != -1:
            var doorOpen_s = new Image();
            doorOpen_s.src = './images/room_art/DoorN1.png';
            doorOpen_s.onload = function(){
                drawRotatedImage(doorOpen_s, 227, 360, 180);
            };
            break;
    }
    // East Wall
    switch (true) {
        case room_exits[1].indexOf(" E ") != -1:
            var arrowExit_e = new Image();
            arrowExit_e.src = './images/room_art/arrowExit.png';
            arrowExit_e.onload = function(){
                drawRotatedImage(arrowExit_e, 427, 221, 90);
            };
            break;
        case room_exits[1].indexOf(" -E ") != -1:
            var doorClosed_e = new Image();
            doorClosed_e.src = './images/room_art/Door1.png';
            doorClosed_e.onload = function(){
                drawRotatedImage(doorClosed_e, 417, 221, 90);
            };
            break;
        case room_exits[1].indexOf(" oE ") != -1:
            var doorOpen_e = new Image();
            doorOpen_e.src = './images/room_art/DoorN1.png';
            doorOpen_e.onload = function(){
                drawRotatedImage(doorOpen_e, 417, 221, 90);
            };
            break;
    }
    // Stairs
    switch (true) {
        case room_exits[1].indexOf(" U ") != -1:
            var stairsUp = new Image();
            stairsUp.src = './images/room_art/stairsUP.png';
            stairsUp.onload = function(){
                ctx.drawImage(stairsUp, 205, 221);
            };
            break;
        case room_exits[1].indexOf(" -U ") != -1:
            var stairsUp = new Image();
            stairsUp.src = './images/room_art/stairsUP.png';
            stairsUp.onload = function(){
                ctx.drawImage(stairsUp, 205, 221);
            };
            break;
        case room_exits[1].indexOf(" oU ") != -1:
            var stairsUp = new Image();
            stairsUp.src = './images/room_art/stairsUP.png';
            stairsUp.onload = function(){
                ctx.drawImage(stairsUp, 205, 221);
            };
            break;
        case room_exits[1].indexOf(" D ") != -1:
            var stairsDown = new Image();
            stairsDown.src = './images/room_art/stairsDOWN.png';
            stairsDown.onload = function(){
                ctx.drawImage(stairsDown, 205, 221);
            };
            break;
        case room_exits[1].indexOf(" -D ") != -1:
            var stairsDown = new Image();
            stairsDown.src = './images/room_art/stairsDOWN.png';
            stairsDown.onload = function(){
                ctx.drawImage(stairsDown, 205, 221);
            };
            break;
        case room_exits[1].indexOf(" oD ") != -1:
            var stairsDown = new Image();
            stairsDown.src = './images/room_art/stairsDOWN.png';
            stairsDown.onload = function(){
                ctx.drawImage(stairsDown, 205, 221);
            };
            break;
    }

}
room_art = "";
north_wall_neg = "";
east_wall_neg  = "";
south_wall_neg = "";
west_wall_neg  = "";
}  

вывод на консоль:

<-- FLOOR -->
<-- N WALL -->
<-- E WALL -->
<-- S WALL -->
<-- W WALL -->
<-- SEQUENCE -->

Answer 1

Вывод на консоль не доказывает, что код работает так, как вы думаете.Есть некоторые проблемы с тем, как вы используете обещания.Я предлагаю добавить еще несколько операторов отладки, чтобы гарантировать, что весь код фактически выполняется.

Во-первых, я считаю, что вы смешиваете две разные системы для обещаний (и не используете их правильно):

• $.Deferred() - это реализация jQuery
• new Promise() - это собственная реализация JS

Так что между floorLoad.then() и promiseArray. нет абсолютно никакой связи. Возможно, это былонамеренно, но это будет меньше путать только с одним типом обещания.

Если у вас есть defer = $.Deferred(), то defer должно быть решено в каком-то месте.Ваш код отсутствует defer.resolve().

Обычно отсутствие defer.resolve() означает, что код, переданный в .then(), никогда не будет выполнен, но есть вторая проблема: код внутри этих вызовов .then()не упакован внутри функций:

floorLoad(floor_tile_num)
.then(northWall(exits, north_wall_num))
.then(eastWall(exits, east_wall_num))
.then(southWall(exits, south_wall_num))
.then(westWall(exits, west_wall_num))

Без функций для их переноса код выполняется немедленно, а результаты передаются в .then(), поэтому код в основном такой же, как:

floorLoad(floor_tile_num);
northWall(exits, north_wall_num);
eastWall(exits, east_wall_num);
southWall(exits, south_wall_num);
westWall(exits, west_wall_num);

Поэтому я предлагаю вам:

• Выберите один тип обещания и придерживайтесь его везде.
• Оберните код внутри .then() функциями, чтобы выполнение фактически задерживалось.
• Добавить больше журнала отладки.В частности:
  • Убедитесь, что каждый .onload() вызывается, как и ожидалось.
  • Убедитесь, что каждый .all() вызывается, как и ожидалось.