六角形地圖座標 - > html渲染

Question

我有一個六角形地圖，但我意識到我的座標系對於使用一些findpath算法是不好的，所以我想對它進行改造。 我選擇了一個完全滿足我的系統。你可以找到它here。但在參考的例子中，整個地圖旋轉的方式與我需要的不同。

我的老版我的地圖是在這裏： http://dark-project.cz/wesnoth/map-view/1

我的問題是如何使我的HTML地圖具有相同的地圖，因爲我有，但現在與新的座標系？

（我渲染使用PHP循環它對於每個字段我有這樣的信息： 座標，字段類型（草，村莊，...）和現場圖像的尺寸）

謝謝您的解答！

PS：我認爲可以通過使用HTML5 Canvas來完成，但我想要很好的瀏覽器支持，並且我沒有HTML5的使用經驗（但是如果速度很快，並且我不會在客戶端渲染良好的瀏覽器支持），所以我更喜歡服務器端（PHP）解決方案！

Answer 1

您的座標系與算法演示中使用的座標系不兼容。

我認爲你最好的選擇是改變你發現使用你的座標系的算法。

AFAIK實際上需要改變：

• ，需要一個定座標，並確定了6個鄰近座標的部分。
• 確定給定座標是否在地圖邊界內的函數。
• （在某種程度上）的計算成本/距離

功能我注意到演示代碼雲：

function hex_distance(x1,y1,x2,y2) { 
    dx = Math.abs(x1-x2); 
    dy = Math.abs(y2-y1); 
    return Math.sqrt((dx*dx) + (dy*dy)); 
} 

但是，這是不準確的估計，因爲軸線不垂直。它可能產生非最佳結果 - A *搜索中得分函數的要求是產生一個不高於的值的實際成本。該功能可能違反該規則。

你的座標系統實際上將使該功能更加準確，但你也可以只用曼哈頓距離脫身：

function hex_distance(x1,y1,x2,y2) { 
    return abs(x2-x1) + abs(y2-y1); 
} 

其中，如果我沒有記錯的話，工程以瓦步數需要從（x1，y1）到（x2，y2）。