Comment détecter les collisions entre éléments dans jQuery/JavaScript ?

Détection de collision jQuery/JavaScript

Identification des éléments qui se chevauchent

Savoir quand deux éléments se chevauchent est essentiel pour diverses applications Web interactives. Imaginez un jeu simple où deux cases colorées se déplacent perpendiculairement sur une grille. Pour déterminer si la case rouge est entrée en collision avec l'une des autres cases, vous pouvez utiliser la solution jQuery/JavaScript suivante :

Répartition des fonctions

getPositions : Récupère la position et les dimensions d'un élément.

comparePositions : Compare les plages de deux positions données et renvoie vrai si elles se chevauchent ou se touchent.

chevauchements : La fonction principale vérifie le chevauchement entre deux éléments. Il utilise getPositions et comparePositions pour déterminer si l'un de leurs axes se chevauche.

Implémentation

1. Définir les chevauchements fonctionner comme une fermeture.
2. Obtenir les positions de les deux éléments étant vérifiés.
3. Comparez les plages horizontales et verticales des deux éléments à l'aide de comparePositions.
4. Renvoyer vrai si l'une des plages se chevauche.

Exemple

Considérez le HTML structure :

<div>

Et le JavaScript correspondant :

var overlaps = (function () {
  // ... same as before ...
})();

$(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 script ajoute des messages à la page indiquant si la case rouge chevauche l'une des autres cases.

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!