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

JavaScript: jQuery や gameQuery を使用しない効率的な衝突検出

JavaScript ベースのゲームやシミュレーションでは衝突の検出が重要です。 jQuery と gameQuery はこのタスクに便利なメソッドを提供していますが、開発者はこれらのライブラリがオプションではない状況に遭遇する可能性があります。このような場合、カスタム ソリューションが必要です。

衝突検出の 1 つのアプローチは、オブジェクト位置の配列を作成し、移動オブジェクトに対する各オブジェクトの位置をテストすることです。ただし、この方法は計算コストが高く、リアルタイム アプリケーションには理想的ではありません。

より効率的なアプローチは、各オブジェクトの境界四角形を計算し、これらの四角形が重なっているかどうかを確認する関数を使用することです。これは単純な境界四角形ルーチンです。

<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>

この関数は、x、y、幅、高さのプロパティを持つ 2 つのオブジェクト (a と b) を受け取り、それらが衝突する場合は true を返します。それ以外の場合は false を返します。

この関数を使用するには、移動オブジェクトと衝突する可能性のある各オブジェクトの外接する四角形を単純に比較します。以下に例を示します。

<code class="javascript">// Get the current position of the ball
var ballX = ball.offsetLeft;
var ballY = ball.offsetTop;
var ballWidth = ball.offsetWidth;
var ballHeight = ball.offsetHeight;

// Create an array of someobject positions
var someobjectPositions = [];
for (var i = 0; i < someobjects.length; i++) {
    var someobject = someobjects[i];
    someobjectPositions.push({
        x: someobject.offsetLeft,
        y: someobject.offsetTop,
        width: someobject.offsetWidth,
        height: someobject.offsetHeight
    });
}

// Check for collisions
for (var c = 0; c < someobjectPositions.length; c++) {
    if (isCollide(ball, someobjectPositions[c])) {
        // Handle the collision
    }
}</code>

この効率的な外接四角形ルーチンを使用すると、jQuery や gameQuery などの重いライブラリに頼ることなく、JavaScript でリアルタイムの衝突検出を実装できます。

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