Comment pouvez-vous utiliser jQuery/JavaScript pour détecter les collisions entre des éléments rectangulaires ?

Détection de collision jQuery/JavaScript

Dans le domaine du développement Web, il est souvent nécessaire de détecter lorsque deux éléments d'une page entrent en collision. Ces informations sont cruciales dans diverses applications, telles que les jeux interactifs, les animations et les aménagements spatiaux.

Lorsqu'il s'agit de formes rectangulaires simples telles que <div> éléments se déplaçant dans des directions perpendiculaires, la détection de collision peut être une tâche simple. Voici une solution JavaScript qui utilise jQuery pour accomplir cela :

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

Cette fonction prend deux éléments jQuery (a et b) comme arguments et renvoie un booléen indiquant s'ils se chevauchent. Pour ce faire, il calcule d'abord les positions et les dimensions des éléments et les compare pour déterminer s'il y a une intersection.

Pour démontrer la fonctionnalité, voici un extrait HTML qui définit une zone rectangulaire avec plusieurs cases colorées se déplaçant à l'intérieur. it :

<div>

Enfin, jQuery est utilisé pour vérifier dynamiquement les collisions :

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

Ce code parcourt les cases de la zone, à l'exclusion de la case rouge (#box0), et calcule si chaque boîte entre en collision avec elle. Les résultats sont ensuite affichés dans une liste de

éléments dans le navigateur.

Cette approche détecte efficacement les chevauchements <div> éléments et peut être facilement adapté pour gérer des formes et des trajectoires plus complexes en modifiant la fonction getPositions() en conséquence.

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!