Javascript 将新的基于平铺的贴图加载/渲染到HTML5画布，替换旧贴图

问题摘要

当通过

setUpGame

调用My

drawMap

函数时，该函数可以正常工作，但当通过单击按钮调用时，则不能正常工作。其他人能否根据我下面的描述确定问题

背景

我有一套用于HTML5画布游戏的瓷砖贴图。我希望能够在玩家离开画布边缘时清除画布并加载新的地图，但目前我还没有

当My

setUpGame

函数运行时，我的代码在开始时工作正常，这从可见的地图中不言而喻。但是，单击测试按钮后，新地图无法加载，尽管使用了与

setUpGame

功能相同的代码。我很确定它正在加载地图数据本身，减去图形表示，但还没有找到一个好的方法来证明这一点，或者进一步说明错误

这就是我在游戏设置期间以及随后单击测试按钮时所做的：

currentMap = room1; // manually assigning room 1 or 2
drawMap(currentMap);

以下是drawMap函数：

function drawMap(myMap) {
    for (var i = 0; i < myMap.length; i++) {
        for (var j = 0; j < myMap[i].length; j++) {
            if (myMap[i][j] === 0) {
                drawTile(0, 0, 32, 32); // grass
            }
            if (myMap[i][j] === 1) {
                drawTile(32, 0, 32, 32); // stone
            }
            if (myMap[i][j] === 2) {
                drawTile(64, 0, 32, 32); // water
            }
            if (myMap[i][j] === 3) {
                drawTile(96, 0, 32, 32); // sand
            }
            if (myMap[i][j] === 4) {
                drawTile(128, 0, 32, 32); // lava
            }
            mapLocationX += 32;
        }
        mapLocationX = 0;
        mapLocationY += 32;
    }
}

function drawTile(imgStartX, imgStartY, imgEndX, imgEndY) {
    var tileImgSrc = allGameImages[0]; // map spritesheet
    BACKGROUND.drawImage(tileImgSrc, imgStartX, imgStartY, imgEndX, imgEndY, mapLocationX, mapLocationY, 32, 32);
}

以前的研究

我已经阅读了涉及基于平铺的贴图和画布的各种stackoverflow问题，但大多数问题似乎都是第一次涉及渲染贴图的问题-我的贴图最初是有效的，因此解决方案似乎不是很相关

到目前为止，我已经做了很多测试（登录到控制台，放置故意的错误），看看是否可以确定问题的来源。起初，我认为存在问题，但情况似乎并非如此，因为无论

currentMap

的值是设置为

room2

还是

[[1,1,1,1,1]，[1,1,1,1,1,1]，[1,1,1,1,1]，[1,1,1,1,1]]，输出结果都不正确

（关于清除画布的注意事项：当我的游戏文件成为较大游戏文件的一部分时，我通常会清除
drawMap
函数中的“背景”画布。但是出于JSFIDLE测试的目的，我将其注释掉。我发现当画布保留旧地图时，更容易“可视化”损坏的代码输出anvas是否清除不会影响新地图的显示失败。）
必须在每个新drawMap（）的开始处重置mapLocationY=0，否则将在画布下方绘制平铺

function drawMap(myMap) {
    mapLocationX = 0;
    mapLocationY = 0;

太棒了-太简单了！谢谢：）