六角形地图坐标 - ＆gt; 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）所需的平铺步数。