Wie können Sie mit jQuery/JavaScript eine Kollisionserkennung zwischen rechteckigen Elementen durchführen?

jQuery/JavaScript-Kollisionserkennung

Im Bereich der Webentwicklung ist es oft notwendig, zu erkennen, wenn zwei Elemente auf einer Seite kollidieren. Diese Informationen sind in verschiedenen Anwendungen wie interaktiven Spielen, Animationen und räumlichen Layouts von entscheidender Bedeutung.

Beim Umgang mit einfachen rechteckigen Formen wie <div> Bei Elementen, die sich in senkrechter Richtung bewegen, kann die Kollisionserkennung eine unkomplizierte Aufgabe sein. Hier ist eine JavaScript-Lösung, die jQuery verwendet, um dies zu erreichen:

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

Diese Funktion verwendet zwei jQuery-Elemente (a und b) als Argumente und gibt einen booleschen Wert zurück, der angibt, ob sie sich überschneiden. Dazu werden zunächst die Positionen und Abmessungen der Elemente berechnet und verglichen, um festzustellen, ob es Schnittpunkte gibt.

Um die Funktionalität zu demonstrieren, ist hier ein HTML-Snippet, das einen rechteckigen Bereich definiert, in dem sich mehrere farbige Kästchen bewegen it:

<div>

Schließlich wird jQuery verwendet, um dynamisch auf Kollisionen zu prüfen:

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

Dieser Code durchläuft die Kästchen innerhalb des Bereichs, mit Ausnahme des roten Kästchens (#box0), und berechnet, ob jede Box damit kollidiert. Die Ergebnisse werden dann in einer Liste von

Elemente im Browser.

Dieser Ansatz erkennt effektiv überlappende <div> Elemente und können leicht angepasst werden, um komplexere Formen und Flugbahnen zu verarbeiten, indem die Funktion getPositions() entsprechend geändert wird.

Das obige ist der detaillierte Inhalt vonWie können Sie mit jQuery/JavaScript eine Kollisionserkennung zwischen rechteckigen Elementen durchführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!