Collision simple : how to

Télécharger le code 

Principe

Mettons en place la détection de collision entre deux éléments du jeu. 

Pour simplifier notre recherche, nous disons qu'il y a collision si le rond noir rentre dans le carré noir.
Les figures sont dessinées sur l'image d'illustration suivante.

Les coordonnées du point noir sont les coordonnées de la princesse {girl.x, girl.y} et les coordonnées du carré sont les coordonnées du joueur plus un delta {player.x-deltaX, player.y+deltaY}.

La précision est contrôlable en fonction des valeurs du delta qui augmente ou diminue la zone du carré noir.

Sur la figure suivante, le rond noir est dans le carré, la condition de collision est vrai, la princesse va se transformer !

Code

Pour écrire notre programme, nous pouvons faire appelle à la fonction

     function xBetween(x,a,b){
         if(x>a && x<b)
             return true;
         else
             return false;
     }

function checkCollisions(){
allGirls.forEach(function(girl) {
             if(xBetween(girl.x,
                         player.x-deltaX,
                         player.x+deltaY) && 
                xBetween(girl.y,
                         player.y-deltaX,
                         player.y+deltaY)){
                 //collision do something
}
});
}