[JS] Collisions de plusieurs éléments

Fermé
FlorianJ29 Messages postés 68 Date d'inscription dimanche 22 janvier 2017 Statut Membre Dernière intervention 28 février 2019 - 28 févr. 2019 à 10:57
Jithel Messages postés 843 Date d'inscription mercredi 20 juin 2018 Statut Membre Dernière intervention 31 août 2021 - 1 mars 2019 à 19:27
Bonjour à tous !

Je suis actuellement en train de faire un petit programme qui créer des éléments (IMG), une fois créer, ses éléments bougent (ils sont animés grâce à la fonction .animate() de Jquery) et j'aimerai faire un script qui permettrai de détecter les collisions de ses éléments.

En cherchant sur Internet, j'ai trouvé un petit bout de code sur Internet qui permet de détecter les collisions entre deux DIV mais avec un objet qui détecter les collisions avec toutes les DIV d'une même class.

Lien (codepen.io) : https://codepen.io/headmax/pen/ddwGKy?editors=1010


J'aimerai (si possible) faire un script qui détecte toutes les collisions (image_1 et image_2, image_4 et image_1...) sachant que toutes mes images ont la même class...

Comment puis-je faire ceci ?

Merci d'avance !

2 réponses

Jithel Messages postés 843 Date d'inscription mercredi 20 juin 2018 Statut Membre Dernière intervention 31 août 2021 171
28 févr. 2019 à 15:06
Je n'ai pas testé mais voici des idées pour avancer sur ce sujet :

Solutions pour intégrer tes images dans ce code :
Tu peux remplacer les div directement par des img OU mettre des img dans les div

Solution pour détecter collision entre TOUTES les images :
Faire une liste de toutes les images (éléments DOM)
Pour chaque élément de la liste, vérifier pour chacun des autres éléments une collision
(c'est une double boucle imbriquée).
0
FlorianJ29 Messages postés 68 Date d'inscription dimanche 22 janvier 2017 Statut Membre Dernière intervention 28 février 2019 14
28 févr. 2019 à 15:49
Bonjour Jithel !

Comment je peux faire pour vérifier les collisions de chaque éléments ?

Et quelle est l'interval conseillé pour la fonction collision() ? (par défaut 200 ms)

Quand j'ai fait plusieurs test avec des code différents, j'ai remarqué que des fois le mouvements des images ne fonctionnait pas normalement...

Merci pour ton aide !
0
Jithel Messages postés 843 Date d'inscription mercredi 20 juin 2018 Statut Membre Dernière intervention 31 août 2021 171 > FlorianJ29 Messages postés 68 Date d'inscription dimanche 22 janvier 2017 Statut Membre Dernière intervention 28 février 2019
28 févr. 2019 à 15:58
Tu peux vérifier les collisions de chaque élément avec la méthode collision(...) du code que tu as joins.

Vérifie les collisions à chaque fois que quelque chose bouge donc toutes les 200 ms si c'est la période de rafraîchissement chez toi.
0
FlorianJ29 Messages postés 68 Date d'inscription dimanche 22 janvier 2017 Statut Membre Dernière intervention 28 février 2019 14
Modifié le 28 févr. 2019 à 17:40
Voilà mon setInterval :


setInterval(function() {
$('#result').text('False');

var elements = document.getElementsByClassName('voiture');

elementsLength = elements.length;
for(var i = 0 ; i < elementsLength ; i++) {

if(nb_cars_actuel > 2) { // Inutile de chercher les collisions s'il y a qu'une seul image...

if(collision('voitures_' + i , 'voitures_2' + (i + 1))) {
// C'est ici que je me demande ce que je dois mettre...
// Pour 'voitures_' + i, je pense que c'est correct mais pour le deuxième paramètre je ne sais pas
$('#result').text('True');
}

}

}


}, 200);


Qu'est ce que je pourrai mettre en paramètres car comme j'expliqué au début, il faudrai que toutes les images puissent être détectable en cas de collisions ?

Merci encore !
0
Jithel Messages postés 843 Date d'inscription mercredi 20 juin 2018 Statut Membre Dernière intervention 31 août 2021 171
1 mars 2019 à 19:27
La fonction collision(...) semble prendre en entrée deux éléments DOM et non deux chaînes de caractères. Ensuite, s'il y a collision, il faut arrêter l'animation.
0