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" !

Ce jeu ne fonctionne que sur un PC.
Utilisez les touches "gauche" et "droite" du clavier pour déplacer la raquette.

Le code SVG de la page

<svg width="60%"  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

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.

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins statiques

Animations SVG

Le framework Snap SVG

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

SVG & JavaScript : jeu de squash

Le code SVG de la page

Le script

Commentaire