icn:laboappli:laboappli:animerobjet3
Table des matières
Fiche labo des applis : gérer la collision entre deux objets
Principe
Pour détecter que deux objets se touche, j'utilise l'algorithme suivant en considérant que mes deux objets sont des rectangles :
- mon premier est à la position x1 et y1 avec la largeur L1 et la hauteur H1,
- ma deuxième objet est à la position x2 et y2 avec la largeur L2 et la hauteur H2.
si (x1 < x2 + L2 ET x1 + L1 > x2 ET y1 < y2 + H2 ET y1 + H1 > y2) alors il y a collision ! fin si
Mon code
Il est difficile d'écrire une condition complexe. J'utilise alors le mode texte :
Et je saisis le code suivant :
if (getXPosition("imageProjectile") < (getXPosition("imageBalle") + 50) && (getXPosition("imageProjectile") + 100) > getXPosition("imageBalle") && getYPosition("imageProjectile") < (getYPosition("imageBalle") + 50) && (getYPosition("imageProjectile") + 100) > getYPosition("imageBalle")) { //actions à faire si le balle est touchée : arrêter les animations clearInterval(balle); clearInterval(projectile); }
Ce qui donne en affichant les blocs :
Voici le code javascript complet :
var balle; var projectile; balle = setInterval(function() { if (getYPosition("imageBalle")> 0) { setPosition("imageBalle", getXPosition("imageBalle")+2, getYPosition("imageBalle")); } else { setPosition("imageBalle", getXPosition("imageBalle"), 335); } }, 100); onEvent("buttonLancer", "click", function() { projectile = setInterval(function() { if (getYPosition("imageProjectile")> 0) { setPosition("imageProjectile", getXPosition("imageProjectile"), getYPosition("imageProjectile")-4); } else { setPosition("imageProjectile", getXPosition("imageProjectile"), 335); } if (getXPosition("imageProjectile") < (getXPosition("imageBalle") + 50) && (getXPosition("imageProjectile") + 100) > getXPosition("imageBalle") && getYPosition("imageProjectile") < (getYPosition("imageBalle") + 50) && (getYPosition("imageProjectile") + 100) > getYPosition("imageBalle")) { clearInterval(balle); clearInterval(projectile); } }, 10); });
Lien vers l'application
Les fiches sur le labo des applis ...
icn/laboappli/laboappli/animerobjet3.txt · Dernière modification : 2017/01/16 14:22 de 127.0.0.1