使用X&Y坐标在地图上查找相邻的六边形瓷砖

Question

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

我创建了一个基于CSS的游戏地图，它以六边形瓷砖的形状覆盖了div（就像桌面游戏一样）。我正在尝试查找哪些瓷砖与当前活动瓷砖相邻。

// 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;
        }
}

?>  

有什么建议吗？

Answer 1

没有草图解释有点困难，但我认为解决方案相当简单。六边形的x坐标是可以的，但一半的y坐标需要校正。当我点击上面的链接时，标记的六边形的坐标为x=315，y=162。此列中所有单元格的y坐标都需要增加27。因此，y坐标应该是189，而不是162。对于正上方的单元格，y coord。应从108改为135。在该单元格之上增加y coord。从54岁到81岁，以此类推。每隔一列，也就是所有六边形高度与我们刚才所说的高度相同的列，都需要做这个改变。如果你做了这个改变，毕达哥拉斯计算就可以测试相邻的单元格，因为它会得到六边形中心之间的距离。希望能有所帮助。祝你的比赛好运。