如何从二维数组(JS）中获取网格的坐标

How to obtain coordinates of a grid made from a two dimensional Array (JS)?

本文关键字：获取 网格 坐标 JS 二维数组      更新时间：2023-09-26

期望结果：

我想通过打印400张代表瓷砖的图像来创建一张20x20的地图。然后，我希望能够点击这些图像，并收到通知，告诉我该瓷砖的相应坐标。

问题/错误：

无论我单击哪个磁贴，警报消息总是显示x:19，y19，我假设这是仅生成的最后一个磁贴。我想，在赋值方面，我做错了什么。

我是如何尝试的：

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

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

之后，我为创建了另外两个循环，以遍历所有这些元素，并相应地一个接一个地打印它们的值(为了保持模块化方法，我在前两个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="tileclick(k，m("完成所有这些之后，我定义了这个函数的实际作用(显示坐标(：

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

如有任何帮助，我们将不胜感激。谢谢你抽出时间。

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

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

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

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

下面的代码可以随心所欲地工作，但我不推荐它，因为它没有经过优化。因为包括getElementById和innerHTML在内的大多数DOM方法都是高成本函数，所以最好尽可能避免调用它们。

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;
相关文章：