二维等距网格中的点击检测？

我从事网络开发已经很多年了，我正在慢慢地参与游戏开发，对于我当前的项目，我有这个等轴测图，我需要使用算法来检测正在单击哪个字段。顺便说一句，这一切都是在浏览器中使用 Javascript 实现的。

The map
看起来像this https://i.stack.imgur.com/W4cPq.jpg我添加了一些数字来向您展示字段（图块）的结构及其 ID。所有字段都有一个中心点（x,y 数组），四个角在绘制时都基于该中心点。
正如您所看到的，它不是菱形，而是锯齿形地图，并且没有角度（自上而下的视图），这就是为什么我自己找不到答案，因为考虑到所有文章和计算通常都基于菱形有一个角度。

号码
这是一个动态地图，所有尺寸和数字都可以更改以生成新地图。
我知道这不是很多数据，但地图是根据地图和字段大小生成的。
- 地图尺寸：x:800 y:400
- 场地大小：80x80（角落之间）
- 所有字段的中心位置 (x,y)

The goal
提出一种算法，告诉客户端（游戏）鼠标在任何给定事件（点击、移动等）时位于哪个字段。

免责声明
我确实想提一下，我自己已经提出了一个可行的解决方案，但是我 100% 确定它可以用更好的方式编写（我的解决方案涉及大量嵌套的 if 语句和循环），那就是为什么我在这里问。

Here's https://i.stack.imgur.com/h8zRj.jpg我的解决方案的一个例子，我基本上找到一个在最近的 4 个已知位置有角的正方形，然后根据 2 个最近的字段之间的最小正方形得到结果。这有任何意义吗？

问我是否错过了什么。

这就是我想出的，

function posInGrid(x, y, length) {
xFromColCenter = x % length - length / 2;
yFromRowCenter = y % length - length / 2;
col = (x - xFromColCenter) / length;
row = (y - yFromRowCenter) / length;
if (yFromRowCenter < xFromColCenter) {
    if (yFromRowCenter < (-xFromColCenter))--row;
    else++col;
} else if (yFromRowCenter > xFromColCenter) {
    if (yFromRowCenter < (-xFromColCenter))--col;
    else++row;
}
return "Col:"+col+", Row:"+row+", xFC:"+xFromColCenter+", yFC:"+yFromRowCenter;
}

X和Y是图像中的坐标，长度是网格的间距。

现在它返回一个字符串，只是为了测试..结果应该是行和列，这些是我选择的坐标：你的图块1有坐标(1,0)图块2是(3,0)，图块10是( 0,1)，图块 11 是 (2,1)。您可以将我的坐标转换为您的一两行编号图块。

和一个用于测试的 JSFiddlehttp://jsfiddle.net/NHV3y/ http://jsfiddle.net/NHV3y/

Cheers.

EDIT:更改了返回语句，保留了一些用于调试的变量。