Bagaimana untuk Mengesan Perlanggaran Antara Dua Div Menggunakan JavaScript dan jQuery?

Cara Mengesan Perlanggaran Antara Dua DIV

Apabila bekerja dengan elemen dinamik pada halaman web, adalah penting untuk dapat mengesan perlanggaran antara mereka. Dalam keadaan ini, kami berurusan dengan dua div berwarna ringkas yang bergerak berserenjang antara satu sama lain.

Penyelesaian:

Untuk menentukan sama ada div berlanggar, kami akan memanfaatkan JavaScript dan perpustakaan jQuery. Berikut ialah pecahan penyelesaian:

1. Dapatkan Kedudukan: Kami mula-mula mengira kedudukan kedua-dua div menggunakan fungsi getPositions(), yang mengembalikan tatasusunan dua dimensi yang mewakili koordinat kiri dan atas setiap div.
2. Bandingkan Kedudukan: Menggunakan fungsi comparePositions(), kami membandingkan kedudukan setiap div. Jika tepi kiri satu div kurang daripada tepi kiri yang lain dan tepi kanan div pertama lebih besar daripada tepi kiri kedua, perlanggaran berlaku. Begitu juga, kami menyemak perlanggaran dalam arah menegak.
3. Semak Tindih: Fungsi overlaps(), yang mengambil dua div sebagai input, menggabungkan fungsi sebelumnya untuk menentukan sama ada ia bertindih. Jika mereka melakukannya, fungsi itu kembali benar; jika tidak, ia mengembalikan palsu.
4. Laksanakan dalam JavaScript: Kami menggabungkan fungsi overlaps() ke dalam fungsi jQuery yang menguji sama ada div merah (box0) bertembung dengan mana-mana div lain ( kotak 1-4). Hasilnya kemudiannya dilampirkan pada badan halaman.

Kod Contoh:

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]);
    };
})();

$(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);
});

Penyelesaian ini cekap dan tepat untuk mengesan perlanggaran antara secara berserenjang div bergerak. Ia menyediakan alat yang berguna untuk pelbagai aplikasi web interaktif, seperti permainan dan simulasi.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Perlanggaran Antara Dua Div Menggunakan JavaScript dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!