Question

问题摘要

我的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的值是否设置为{{1}，输出结果仍然不正确}或room2。

（关于清除画布的说明：当我的大型游戏文件的一部分时，我通常会清除[[1,1,1,1,1],[1,1,1,1,1],[1,1,1,1,1]]功能中的＆＃39; BACKGROUND＆＃39;画布。但是出于我的JSFiddle测试的目的，我已将其注释掉了。我发现当画布保留旧地图时，更容易看到破损的代码输出。无论画布是否被清除都没有＆和＃39;对新地图无法显示有影响。）

Answer 1

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

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

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

1 个答案: