4

Tronに似た古いゲームをHTML5キャンバス+JSで再現しています。主な違いは、ヘビは直角に回転せず、曲線を描いて移動できることです（名前はAchtung Die Kurveです）。

衝突を検出する必要がありますが、方法がわかりません。ルールは本当にシンプルで、私が思いついたり読んだりすることはすべて不必要に複雑に見えます。衝突は次の場合に発生します。

  1. ヘビは別のヘビの体（またはそれ自体）に頭からぶつかります（非常に初期の実験では、ヘビが動くとすぐに、私のヘビの頭が後ろ向きに押しつぶされて自分の「首」になったためです：P）。

  2. ヘビが壁にぶつかります（内壁はありません）。

これについてはどうすればよいですか？必要なデータをオブジェクトに追加したいと思います。

4

5 に答える 5

2

キャンバス ピクセルのサイズ (幅*高さ) のメモリ内 2 次元ブール配列を持つことができます。私は、配列は常に壁（気にするなら内壁でもかまいません）とヘビの体のブール値を入力します。

各反復で、配列内のヘビの頭の位置を確認します。値が true の場合、衝突があります。

理論的には、キャンバス自体のピクセル値をチェックすることでこれを行うことができますが、背景パターンやその他の衝突不可能な要素を使用したい場合はうまくいきません.

于 2011-07-16T01:14:17.237 に答える
1

スネークヘッドが動くたびに（おそらくすべてのフレーム）、スネークヘッドの前面の座標を取得することをお勧めします。

次に使用しますsnakeHead.style.display = 'none';

スネーク ヘッドを一時的に非表示にします (レンダリングの前にもう一度表示します)。

次にdocument.elementFromPoint(x, y)、スネーク ヘッドの真下にある要素を確認します。おそらく、衝突を引き起こすすべての要素に衝突可能なクラスまたは何かを追加してテストします

var class = ' '+document.elementFromPoint(x, y).className+' ';
if(class.indexOf(' collidable ') > -1){
    alert('Collision!');
}

次に、もちろんスネーク ヘッドを再表示します。

snakeHead.style.display = 'whatever is was before probably inline';

ただのアイデア。

elementFromPoint はブラウザとの互換性も良好です: http://www.quirksmode.org/dom/w3c_cssom.html#documentview

プレイ方法を教えてください:)

于 2011-07-16T00:16:43.473 に答える
0

まず、皆さんの回答に感謝します！私はあなたが投稿したものを読み、もう少し読み、いくつかの考えをし、次のことをすることにしました：

ゲームエリアを表すバイトマップを保持し、ポジションが占有されるたびに、値に1を加算します。次に、ヘビの頭の4つの角の3つの「外側」の角（「内側」の角が体の残りの部分と衝突する）の!= 1値をチェックします。

コードを単純にするために、非表示のキャンバスとアルファ値を使用すると思います。

申し訳ありませんが、私は受け入れるために自分の答えを書きました。私が実装する実際のソリューションの記録を保持することが重要だと思います。どの答えも私の決定を完全に詳しく説明していません。

于 2011-07-17T16:32:36.413 に答える
0

ピクセルの完全な衝突チェックが必要ですか？おそらく、ゲームエリアをグリッドとして扱い（ピクセル単位で完璧かどうかに関係なく）、各ヘビが占めるグリッド位置を示す各ヘビのリストを保持するのが最善の方法です。次に、ヘビの頭の位置とその方向を表すベクトルを保存し、ヘビが占めるすべてのグリッド位置に対して位置+ベクトルをテストします。それほど最適化する必要がある場合は、ハッシュセットを使用して、このプロセスを効率的にすることができます。

于 2011-07-16T01:49:26.163 に答える
0

最良のオプションは、ヘビをセグメントに分割し、メモリに保存して、それらのセグメントに対する衝突をチェックすることだと思いました。

于 2014-04-30T16:06:04.757 に答える