[JS] Collisions de plusieurs éléments
FlorianJ29
Messages postés
68
Date d'inscription
Statut
Membre
Dernière intervention
-
Jithel Messages postés 843 Date d'inscription Statut Membre Dernière intervention -
Jithel Messages postés 843 Date d'inscription Statut Membre Dernière intervention -
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 !
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 !
A voir également:
- Désolé, vous avez dépassé votre quota d'éléments partagés.
- Photoshop elements gratuit - Télécharger - Retouche d'image
- Google photos albums partagés - Guide
- User is over quota - Forum Mail
- Le délai d'attente est dépassé ✓ - Forum Mozilla Firefox
- Désolé. vous ne pouvez pas accéder à cet élément, car il ne respecte pas nos conditions d'utilisation. ✓ - Forum Cloud
2 réponses
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).
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).
Voilà mon setInterval :
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 !
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 !
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 !
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.