Sommaire

Gérer les collisions de la balle avec la raquette

Le jeu est presque fonctionnel ! Il reste encore à gérer la rencontre de la balle avec la raquette.

Nous modifions de nouveau la procédure qui gère les déplacements de la balle de manière à prendre en compte la position de la raquette et, si la raquette se trouve sous la balle, on renvoie celle-ci vers les briques. Dans le cas contraire, on la considère comme perdue et on la retire de l’aire de jeu.

Nous ajoutons une propriété top à la variable racket, dans la fonction init(). Dans cette variable, on stocke la position verticale, puisqu’il s’agit en fait de la limite que la balle ne doit en aucun cas dépasser et que cette valeur ne change pas pendant la partie.

Afin d’obtenir cette position, nous utilisons un sélecteur jQuery pour sélectionner la raquette et exécuter la méthode jQuery offset() pour obtenir la valeur de sa propriété top. Cette méthode renvoie un objet composé de deux propriétés left et top qui correspondent aux coordonnées de l’objet renvoyé par le sélecteur.

Ces coordonnées sont calculées par le système par rapport au coin supérieur gauche de la page web. Il faut donc procéder à un transfert de coordonnées. En effet, l’aire de jeu n’étant pas située tout en haut de la page web, il est nécessaire de lire sa position ...