Question

期望的结果：

我想通过打印代表图块的400张图片来创建一个20x20的地图。然后，我希望能够单击这些图像并接收警报，告诉我该图块的相应坐标。

问题/错误：

无论我点击哪个Tile，警告消息总是说x：19，y19，我假设它是仅生成的最后一个tile。我想，在分配价值时，我会做错事。

我是如何尝试的：

我使用两个 for 循环将20 x 20元素网格创建为二维数组。我使用此代码使其所有元素都等于0。

    for (j = 0; j < 20; j++)
{   
    for (i = 0; i < 20; i++)
    { 
        mapxy[j][i] = 0;
    }
}

之后，我创建另外两个 for 循环来遍历所有这些元素并相应地打印它们的值，一个接一个地打印（我不会在前两个中执行此操作< em> fors 保持模块化方法）：

    for (m = 0; m < 20; m++)
{
    for(k = 0; k < 20; k++)
    {
        document.getElementById("map").innerHTML += "<img onclick=\"tileclick(k,m)\" src=\"" + tiletype[mapxy[k][m]] + "\"/>";
    }
    document.getElementById("map").innerHTML += "</br>";
}

请注意onclick =＆＃34; tileclick（k，m）＆＃34;完成所有这些后，我定义了这个函数实际做了什么（显示坐标）：

function tileclick(k,m)
{
    alert('x: ' + k + ' y: ' + m);
}

非常感谢任何帮助。谢谢你的时间。

Answer 1

您正在使用全局变量(k and m)，因此您的代码正在运行（意味着没有崩溃），但这部分很乱：

document.getElementById("map").innerHTML += "<img onclick=\"tileclick(k,m)\" src=\"" + tiletype[mapxy[k][m]] + "\"/>";

单击图像时，您正在使用tileclick和k变量调用m。此时，k = 19和m = 19（循环后）。这就是为什么你得alert 19,19的原因。一种解决方案是通过以下方式更改您的行：

document.getElementById("map").innerHTML += "<img onclick=\"tileclick("+k+","+m+")\" src=\"" + tiletype[mapxy[k][m]] + "\"/>";

Answer 2

以下代码可以按照您的意愿运行，但我不推荐它，因为它没有经过优化。因为大多数DOM方法（包括getElementById和innerHTML）都是高成本函数，所以最好避免尽可能多地调用它们。

for (m = 0; m < 20; m++)
{
    for(k = 0; k < 20; k++)
    {
        document.getElementById("map").innerHTML += "<img onclick=\"tileclick("+k+","+m+")\" src=\"" + tiletype[mapxy[k][m]] + "\" />";
    }
    document.getElementById("map").innerHTML += "<br />";
}

小优化：

var content = '';

for (m = 0; m < 20; m++)
{
    for(k = 0; k < 20; k++)
    {
        content += '<img onclick="tileclick('+k+','+m+')" src="' + tiletype[mapxy[k][m]] + '" />';
    }
    content += '<br />';
}
document.getElementById("map").innerHTML = content;

如何获得由二维数组（JS）制作的网格坐标？

2 个答案: