Contenu principal
Apprendre à coder
Cours : Apprendre à coder > Chapitre 4
Leçon 4: Making a side scroller: Hoppy BeaverCollisions avec les bouts de bois
Notre castor arrive à sauter. Les bouts de bois s'affichent. Il nous reste juste à connecter les deux ensemble. Nous souhaitons savoir quand notre castor réussit à passer sur un bout de bois, pour pouvoir compter cela comme une collecte réussie. Ce qui veut dire qu'il nous faut faire un test basique de collision entre les deux objets. Il y a plein d'endroits où programmer cette fonctionnalité, étant donné qu'elle intervient sur deux objets (comme fonction globale, comme méthode sur l'objet Stick (Bout de bois) ou comme méthode sur l'objet Beaver (Castor)). Codons-la pour l'instant dans le castor :
Beaver.prototype.checkForStickGrab = function(stick) {
// si le castor est sur un bout de bois, faire quelque chose
};Dans cette fonction, il nous faut tout d'abord écrire une condition, qui sera vérifiée si le castor et le bout de bois entre en collision, et seulement dans ce cas-là. Nous pourrions la rendre complexe, ou stricte, en se basant sur les coordonnées des mains du castor, par exemple, mais faisons simple pour le moment. Ils "entrent en collision" si :
- La coordonnée x du centre du bout de bois est située entre les bords gauche et droit du castor.
- La coordonnée y du centre du bout de bois est située entre les côtés haut et bas du castor.
Le bout de bois est dessiné en utilisant la fonction
rect, donc, typiquement, cela veut dire que les propriétés x et y représentent les coordonnées du coin supérieur gauche. Cependant, pour simplifier le calcul de la collision, nous changeons le mode pour que le rect soit dessiné à partir du centre :rectMode(CENTER);
rect(this.x, this.y, 5, 40);L'image du castor est aussi dessinée, par défaut, à partir du coin supérieur gauche, mais nous allons conserver ce mode, car il fonctionne bien pour notre calcul. Pour tester la première condition, sur la coordonnée x, nous pouvons faire un test comme celui-ci, dans lequel nous testons si la coordonnée x du bout de bois est plus grande ou égale au côté gauche (x) du castor et plus petite ou égale au côté droit (x + 40) du castor :
stick.x >= this.x && stick.x <= (this.x + 40)Pour tester la position y, nous pouvons faire un test similaire, dans lequel nous allons vérifier si la coordonnée y du bout de bois est plus grande ou égale au haut du castor (y) et plus petite ou égale au bas du castor (y + 40) :
stick.y >= this.y && stick.y <= (this.y + 40)Maintenant, que devons nous faire, une fois que nous avons détecté une collision entre le castor et le bout de bois ? Nous souhaitons, de fait, supprimer le bout de bois de l'écran pour prévenir toute collision future. Un moyen simple pour faire cela est de pousser simplement le bout de bois hors de l'écran, en modifiant sa coordonnée y :
stick.y = -400;Dans le même temps, nous souhaitons nous souvenir du nombre de bouts de bois que le castor a "attrapés". Nous incrémentons donc la propriété interne sticks (bouts de bois) :
this.sticks++;Enfin, il nous faut appeler cette méthode au moment opportun. Que pensez-vous de la mettre juste après avoir dessiné chaque bout de bois ?
for (var i = 0; i < sticks.length; i++) {
sticks[i].draw();
beaver.checkForStickGrab(sticks[i]);
sticks[i].x -= 1;
}Et voici le tout rassemblé. Testez. Quand vous sautez sur les bouts de bois, ils disparaissent !
Vous souhaitez rejoindre la discussion ?
Is it normal that the program doesn't display sticks?(0 vote)