SVG & JavaScript: jeu de squash

Enfin un jeu ! Vous déplacez la raquette avec les touches 'gauche' et 'droite' du clavier
Pour lancer le jeu il suffit de cliquer sur le bouton "jouez" !

Le code SVG de la page

Le script

Commentaire du code

Le code HTML et SVG ne pose aucune difficulté : un cercle (la balle) et un rectangle (la raquette) dans la zone de dessin SVG et un bouton de commande avec la la légende "jouez !"

Dans le code JS on récupère grâce à la méthode getAttribute les dimensions de la boîte SVG. Donc si vous changer les dimensions de la zone de dessin SVG il n'y a aucune modification à apporter au script. C'est pratique !

Une fonction est appelée à chaque fois que vous cliquez le bouton de commande "jouez". Cette fonction comprend différentes fonctions dont la fonction jeuballe qui est appelée toutes les 20 millisecondes grâce à la fonction setInterval().

Etudions la fonction jeuballe en détail !
Cette fonction détermine les nouvelles coordonnées cx et cy de la balle. La position de la balle est fonction des variables balleDX et balleDY.
Si la balle heurte le côté gauche ou droit, la valeur de balleDX s’inverse, et donc celle-ci rebondit dans la direction opposée.
De même, si la balle heurte le plafond, la valeur balleDY s’inverse, et celle-ci rebondit dans la direction opposée.
Si la balle heurte le bas un test est effectué pour savoir si elle a touché aussi la raquette. Si oui la valeur balleDY  s’inverse pour que la balle rebondisse. En revanche, si la balle heurte le bas (mais sans toucher la raquette) alors la partie est terminée !
Si la partie est terminée, la boucle de jeu est arrêtée grâce à la méthode clearInterval et un message s’affiche pour annoncer la fin de la partie.

Les fonctions gauche et droite permettent de modifier les coordonnées du coin supérieur gauche de la raquette.
Ces fonctions sont appelées respectivement par la touche gauche et droite du clavier.

Nous aurions pu utiliser CANVAS plutôt que SVG pour réaliser ce jeu de SQUASH. Voir tutoriel Canvas pour étudier la solution avec cette API.


Retour menu