3

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

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

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

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

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

这是我的解决方案的一个示例，我基本上在最近的 4 个已知位置找到一个带角的正方形，然后根据两个最近的字段之间的最小正方形得到我的结果。这有任何意义吗？

问我是否遗漏了什么。

4

3 回答 3

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)。您可以在一两行中将我的坐标转换为您的编号图块。

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

干杯。

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

于 2011-04-11T09:19:43.807 回答
0

我过去使用的一种像素完美的命中检测方法（在 OpenGL 中，但概念也适用于此）是对场景进行离屏渲染，其中不同的对象用不同的颜色标识。

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

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

于 2011-04-10T13:30:44.680 回答
-1

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

这里有几个很好的资源：

来自 Laserbrain Studios，等距编程的基础知识

此处发布的线程中的有用文章，用 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)
于 2011-04-10T13:32:54.633 回答