XMLHttpRequest在JavaScript标题游戏中引起奇怪的错误

Question

我正在用JS编写一个平铺游戏，并且正在加载一个带有XMLHttpRequest对象的基于文本的地图。一切顺利，直到我真正尝试绘制背景。地图被初始化，但是当我尝试循环遍历行时，它似乎没有被“完全”初始化。当我尝试调用map[rowNum].length时，我收到一个未定义的错误。在调试器中，我可以看到一旦代码跳回loadMapHttp()，这是定义XMLHttpRequest对象的地方。我不明白为什么会这样做。

var map =[];
var tiles =[];
var background = new Image();

var canvas = document.getElementById("canvas");
var graphicsContext = canvas.getContext('2d');

background.src = "imgs/tileSheet.jpg";

function loadMapHttp() {
    var conn = new XMLHttpRequest();
    conn.onreadystatechange = handleStateChange;

    conn.open("GET","map.txt",true);
    conn.send();


    function handleStateChange() {
        if(conn.readyState === 4){
            loadMap2(conn.status == 200 ? conn.responseText : null);
        }
    }

}


function loadMap2(text) {

    if(text == null){
        console.warn("Http Error");
        return;
    }

    console.log("text received was: " + text);

    var testMap = text;
    var rows = testMap.split("\n");
    for(var rowNum =0; rowNum < rows.length; rowNum++){
        rows[rowNum] = rows[rowNum].trim();
        map.push([]);
        var cols = rows[rowNum].split("");
        console.log(cols);
        for(var colNum = 0; colNum<cols.length; colNum++){
            map[rowNum][colNum] = cols[colNum];
        }
    }
}

function prepTiles() {
    var TILESET_LEFT = 0;
    var TILESET_TOP = 0;
    var TILE_WIDTH = 31.2;
    var TILE_HEIGHT = 31.2;
    var tileCanvas = document.createElement('canvas');
    var tileContext = tileCanvas.getContext('2d');

    //BRICK
    tileContext.drawImage(background, TILESET_TOP+TILE_WIDTH*2, TILESET_TOP, TILE_WIDTH, TILE_HEIGHT, 0, 0, TILE_WIDTH, TILE_HEIGHT);
    tiles.push(tileContext.getImageData(0, 0, TILE_WIDTH, TILE_HEIGHT));

    //DIRT
    tileContext.drawImage(background, TILESET_LEFT+TILE_WIDTH*17, TILESET_TOP+TILE_HEIGHT*6, TILE_WIDTH, TILE_HEIGHT, 0, 0, TILE_WIDTH, TILE_HEIGHT);
    tiles.push(tileContext.getImageData(0, 0, TILE_WIDTH, TILE_HEIGHT));

    //GRASS
    tileContext.drawImage(background, TILESET_LEFT+TILE_WIDTH*6, TILESET_TOP+TILE_HEIGHT*12, TILE_WIDTH, TILE_HEIGHT, 0, 0, TILE_WIDTH, TILE_HEIGHT);
    tiles.push(tileContext.getImageData(0, 0, TILE_WIDTH, TILE_HEIGHT));

}

function getTile(char) {

    if(char == 'B'){
        return tiles[0];
    }
    if(char == 'D'){
        return tiles[1];
    }
    if(char == 'G'){
        return tiles[2];
    }
}

function drawBackground(){

    for(var rowNum=0; rowNum < 6; rowNum++){

        console.log(map[rowNum]);
        for(var colNum=0; colNum < map[rowNum].length; colNum++){
            var tile = getTile(map[rowNum][colNum]);
            graphicsContext.putImageData(tile, colNum*31, rowNum*31);

        }
    }
}



function startGame() {
    loadMapHttp();
    prepTiles();
    drawBackground();

}

startGame();