javascript - 将新的基于图 block 的 map 加载/渲染到 HTML5 Canvas ，替换旧 map

Question

问题摘要

JSFiddle code

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

背景

我有一组用于 HTML5 Canvas 游戏的图 block map 。我希望能够在玩家走出 Canvas 边缘时清除 Canvas 并加载新 map ，但现在我是 testing it using a button in JSFiddle .

当我的 setUpGame 函数运行时，我的代码在开始时可以正常工作，从可见的 map 中可以看出这一点。但是，单击测试按钮后，尽管使用与 setUpGame 函数相同的代码，但新 map 无法加载。我很确定它正在加载 map 数据本身，减去图形表示，但还没有找到证明这一点的好方法，或者它进一步暗示了错误。

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

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);
}

之前的研究

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

到目前为止，我已经做了很多测试(登录到控制台，故意放置错误)，看看我是否可以查明问题的根源。一开始我以为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]]。

(关于清除 Canvas 的说明:当我的较大游戏文件的一部分时，我通常会在 drawMap 函数中清除“BACKGROUND” Canvas 。但是对于我的 JSFiddle 测试的目的我已将其注释掉。我发现当 Canvas 保留旧 map 时，更容易“可视化”损坏的代码输出。无论 Canvas 是否被清除，都不会对新 map 产生影响无法显示。)

Answer 1

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

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