我一直在努力解决这个问题——所以我真的必须寻求帮助。
我创建了一个基于 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 游戏来说是必不可少的。
有什么建议么?