Bagaimanakah anda boleh menggunakan jQuery/JavaScript untuk melakukan pengesanan perlanggaran antara elemen segi empat tepat?

Pengesanan Perlanggaran jQuery/JavaScript

Dalam bidang pembangunan web, selalunya perlu untuk mengesan apabila dua elemen pada halaman bertembung. Maklumat ini penting dalam pelbagai aplikasi, seperti permainan interaktif, animasi dan reka letak spatial.

Apabila berurusan dengan bentuk segi empat tepat yang mudah seperti

elemen bergerak dalam arah serenjang, pengesanan perlanggaran boleh menjadi tugas yang mudah. Berikut ialah penyelesaian JavaScript yang menggunakan jQuery untuk mencapai ini:

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0]  r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

Fungsi ini mengambil dua elemen jQuery (a dan b) sebagai argumen dan mengembalikan boolean yang menunjukkan sama ada ia bertindih. Ia berbuat demikian dengan mengira kedudukan dan dimensi elemen terlebih dahulu dan membandingkannya untuk menentukan sama ada terdapat sebarang persimpangan.

Untuk menunjukkan kefungsian, berikut ialah coretan HTML yang mentakrifkan kawasan segi empat tepat dengan berbilang kotak berwarna bergerak dalam ia:

<div>
<p>Akhir sekali, jQuery digunakan untuk menyemak secara dinamik untuk perlanggaran:</p>
<pre class="brush:php;toolbar:false">$(function () {
    var area = $( '#area' )[0],
        box = $( '#box0' )[0],
        html;
    
    html = $( area ).children().not( box ).map( function ( i ) {
        return '<p>Red box + Box ' + ( i + 1 ) + ' = ' + overlaps( box, this ) + '</p>';
    }).get().join( '' );

    $( 'body' ).append( html );
});

Kod ini berulang melalui kotak dalam kawasan itu, tidak termasuk kotak merah (#box0) dan mengira sama ada setiap kotak berlanggar dengannya. Hasilnya kemudiannya dipaparkan dalam senarai

elemen dalam penyemak imbas.

Pendekatan ini berkesan mengesan pertindihan

elemen dan boleh disesuaikan dengan mudah untuk mengendalikan bentuk dan trajektori yang lebih kompleks dengan mengubah suai fungsi getPositions() dengan sewajarnya.