Rebondissent sur les murs - Le développement du jeu, MDN
C'est la 3e étape sur 10 du tutoriel toile Gamedev. Vous pouvez trouver le code source telle qu'elle se présente après avoir terminé cette leçon à Gamedev-Canvas-atelier / lesson3.html.
Il est agréable de voir notre balle en mouvement, mais il disparaît rapidement de l'écran, ce qui limite le plaisir que nous pouvons avoir avec elle! Pour surmonter que nous mettrons en œuvre une détection de collision très simple (qui sera plus tard expliquée plus en détail) pour faire le ballon rebondissent sur les quatre bords de la toile.
détection de collision simple
Pour détecter la collision, nous allons vérifier si le ballon est en contact (avec entré en collision) le mur, et si oui, nous allons changer la direction de son mouvement en conséquence.
Maintenant, mettre à jour la ligne qui tire la balle dans la fonction drawBall () à ceci:
Rebondissant haut et en bas
Si la valeur y de la position de la balle est inférieure à zéro, changer la direction du mouvement sur l'axe y en la mettant égale à elle-même, inversée. Si la balle se déplaçait vers le haut avec une vitesse de 2 pixels par image, maintenant, il sera en mouvement « vers le haut » avec une vitesse de -2 pixels, ce qui équivaut en fait à se déplacer vers le bas à une vitesse de 2 pixels par image.
Le code ci-dessus traiterait la balle qui rebondit sur le bord supérieur, donc nous allons maintenant penser sur le bord inférieur:
Si la position y de la balle est supérieure à la hauteur du canevas (rappelons que l'on compte les valeurs de y à partir de la partie supérieure gauche, de sorte que le bord supérieur commence à 0 et le bord inférieur est à 480 pixels, la hauteur de la toile), puis rebond au loin du bord inférieur en inversant le mouvement de l'axe des Y comme précédemment.
Nous pourrions fusionner ces deux déclarations en un seul pour économiser sur le code verbosité:
Si l'une des deux déclarations est vrai. inverser le mouvement de la balle.
Rebondissant sur la gauche et à droite
Nous avons le bord supérieur et inférieur couvert, donc nous devons penser à ceux de gauche et de droite. Il est très similaire en fait, tout ce que vous avez à faire est de répéter les déclarations de x au lieu de y:
A ce stade, vous devez insérer le bloc de code ci-dessus dans la fonction draw (), juste avant l'accolade fermante.
La balle continue de disparaître dans le mur!
Testez votre code à ce moment, et vous serez impressionné - nous avons maintenant une balle qui rebondit sur les quatre bords de la toile! Nous avons un autre problème cependant - lorsque la balle frappe chaque mur, il s'y enfonce un peu avant de changer de direction:
En effet, nous allons calculer le point de collision de la paroi et le centre de la balle, alors que nous devrions faire pour sa circonférence. La balle doit rebondir juste après si touche le mur, pas quand il est déjà à mi-chemin dans le mur, donc nous allons ajuster nos déclarations un peu à l'inclure. Mettre à jour le dernier code que vous avez ajouté à ceci:
Lorsque la distance entre le centre de la balle et le bord de la paroi est exactement le même que le rayon de la bille, il change la direction du mouvement. Le rayon de soustraction d'une largeur de bord et l'ajouter sur l'autre nous donne l'impression de la détection de collision appropriée - la balle rebondit sur les murs comme il se doit.
Comparez votre code
Permet de vérifier à nouveau le code fini pour cette partie contre ce que vous avez, et un jeu:
Exercice. essayez de changer la couleur de la balle à une couleur aléatoire à chaque fois qu'il touche le mur.
Prochaines étapes
Nous avons maintenant à l'étape où notre balle est à la fois mobile et de rester sur le plateau de jeu. Dans le quatrième chapitre, nous allons examiner la mise en œuvre d'une palette contrôlable - voir les commandes de Paddle et du clavier.