2

私はこれを解決するために懸命に探していました - だから私は本当に助けを求める必要があります.

六角形のタイルの形で DIV をオーバーレイする CSS ベースのゲーム マップを作成しました (テーブル トップ ゲームなど)。現在アクティブなタイルに隣接しているタイルを見つけようとしています。

マップの ID を左上から右下に順番に生成し、各タイルに座標を割り当てることができました。そこから、ピタゴラスの定理を使用して、2 つの X&Y 座標間の距離を計算しました (これを理解するのに時間がかかりました)。物事は実際には非常に近いですが、問題は、16 進タイル マップが本質的に「ずれている」ため (たとえば、正方形のグリッドではなく、隣接する 2 つのタイルがまったく同じ水平線上にない)、距離を計算すると、いくつかのタイルがずれることです。実際には 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増やす必要があります。したがって、162ではなくy座標を189にする必要があります。真上のセルの場合、y座標です。108から135に変更する必要があります。そのセルの上でy座標を増やします。54から81など。この変更は、1つおきの列に対して行う必要があります。つまり、今話している列とまったく同じ高さの六角形を持つすべての列に対して行う必要があります。この変更を行うと、ピタゴラスの計算で隣接するセルをテストできます。六角形の中心間の距離が得られるからです。お役に立てば幸いです。あなたのゲームで頑張ってください。

于 2012-12-30T00:11:50.133 に答える
0

XY 平面でユークリッド距離を使用できます。

2 つの点 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.

[0][2] に隣接するスペースを取得したい場合は、明らかに、スペースのスターガー 2D 配列に NULL を埋め込んでスタガーリングを表現します。

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

于 2012-12-29T23:48:57.273 に答える