Question

我已经进行了多年的网络开发，我正在慢慢开始参与游戏开发，而对于我目前的项目，我已经有了这个等距地图，我需要使用算法来检测哪个字段正在进行点击了。顺便说一句，这一切都在浏览器中使用Javascript。

地图
它看起来像this，我添加了一些数字来显示字段（图块）的结构及其ID。所有字段都有一个中心点（x，y数组），四个角在绘制时基于这些中心点你可以看到它不是钻石形状，而是一个曲折的地图，没有角度（自上而下的视图）这就是为什么我自己无法找到答案，因为所有文章和计算通常都是基于钻石形状有一个角度。

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

目标
想出一个算法，告诉客户端（游戏）鼠标在任何给定事件中的位置（点击，移动等）。

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

Here's我的解决方案的一个例子，我基本上找到一个在最近的4个已知位置有角的正方形，然后根据最近的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是图像中的坐标，长度是网格的间距。

现在它返回一个字符串，仅用于测试..结果应该是row和col，那些是我选择的坐标：你的tile 1有coords（1,0）tile 2是（3,0），tile 10是（0,1），瓦片11是（2,1）。您可以将我的坐标转换为一行或两行中的编号图块。

用于测试http://jsfiddle.net/NHV3y/

的JSFiddle

干杯。

编辑：更改了return语句，我用了一些用于调试的变量。

Answer 2

过去曾经使用的一种像素完美的命中检测方法（在OpenGL中，但概念也在这里）是场景的离屏渲染，其中不同的对象用不同的颜色识别。

这种方法需要双倍的内存和双倍的渲染，但任意复杂场景的命中检测都是通过简单的颜色查找完成的。

由于您想要检测网格中的单元格，因此可能会提供更高效的解决方案，但我想提及这一解决方案，因为它具有简单性和灵活性。

Answer 3

之前已经解决了，让我查阅一下我的笔记......

以下是一些很好的资源：

From Laserbrain Studios, The basics of isometric programming

Useful article in the thread posted here, in Java

让我知道这是否有帮助，祝你的游戏好运！

此代码计算给定间距不均匀的网格中的位置。应该很快;几乎所有操作都是数学完成的，只使用一个循环。我稍后会考虑问题的另一部分。

def cspot(x,y,length):
    l=length
    lp=length+1
    vlist = [ (l*(k%2))+(lp*((k+1)%2)) for k in range(1,y+1) ]
    vlist.append(1)
    return x + sum(vlist)

在2D等距网格中单击检测？

3 个答案: