Question

我一直在努力解决这个问题 - 所以我真的必须寻求帮助。

我创建了一个基于CSS的游戏地图，它将DIV的形状覆盖在Hexagon Tiles的形状中（如桌面游戏）。我正在尝试找到哪些图块与当前活动图块相邻。

我已经能够从左上到右下依次生成地图的ID，并为每个切片分配坐标。从那里我用毕达哥拉斯定理来计算2 X＆amp; Y Coords之间的距离（这需要我一段时间来弄清楚）。实际上事情非常接近，但问题是因为六角形瓷砖地图基本上是“交错的”（例如它不是正方形网格而两个相邻的瓷砖不在同一条水平线上），当我计算距离时，几块瓷砖这实际上是两步之遥，数学比邻近的瓷砖更接近。

我已经对我构建的内容进行了演示，因此您可以看到我正在谈论的内容。

http://www.pitashi.com/map/index.php

如果您点击任何图块，它将刷新页面并在“当前位置”上放置一个标记。然后，每个图块显示坐标和距当前位置的计算距离。如果您点击周围，您会看到许多不与当前位置相邻的图块距离更近。

CODE：

// 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游戏至关重要。

有什么建议吗？

Answer 1

如果没有草图，解释起来有点困难，但我认为解决方案相当简单。六边形的x坐标是正常的，但是y坐标的一半需要校正。当我点击上面的链接时，标记的六边形的坐标为x = 315，y = 162。此列中所有单元格的y坐标需要增加27.因此，对于162，y坐标应为189.对于正上方的单元格，y坐标。应该从108更改为135.在该单元格上方增加y坐标。从54到81，依此类推。需要对每个第二列进行此更改，即对于所有具有与我们刚才谈论的高度完全相同的六边形的列。如果进行此更改，毕达哥拉斯计算允许您测试相邻单元格，因为它将产生六边形中心之间的距离。希望有所帮助。祝你的游戏好运。

Answer 2

您可以在XY平面中使用欧几里德距离。

两个坐标P1（x1，y1）和P2（x2，y2）之间的距离由下式给出：

sqrt( (y1-x1)^2 + (y2-x2)^2 )

如果你不关心实际的距离，而只关心最近的点，你不应该采用平方根，而是只使用：

(y1-x1)^2 + (y2-x2)^2

这是一个更快更准确的，因为它是一个整数表达式（而不是浮点数）。

Answer 3

你是以错误的方式解决这个问题，将董事会概念化为一系列在页面上运行的专栏。

{[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]相邻的sapces，我们就会知道它们是

[0,1]，[1,1]，[2,1]，[0,2]，[2,2]，[1,3]

使用X＆amp; X在地图上找到相邻的六边形瓷砖Y坐标

CODE：

3 个答案: