加载/渲染一个新的基于平铺的地图到HTML5画布，替换一个旧的地图

Loading/rendering a new tile-based map to HTML5 canvas, replacing an old map

本文关键字：地图 一个 HTML5 画布 替换 加载 于平铺      更新时间：2023-09-26

问题摘要

JSFiddle代码

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

背景

我有一套HTML5画布游戏的平铺地图。我希望在玩家离开画布边缘时能够清除画布并加载新地图，但目前我正在使用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);
}

以前的研究

我已经阅读了涉及基于瓦片的地图和画布的各种堆叠流问题，但其中大多数似乎都涉及第一次渲染地图的问题——我的地图最初是有效的，所以解决方案似乎不太相关。

到目前为止，我已经做了很多测试（登录到控制台，放置故意的错误），看看我是否可以确定问题的来源。起初，我认为如何选择下一个应该加载的映射有问题，但事实并非如此，因为无论currentMap的值是设置为room2还是[[1,1,1,1,1],[1,1,1,1,1],[1,1,1,1,1]]，输出结果都不正确。

（关于清除画布的注意事项：当我的大游戏文件是一部分时，我通常会在drawMap函数中清除"背景"画布。然而，为了进行JSFiddle测试，我将其注释掉了。当画布保留旧地图时，我发现更容易"可视化"损坏的代码输出。画布是否被清除对新地图的无法显示。）

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

function drawMap(myMap) {
    mapLocationX = 0;
    mapLocationY = 0;
相关文章：