Wie erkennt man Kollisionen zwischen zwei Divs mithilfe von JavaScript und jQuery?

So erkennen Sie Kollisionen zwischen zwei DIVs

Bei der Arbeit mit dynamischen Elementen auf einer Webseite ist es wichtig, Kollisionen zwischen erkennen zu können ihnen. In diesem Fall haben wir es mit zwei einfachen farbigen Divs zu tun, die sich senkrecht zueinander bewegen.

Die Lösung:

Um festzustellen, ob die Divs kollidieren, führen wir Folgendes durch Nutzen Sie JavaScript und die jQuery-Bibliothek. Hier ist eine Aufschlüsselung der Lösung:

1. Positionen abrufen: Wir berechnen zunächst die Positionen beider Divs mit der Funktion getPositions(), die ein zweidimensionales Array zurückgibt, das die darstellt linke und obere Koordinaten jedes Div.
2. Positionen vergleichen: Mit der Funktion „comparePositions()“ vergleichen wir die Positionen jeder Division. Wenn der linke Rand eines Div kleiner ist als der linke Rand des anderen und der rechte Rand des ersten Div größer ist als der linke Rand des zweiten, kommt es zu einer Kollision. Ebenso prüfen wir auf Kollisionen in vertikaler Richtung.
3. Überlappungen prüfen: Die Funktion „overlaps()“, die zwei Divs als Eingabe verwendet, kombiniert die vorherigen Funktionen, um festzustellen, ob sie sich überlappen. Wenn dies der Fall ist, gibt die Funktion „true“ zurück; andernfalls wird false zurückgegeben.
4. Implementierung in JavaScript: Wir integrieren die Funktion „overlaps()“ in eine jQuery-Funktion, die testet, ob das rote Div (box0) mit einem der anderen Divs kollidiert ( Boxen 1-4). Die Ergebnisse werden dann an den Hauptteil der Seite angehängt.

Beispielcode:

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

Diese Lösung ist effizient und genau für die Erkennung von Kollisionen zwischen senkrechten Objekten bewegliche Divs. Es stellt ein nützliches Werkzeug für verschiedene interaktive Webanwendungen wie Spiele und Simulationen dar.

Das obige ist der detaillierte Inhalt vonWie erkennt man Kollisionen zwischen zwei Divs mithilfe von JavaScript und jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!