加载/渲染新的基于瓦片的地图到 HTML5 画布，替换旧地图

Question

问题总结

JSFiddle code

我的drawMap 函数在通过setUpGame 调用时可以正常工作，但在通过按钮单击调用时不能正常工作。其他人可以根据我下面的描述找出问题吗？

背景

我有一组用于 HTML5 画布游戏的平铺地图。我希望能够在玩家离开画布边缘时清除画布并加载新地图，但现在我是testing it using a button in JSFiddle。

当我的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;
    }
}

这里是drawTile函数：

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

以往的研究

我已经阅读了有关基于图块的地图和画布的各种 stackoverflow 问题，但其中大多数似乎首次涵盖了渲染地图的问题 - 我的地图最初可以工作，因此解决方案似乎不太相关.

到目前为止，我已经做了很多测试（登录到控制台，故意放置错误），看看我是否可以查明问题出在哪里。起初我以为how I choose which map should load next有问题，但似乎不是这样，因为无论currentMap的值是否设置为room2或[[1,1,1,1,1],[1,1,1,1,1],[1,1,1,1,1]]，输出结果仍然不正确。

(关于清除画布的说明：当我的较大游戏文件的一部分时，我通常会清除 drawMap 函数中的“背景”画布。但是出于我的 JSFiddle 测试的目的我把它注释掉了。我发现当画布保留旧地图时，更容易“可视化”损坏的代码输出。画布是否被清除对新地图的显示失败没有影响。）

Answer 1

您必须在每个新的 drawMap() 开始时重置 mapLocationY=0，否则您的图块将绘制在画布下方。

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