SVG & JavaScript : jeux vidéos

Dans ce chapitre je vous présente deux jeux réalisés en combinant deux standards du web : SVG & Javascript.
à la place de SVG j'aurais pu utiliser la librairie Canvas ...

Premier jeu

Un carré rouge balaie la fenêtre de jeu.
Un carré vert remonte inexorablement vers le bord supérieur.
Grâce aux touches directionnelles "gauche" et "droite" vous devez piloter le carré vert pour qu'il n'entre pas en collision avec le carré rouge.

Le rendu dans un Iframe

Le code HTML et SVG de cette page

	<svg  width="60%"  viewBox ="0 0 400 450" style = 'background : blue ; margin : 10px auto; '>
      <!-- dessiner carré rouge -->
      <rect id ="rouge" x="200" Y="200" width ="50" height ="50" fill="red" />
      <!-- dessiner carré vert -->
		<rect id ="vert" x="175" Y="400" width ="50" height ="50" fill="green" />
    </svg>
	<br><button  style = "width : 200px ; height : 50px;">Jouez !</button>

Le script de la page

	document.querySelector('button').onclick = function()
{
		var svg = document.querySelector ('svg') ;
		var rouge = document.getElementById('rouge') ; 
		var vert = document.getElementById('vert');
		var cote =50;
		var limiteX = 400 -cote;
		var limiteY = 450 - cote; 
		var remontee = -3;
		var delta = 3;
		
		var XR = 200;
		var YR = 200;
		var XV = 175;
		var YV = 400; 
		var boucle = setInterval(mouvement, 30); 
     	
	function mouvement() 
	{
			//gestion rebondissement du carré rouge
			if(XR>=limiteX) {XR = limiteX ; delta = -3; }
			if (XR<=0) {XR =0 ; delta = 3;}
			XR+=delta; 
			rouge.setAttribute("y",YR);
			rouge.setAttribute("x",XR); 
			
			// Le carré vert ne doit pas sortir de la fenêtre de jeu
			if (YV <=0) {YV = limiteY; XV = 175; }
			if (XV <=0){ XV = 0 ; }
			if (XV >=limiteX) {XV = limiteX;}
			YV+=remontee ; 
			vert.setAttribute("x",XV); 
			vert.setAttribute("y",YV);
			
					
			// gestion collision  
			if((Math.abs(XV-XR) < cote) && (Math.abs(YV-YR)< cote)) 
				{alert("perdu");  clearInterval(boucle); }
        		
		document.onkeydown = function(e)
		{ 
			if(e.keyCode ==37) dep_gauche(); 
			if(e.keyCode ==39) dep_droite(); 
		} // fin fonction anonyme
		
		function dep_gauche() {XV-=5; }
		function dep_droite()  {XV+=5; }
		
	} // fin fonction mouvement
	
} // fin fonction anonyme appelée par clic sur bouton 'jouez'

Le code ne pose pas de difficulté majeure.
La fonction mouvement() est appelée toutes les 30 millisecondes.
Gestion des collisions : si l'écart absolu entre entre les abcisses des deux carrés ET leurs ordonnées est inférieur à cote cela signifie que les deux carrés se chevauchent donc collision !
Notez aussi la gestion du rebondi du carré vert : XR (abcisse du carré rouge) ne doit pas être inférieur à 0 et supérieur à limiteX. delta doit changer de signe lors de chaque rebond.
Notez aussi la gestion du clavier en JS.

Deuxième jeu vidéo : le squash

Vous déplacez la raquette avec les touches 'gauche' et 'droite' du clavier pour que la balle (boule rouge) ne touche pas le bord inférieur.
Pour lancer le jeu il suffit de cliquer sur le bouton "jouez" !

Le code HTML & 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>
<button  style = 'width : 200px'>Jouez !</button>

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 anonyme 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 !".
La fonction jeuballe() qui est appelée toutes les 20 millisecondes. Donc si vous trouvez que ça va trop vite ...

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 à 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.
Superbes animations et jeux vidéos avec Canvas

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins statiques

Animations SVG

Le framework Snap SVG

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville