javascript - 在 2D 等距网格中点击检测？

Question

我多年来一直从事网络开发，并且正在慢慢参与游戏开发，对于我当前的项目，我有这张等轴测图，我需要使用一种算法来检测哪个领域正在被开发点击。顺便说一下，这一切都在浏览器中使用 Javascript。

map
看起来像 this我添加了一些数字来向您展示字段(图 block )的结构及其 ID。所有字段都有一个中心点(x,y 数组)，绘制四个 Angular 时基于该中心点。
如您所见，它不是菱形，而是锯齿形图，并且没有 Angular (自上而下 View )，这就是为什么考虑到所有文章和计算通常都基于菱形，我自己找不到答案的原因有一个 Angular 。

数字
这是一张动态 map ，所有尺寸和数字都可以更改以生成新 map 。
我知道这不是很多数据，但 map 是根据 map 和字段大小生成的。
- map 大小:x:800 y:400
- field 大小:80x80( Angular 之间)
- 所有字段的中心位置 (x,y)

目标
提出一种算法，告诉客户端(游戏)鼠标在任何给定事件(点击、移动等)中位于哪个区域。

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

Here's我的解决方案的一个例子，我基本上在最近的 4 个已知位置找到一个带 Angular 的正方形，然后我根据 2 个最近的字段之间的最小正方形得到我的结果。这有什么意义吗？

询问我是否遗漏了什么。

Answer 1

这是我想出的，

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是图像中的坐标，length是网格的间距。

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

还有一个用于测试的 JSFiddle http://jsfiddle.net/NHV3y/

干杯。

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