HTML5ゲームに衝突を追加する方法 - ダミー

HTML5ビデオゲームの中で最も興味深いのは、スプライトが絡んで衝突するときです。ゲームエンジンには通常、2つのスプライトが重なっているかどうかをテストするためのツールがあります。これは衝突検出と呼ばれ、さまざまな方法で実行できます。この例では、標準の境界矩形スキームを使用しています。完璧ではありませんが、実装が非常に簡単で一般的に使用されています。

<！ - 1 - >

ゲームで境界矩形の衝突を設定する方法

colTestを見てください。 htmlと簡単な例が表示されます。

colTestでは。 htmlの例では、マウスを使ってクリッターを動かすと、画面の中央でクリッターがボックスに触れているときにメッセージが表示されます。

colTest。 html checkCollisions（）; ボックス。更新（）;クリッター。 update（）;} //更新を終了します。 function checkCollisions（）{ if（box。collidesWith（critter））{ 出力。 innerHTML = "衝突"; } else { 出力。 innerHTML = "衝突なし"; } // end if } // end checkCollisions empty

このコードではいくつかの面白いことが起こっています：

<！ - 2 - >

通常のマウスカーソルを非表示にします。

他のオブジェクトをマウスの後に置くときは、通常は通常の矢印カーソルを隠したいと思う。 simplegameでは、ゲームを使用します。 hideCursor（）メソッドを使用して、ゲーム画面内のマウスカーソルを非表示にします。
複数のスプライトを作成します。

タンゴや衝突するには2つかかります。この例では、ボックスは静止したままになり、マウスの後にはクリッターが表示されます。
<！ - 3 - >
クリッターにfollowMouse（）メソッドを与えます。

この例では、マウスの後にマウスを置いています。 followMouse（）メソッドを作成します。
マウスの位置を決定します。

マウスの位置は文書と共に（simplegame.jsで）決定されます。 mouseXとドキュメント。 mouseYプロパティ。
マウスの位置をクリッターの位置にコピーします。

マウスのx位置を使用してクリッターのx位置を設定し、yを繰り返します。
フレームごとにクリッターのfollowMouse（）メソッドを呼び出します。

通常通り、update（）関数は繰り返し発生するコードを置く場所です。

あなたがcolTestで遊んでいれば。 HTMLページでは、衝突が正確ではないことに気付くでしょう。クリッターが実際にボックスに触れていないときでも、衝突レジスターを持つことが可能です。これは、simpleGameが bounding box collisions というスキームを使用するため重要です。

これは、実際に画像が衝突するかどうかを確認するのではなく、画像の周囲の四角形が衝突するかどうかを確認することです。この例では、その差は軽微ですが、このメカニズムでは、特に細長い要素で重大なエラーが発生することがあります。スプライトが回転すると、境界矩形のサイズが変わる可能性があります。

あなたのゲームの距離に基づく衝突

衝突検出の代替形式は、バウンドサークル衝突と呼ばれます。このメカニズムでは、2つのスプライトの中心間の距離を単純に計算し、その値がある閾値よりも小さい場合は、衝突と見なします。このアプローチには2つの利点があります。

衝突距離は一定です。 画像が回転すると、画像のサイズが変わっても画像中心間の距離は変わりません。衝突閾値は変更可能である。
任意の感度を設定できます。衝突が容易になるように大きな衝突半径を設定し、スプライトが互いに非常に近い場合にのみ衝突を発生させたい場合は小さな衝突半径を設定します。 simpleGameライブラリのSpriteオブジェクトには、あるスプライトから別のスプライトまでの距離を計算するdistanceTo（）メソッドがあります。遠方にこのコードの例を見ることができます。 htmlの例：

距離。 htmlのvarのゲーム; varボックス。ヴァル・クリッター; var出力;関数init（）{ゲーム=新しいシーン（）;ゲーム。 hideCursor（）; box =新しいスプライト（ゲーム、 "simpleBox。png"、50、50）;クリッター=新しいスプライト（ゲーム、 "動物.gif"、50、50）;出力=ドキュメント。 getElementById（ "output"）; //ボックス固定位置ボックスを与える。 setPosition（200、150）;ボックス。 setSpeed（0）;クリッター。 setPosition（100、100）;クリッター。 setSpeed（0）; //マウス・クリッターによって制御される動物。 followMouse = function（）{これです。 setX（document。mouseX）;この。 setY（document.myY）;} // followMouseゲームを終了します。 start（）;} //終了するinit関数update（）{ゲーム。 clear（）;クリッター。 followMouse（）;

checkDistance（）; ボックス。更新（）;クリッター。 update（）;} //更新を終了します。 function checkDistance（）{ dist = box。 distanceTo（クリッター）; if（dist <50）{出力。 innerHTML = "衝突：" + dist; } else { 出力。 innerHTML = "衝突なし：" + dist; } // end if } // end checkDistance empty 距離ベースの衝突方法は、境界の長方形のバージョンと非常によく似ています。古いcheckCollisions（）のように動作するcheckDistance（）関数を作成します。 checkDistanceで何が起こるかの手順は次のとおりです。 2つのスプライト間の距離を求めます。

スプライトのdistanceTo（）メソッドを使用して、2つのスプライト間の距離を判定します。距離がある閾値よりも小さい場合には、それを衝突としてカウントする。

一般に、より小さなスプライトの幅を衝突しきい値の開始点として使用する必要がありますが、衝突を多かれ少なかれ調整できるように調整することができます。

衝突状態を報告します。
この例では単に「衝突」または「衝突なし」と表示していますが、実際のゲームでは他のアクションのために衝突が発生します：スコアの増加、寿命の短縮、衝突した要素の速度または位置の変更、または何でも。（うまくいけば、それは爆発を伴う。）