ライブラリを使用せずに JavaScript で衝突検出を実装するにはどうすればよいですか?

JavaScript での衝突検出

問題: jQuery や gameQuery などのライブラリを使用せずに JavaScript で衝突検出を実装する移動オブジェクトを伴う単純なシナリオ。

解決策:

2 つのオブジェクト間の衝突を検出するには、単純な外接四角形ルーチンを使用できます。各オブジェクトを表す四角形が位置と寸法を比較することによって重なり合っているかどうかを計算します。

関数 isCollide() は、オブジェクト a と b によって表される四角形が交差するかどうかをチェックします。

<code class="javascript">function isCollide(a, b) {
    return !(
        ((a.y + a.height) < (b.y)) ||
        (a.y > (b.y + b.height)) ||
        ((a.x + a.width) < b.x) ||
        (a.x > (b.x + b.width))
    );
}</code>

ここで:

• a と b は、プロパティ x、y、幅、高さを持つオブジェクトです。

この関数を使用するには、関連するオブジェクトの位置を含む配列を作成できます。衝突検知で。次に、配列を反復処理して、移動オブジェクトが事前定義されたオブジェクトのいずれかと衝突するかどうかを確認できます。

この境界四角形ルーチンを使用すると、複雑な処理を必要とせずに、JavaScript で基本的な衝突検出を実装できます。

対話型の例:

[ここ](https://codepen.io/MixerOID/pen/Rwgeob) をクリックして、 isCollide() 関数の動作中。移動オブジェクト間の衝突の検出を示しています。

以上がライブラリを使用せずに JavaScript で衝突検出を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。