六角形地图坐标 - > 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）。