我一直在努力寻找解决这个问题的方法，所以我真的必须寻求帮助。
我已经创建了一个基于CSS的游戏地图，覆盖DIV的六边形瓷砖的形状(像桌面游戏)。我想找出哪些贴图与当前的活动贴图相邻。
我已经能够从左上角到右下角依次生成地图的ID，并为每个tile分配坐标。然后，我使用勾股定理来计算两个x & &;Y轴之间的距离(这花了我一些时间来计算)。事情实际上是非常接近的，但问题是，因为十六进制贴图本质上是"交错的"(例如，它不是一个正方形网格，两个相邻的贴图不在同一条水平线上)，当我计算距离时，几个实际上相距2步的贴图，数学计算出比相邻的贴图更近。
我已经做了一个演示，这样你就能明白我在说什么了。
http://www.pitashi.com/map/index.php如果你点击任何瓷砖，它会刷新页面，并在你的"当前位置"上放一个标志。然后每个贴图显示坐标和计算出的与当前位置的距离。如果你点击周围，你会看到许多没有与当前位置接壤的瓷砖距离更近。
代码:
// load the map DIV tags (90 tiles)
if (isset($_GET['x'])) {
$gl_map_x = $_GET['x'];
} else $gl_map_x = 0;
if (isset($_GET['y'])) {
$gl_map_y = $_GET['y'];
} else $gl_map_y = 0;
if (isset($_GET['mapid'])) {
$gl_map_id = $_GET['mapid'];
} else $gl_map_id = 42;
$i = 1;
$x = 0;
$y = 0;
while ($i <= 90) {
echo "<div class='hexagon hexagon" . $i . "' onclick="window.location=('index.php?mapid=". $i . "&x=" . $x . "&y=" . $y . "')"><div class='hexagon-in1'>";
echo "<div class='hexagon-in2'>";
if ($i == $gl_map_id) {
echo "<img class='hexstar" . $i . "' src='images/map_star1.png' />";
}
$distance = round(sqrt(pow($gl_map_x - $x, 2) + pow($gl_map_y - $y, 2)), 2);
echo "<div style='color:#ffffff; padding-left:48px; padding-top:30px;'>" . $x . ", " . $y . "<br />" . $distance . "</div>";
//echo "<div style='color:#ffffff; font-weight:bold; padding-left:48px; padding-top:30px;'>" . $distance . "</div>";
//echo "<div style='color:#ffffff; padding-left:48px; padding-top:30px;'>" . $i . "</div>";
echo "</div></div></div>";
$i++;
$x = $x + 63;
if ($x > 756) {
$x = 63;
$y = $y + 54;
} elseif ($y == 432) {
$x = $x + 63;
}
}
?>
我知道我必须使用一些额外的数学来补偿瓷砖的错开，但我在这个问题上已经超出了我的工资等级。但是这个功能对于我的RPG游戏来说是必不可少的。
有什么建议吗?
没有草图就很难解释，但我认为解决方案相当简单。六边形的x坐标是可以的，但是一半的y坐标需要修正。当我点击上面的链接时，标记的六边形的坐标是x= 315, y=162。这一列中所有单元格的y坐标需要增加27。因此y坐标应该是189，而不是162。对于正上方的单元格，y坐标应从108更改为135。在该单元格上方，y坐标从54增加到81，以此类推。这个改变需要在每隔一列进行，也就是说，对于所有具有与我们刚刚讨论的高度完全相同的六边形的列。如果您做了这个更改，毕达哥拉斯计算允许您测试相邻的单元格，因为它将产生六边形中心之间的距离。希望这对你有所帮助。祝你游戏顺利。
可以在XY平面上使用欧几里得距离
两个点P1(x1, y1)和P2(x2, y2)之间的距离由:
sqrt( (y1-x1)^2 + (y2-x2)^2 )
如果你不关心实际距离，而只关心最近的点，你不应该取平方根，而应该使用:
(y1-x1)^2 + (y2-x2)^2
这是一个更快更准确的整数表达式(而不是浮点数)。
你用错了方法，把板子的概念定义为一系列贯穿页面的列。
{[0][0], NULL , [2][0]}
{ NULL ,[1][1], NULL }
{[0][1], NULL , [2][1]}
{ NULL ,[1][2], NULL }
{[0][2], NULL , [2][2]}
{ NULL ,[1][3], NULL }
//The nulls are just to make it clearer feel free to optimize.
显然我们有一个错开的二维数组空格填充null来表示错开，如果我们想要得到与[0][2]相邻的空间，我们就知道它们是
[0,1], [1], [2 1], (0, 2), (2, 2) [1,3]