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 <div> 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] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > 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>

Akhir sekali, jQuery digunakan untuk menyemak secara dinamik untuk perlanggaran:

$(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 <div> elemen dan boleh disesuaikan dengan mudah untuk mengendalikan bentuk dan trajektori yang lebih kompleks dengan mengubah suai fungsi getPositions() dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimanakah anda boleh menggunakan jQuery/JavaScript untuk melakukan pengesanan perlanggaran antara elemen segi empat tepat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!