2

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

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

我已经能够从左上角到右下角依次生成地图的 ID，并为每个图块分配坐标。从那里我使用勾股定理来计算 2 个 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 游戏来说是必不可少的。

有什么建议么？

4

3 回答 3

1

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

于 2012-12-30T00:11:50.133 回答
0

您可以使用 XY 平面中的欧几里得距离。

两个点 P1(x1, y1) 和 P2(x2, y2) 之间的距离由下式给出：

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

如果您不关心实际距离，而只关心最近的点，则不应取平方根，而应仅使用：

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

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

于 2012-12-29T23:48:47.923 回答
0

你走错路了，将板概念化为页面上的一系列列。

{[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 填充的参差不齐的 2D 空间数组来表示交错，如果我们想获得与 [0][2] 相邻的空间，我们会知道它们是

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

于 2012-12-29T23:48:57.273 回答