C'est la 3ème étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson3.html.

C'est bien de voir notre balle bouger, mais celle-ci disparraît très vite! Pour y pallier nous allons intégrer à notre code de quoi à detecter les collisions avec les murs. Ne vous inquiétee cela restera très simple et bientôt vous verez votre balle rebondir au 4 coins du canvas!

Détection des murs

Pour détecter les collisions nous allons vérifier si la balle touche le mur, et si celle-ci rentre en collision, alors son sens devra changer.

Pour simplifier tout les calculs, nous allons créer quelques variables. Appellons la première ballRadius, elle contient le rayon de la balle. Ajoutez cela à votre code au milieu des autres variables :

var ballRadius = 10;

Il faut donc changer le rayon donné dans la fonction drawBall(). Changez donc comme ceci :

ctx.arc(x, y, ballRadius, 0, Math.PI*2);

Rebondir en haut et en bas

Il y a 4 murs en tout mais nous allons d'abord nous pencher sur le mur du haut. Nous devons, à chaque rafraichissement du canvas, regarder si la balle touche le bord du haut. Si c'est le cas, alors nous devons inverser la direction de la balle pour créer un effet de limite de zone de jeu. Il ne faut surtout pas oublier que les coordonnées commence du coin en haut à gauche! Nous pouvons donc écrire :

if(y + dy < 0) {
    dy = -dy;
}

Si la position en y de la balle est inférieur à 0, on change la direction du mouvement sur l'axe y juste en inversant le signe du déplacement de la balle! Par exemple si celle-ci bouge vers le haut (elle a donc une vitesse de -2 car le point (0,0) est en haut à gauche) et qu'elle rencontre le mur du haut, alors sa vitesse passera à 2 et se mettre à redescendre!

Le code ci-dessous est presque le même à une exception, celui-ci gère le bas du canvas! Et oui, ce n'est pas si compliqué :

if(y + dy > canvas.height) {
    dy = -dy;
}

Si la position en y de la balle est supérieur à  la hauteur du canvas (soit 480 pixels dans cette leçon) on inverse encore comme précedemment la vitesse de la balle.

On peut rassembler les deux conditions en une gràce au "ou" qui s'écrit || en JavaScript :

if(y + dy > canvas.height || y + dy < 0) {
    dy = -dy;
}

Si une des deux conditions est vérifiées, alors la vitesse est inversée. Essayer de créer votre propre code pour la gauche et la droite avant de passer à la prochaine sous-partie. Vous verrez que le principe est le même!

Rebondir à gauche et à droite

Voici donc le fameux bout de code que vous deviez compléter. J'éspère que vous avez réussi car cela est très simple. Vérifiez quand même et recopiez cela si vous ne l'avez pas trouvé :

if(x + dx > canvas.width || x + dx < 0) {
    dx = -dx;
}

if(y + dy > canvas.height || y + dy < 0) {
    dy = -dy;
}

Une fois cela fait. Vous pouvez intégrer ce code dans la fonction draw() juste après avoir dessiner votre boule en appellant la fonction drawBall().

La balle disparaît toujours!

Vous pouvez tester votre code et magie votre balle rebondit maintenant. Mais un problème persiste...Elle s'enfonce toujours dans le mur avant de changer direction. Si vous regardez bien vous aller vous rendre compte de quelque chose, elle s'enfonce dans le mur de la profondeur de son rayon.

Si vous l'aviez vu bravo!! Effectivement nous calculons la collision à partir des coordonnées x et y qui sont le centre de la balle. Nous ne prenons pas en compte le rayon de la balle mais j'en suis sûr que vous pouvez résoudre ça en ajoutant le rayon de la balle dans les conditions de rebondissement. Essayez et vérifiez avec ça :

if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
    dx = -dx;
}
if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
    dy = -dy;
}

Maintenant quand la distance entre le centre de la balle et le bord est le même que le rayon de la balle, cela change sa direction. De ce fait la balle tape rebondit comme elle se doit! Vous avez maitenant une balle opérationelle.

Comparez votre code

Vérifiez encore le code que vous avez avec celui-ci et testez le en live pour voir si des différences apparaissent.

Exercice: essayez de changer la couleur de la balle à chaque fois que celle-ci tape un mur.

Dans le prochain chapitre

Nous avons une balle qui bouge et reste dans l'écran de jeu (et qui change de couleur pour certain). Nous allons maintenant intégrer un paddle (une raquette si vous préférez), allez voir Paddle and keyboard controls.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : wbamberg, eerrtrr
Dernière mise à jour par : wbamberg,