Comment détecter les collisions entre deux divs à l'aide de JavaScript et jQuery ?

Comment détecter les collisions entre deux DIV

Lorsque vous travaillez avec des éléments dynamiques sur une page Web, il est essentiel de pouvoir détecter les collisions entre eux. Dans ce cas, nous avons affaire à deux divs colorés simples se déplaçant perpendiculairement l'un à l'autre.

La solution :

Pour déterminer si les divs entrent en collision, nous allons exploitez JavaScript et la bibliothèque jQuery. Voici un aperçu de la solution :

1. Obtenir les positions : Nous calculons d'abord les positions des deux divs à l'aide de la fonction getPositions(), qui renvoie un tableau bidimensionnel représentant le coordonnées gauche et supérieure de chaque div.
2. Comparer les positions : Utilisation de comparePositions() fonction, nous comparons les positions de chaque div. Si le bord gauche d’un div est inférieur au bord gauche de l’autre et que le bord droit du premier div est supérieur au bord gauche du second, une collision se produit. De même, nous vérifions les collisions dans le sens vertical.
3. Vérifier les chevauchements : La fonction chevauchements(), qui prend deux divs en entrée, combine les fonctions précédentes pour déterminer si elles se chevauchent. Si tel est le cas, la fonction renvoie true ; sinon, il renvoie false.
4. Implémentation en JavaScript : Nous incorporons la fonction chevauchements() dans une fonction jQuery qui teste si le div rouge (box0) entre en collision avec l'un des autres divs ( cases 1 à 4). Les résultats sont ensuite ajoutés au corps de la page.

Exemple de code :

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

Cette solution est efficace et précise pour détecter les collisions entre perpendiculairement déplacer des divs. Il fournit un outil utile pour diverses applications Web interactives, telles que des jeux et des simulations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!