Dessiner avec SVG - sommaire

SVG & JavaScript : jeux vidéos

Vous savez programmer des déplacements, transformations automatiques d'objets SVG.
Vous savez déplacer un objet SVG par le clavier.
Vous disposez donc de tous les outils pour réaliser des jeux vidéos en ligne basés sur du SVG.
J'utilise le terme "jeux vidéo en ligne" car le jeu sera concrétement un document HTML.
Ce document HTML comprend bien sûr un canevas SVG ; il comprend aussi du CSS et un script JS.
Il s'agit bien sûr de jeux relativement basiques conçus à des fins pédagogiques : vous devez être capable de comprendre le code.

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 pilotez le carré vert pour qu'il n'entre pas en collision avec le carré rouge.

Le rendu dans un Iframe

Le code CSS, SVG & SVG du document HTML

Rappel CSS : margin : 10px auto (centrage horizontal) ne s'applique qu'à un élément "block".
Notez bien le viewBox du canevas : 500 par 500.

Le script JS

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 = 500 -cote;
	var limiteY = 500 - cote; 
	var remontee = -3;
	var delta = 3;
		
	// X comme abscisse et Y comme ordonnée
	// R comme rouge et V comme vert
	var XR = 200;
	var YR = 200;
	var XV = 175;
	var YV = 400; 
	// appel mouvement toutes les 30 millisecondes
	var boucle = setInterval(mouvement,30); 
     
	function mouvement() 
	{
		//gestion déplacement automatique 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); }
			// il est mis fin au jeu
        		
		// programmation clavier pour carré vert
		document.onkeydown = function(e)
		{ 
			if(e.keyCode ==37) {XV-=5; }
			if(e.keyCode ==39) {XV+=5; }
		} 
				
	} // fin fonction mouvement
} // fin fonction principale

Le code ne pose pas de difficulté majeure.
La fonction mouvement() est appelée toutes les 30 millisecondes.

Étudions cette fonction !
Gestion des collisions : si l'écart absolu entre les abscisses des deux carrés et leurs ordonnées est inférieur à cote cela signifie que les deux carrés se chevauchent donc qu'il y a collision.
Notez aussi la gestion du rebondi du carré rouge : XR (abcisse du carré rouge) ne doit pas être inférieur à 0 et ne doit pas être supérieur à limiteX ; delta doit changer de signe lors de chaque rebond.
Notez aussi la gestion du clavier en JS pour déplacer le carré vert sur un axe horizontal.

Vous trouvez le jeu trop facile ?
Vous pouvez le "durcir" en augmentant la vitesse de déplacement du carré rouge.

Deuxième jeu vidéo : le squash

Le code correspondant (SVG & JS) est encodé directement dans cette page web.
Ce jeu est un peu plus complexe : le déplacement de la balle se veut réaliste.

Comment jouer ?

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

Le code HTML, SVG du document HTML

Le canevas est rempli avec un dégradé linéaire CSS.
Le code SVG ne pose aucune difficulté : un cercle (la balle) et un rectangle (la raquette) dessinés dans la zone de dessin SVG.

Le script du document

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); 
		
	// gestion du clavier
    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 le bouton

La fonction jeuballe() qui est appelée toutes les 20 millisecondes. Donc si vous trouvez que ça va trop vite il suffit de modifier le deuxième argument de la fonction setInterval()

Étudions 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 ! La boucle de jeu est arrêtée grâce à clearInterval et un message s’affiche pour annoncer la fin de la partie.