在2D等距網格中單擊檢測？

Question

我已經進行了多年的網絡開發，而且我正慢慢地參與游戲開發，對於我目前的項目，我已經有了這個等距地圖，我需要使用算法來檢測點擊哪個字段。 順便說一句，這一切都在瀏覽器中使用Javascript。

地圖
它看起來像這樣 ，我添加了一些數字來顯示字段（圖塊）的結構及其ID。 所有字段都有一個中心點（x，y數組），四個角在繪制時基於這些中心點。
你可以看到它不是鑽石形狀，而是一個曲折的地圖，沒有角度（自上而下的視圖）這就是為什么我自己無法找到答案，因為所有文章和計算通常都是基於鑽石形狀有一個角度。

號碼
這是一張動態地圖，可以更改所有尺寸和數字以生成新地圖。
我知道它不是很多數據，但地圖是根據地圖和字段大小生成的。
- 地圖大小：x：800 y：400
- 場尺寸：80x80（角落之間）
- 所有字段的中心位置（x，y）

目標
想出一個算法，告訴客戶端（游戲）鼠標在任何給定事件（點擊，移動等）中所處的哪個字段。

放棄
我想提一下，我自己已經提出了一個可行的解決方案，但是我100％肯定它可以用更好的方式編寫（我的解決方案涉及很多嵌套的if語句和循環），那就是為什么我在這里問。

這是我的解決方案的一個例子，我基本上找到一個在最近的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，那些是我選擇的坐標：你的瓷磚1有坐標（1,0）瓷磚2是（3,0），瓷磚10是（ 0,1），圖塊11是（2,1）。 您可以將我的坐標轉換為一行或兩行中的編號圖塊。

和一個用於測試的JSFiddle http://jsfiddle.net/NHV3y/

干杯。

編輯：更改了返回語句，有一些我用於調試的變量。

Answer 2

我曾經使用的一種像素完美的命中檢測方式（在OpenGL中，但概念也在這里）是場景的離屏渲染，其中不同的對象用不同的顏色識別。

這種方法需要雙倍的內存和雙倍的渲染，但任意復雜場景的命中檢測是通過簡單的顏色查找完成的。

由於您想要檢測網格中的單元格，因此可能有更高效的解決方案，但我想提及這一點，因為它的簡單性和靈活性。

Answer 3

這已經解決了，讓我來看看我的筆記......

這里有幾個很好的資源：

來自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)