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

<svg height="50%" width="50%" viewBox ="0 0 400 400" style = 'background : lime ; '> <!-- dessiner balle --> <circle cx="200" cy="50" r="15" fill="red" /> <!-- dessiner raquette --> <rect x="150" y="390" width="100" height="10" fill="navy" /> </svg>

Le script

document.querySelector('button').onclick = function() { // variables objet : var svg = document.querySelector ('svg') ; var balle = document.querySelector('circle'); var raquette = document.querySelector('rect'); // récupération dimensions aire de jeu : var X =400 ; var Y =400 ; // coordonnées initiales balle : var balleX = X/2; var balleY = Y/6; // directions initiales X et Y de la balle : var balleDX = 2; var balleDY = 4; // la raquette : taille et position initiale var raquetteX = X/2; var raquetteH = 10; var raquetteD = Y - raquetteH; var raquetteW = X/4; // appel de la fonction jeuballe toutes les 20 millisecondes var boucle = setInterval(jeuballe, 20); document.onkeydown = function(e) { if (e.keyCode == 37) gauche(); if (e.keyCode == 39) droite(); } // fin fonction // fonction jeuballe function jeuballe() { // nouvelles coordonnées ballee balleX = balleX + balleDX ; balleY = balleY + balleDY ; balle.setAttribute("cx", balleX); balle.setAttribute("cy", balleY); // si balle touche bords gauche ou droit la direction X de la balle est inversée if (balleX + balleDX > X - 15 || balleX + balleDX < 15) balleDX = -balleDX; // si balle touche le haut la direction Y de la balle est inversée if (balleY + balleDY < 15) balleDY = -balleDY; // si balle touche le bas else if (balleY + balleDY > Y - 15) { // et si balle touche raquette alors direction Y de la balle est inversée if (balleX > raquetteX && balleX < raquetteX + raquetteW) balleDY = -balleDY; // sinon fin de partie else { clearInterval(boucle); alert(' perdu ! ') ; } } // fin si } // fin fonction jeuballe function gauche() {raquetteX = raquetteX - 20; if (raquetteX < 0) raquetteX = 0; raquette.setAttribute("x", raquetteX); } function droite() { raquetteX = raquetteX + 20; if (raquetteX > X - raquetteW) raquetteX = X - raquetteW; raquette.setAttribute("x", raquetteX); } } // fin fonction appelée par clic sur bouton

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