Jeu de squash avec Canvas : le code

Le code de la page

... <body> <canvas width ="300" height="400" style = "width : 40%; height : auto ; background : lime ;"> </canvas> ... <script> var canvas = document.querySelector("canvas"); var contexte = canvas.getContext("2d"); //dimensions du jeu var X = canvas.width; var Y = canvas.height; // vitesse de déplacement de la balle var balleDX = 2 ; var balleDY = 4 ; // déclaration de variables globales var balleX, balleY; // position initiale de la balle var raquetteX; // position initiale X de la raquette var raquetteH ;// hauteur raquette var raquetteW; // largeur de la raquette var raquetteD; // position initiale Y de la raquette // initialiser variables relatives à balle et raquette init(); // dessiner balle et raquette à leur position initiale raquette(); // appel fonction qui dessine la raquette balle() ; // appel fonction qui dessine la balle document.querySelector('button').onclick = function() { var boucle = setInterval(jeuballe, 20); // appel de la fonction jeuballe tous les 20 millisecondes document.onkeydown = function(e) { if (e.keyCode == 37) gauche(); if (e.keyCode == 39) droite(); } function jeuballe() { contexte.clearRect(0, 0, X, Y); //dessiner raquette à sa nouvelle position raquette(); balle(); // changer coordonnées ballee balleX += balleDX; balleY += balleDY; // si balle touche bords droit ou gauche if (balleX + balleDX > X - 15 || balleX + balleDX < 15) balleDX = -balleDX; // si balle touche le bord haut if (balleY + balleDY < 15) balleDY = -balleDY; // si balle touche le bord bas else if (balleY + balleDY > Y - 15) { // et si balle touche la raquette if (balleX > raquetteX && balleX < raquetteX + raquetteW) balleDY = -balleDY; // Sinon : perdu ! else { clearInterval(boucle); alert("Perdu!"); // appel fonction qui réinitialise les variables init() ; } } } } function gauche() { raquetteX = raquetteX - 20; if (raquetteX < 0) raquetteX = 0; } function droite() { raquetteX = raquetteX + 20; if (raquetteX > X - raquetteW) raquetteX = X - raquetteW; } function raquette() { // Dessiner la raquette contexte.fillStyle = "navy"; contexte.beginPath(); contexte.rect(raquetteX, raquetteD, raquetteW, raquetteH); contexte.closePath(); contexte.fill(); } function balle() { // Dessiner la balle contexte.fillStyle = "red"; contexte.beginPath(); contexte.arc(balleX, balleY, 15, 0, Math.PI * 2, true); contexte.closePath(); contexte.fill(); } function init() { // valeurs initiales variables balleX = 150; balleY = 50; raquetteX = 150; raquetteH = 10; raquetteW = 100; raquetteD = 390 ; } ...

Commentaire du code

HTML : La taille du canevas s'adapte à la taille de l'écran mais pour le script les dimensions sont toujours 300 par 400 !

Il est intéressant de comparer le code JavaScript dans cette page avec celui utilisé pour le même jeu de SQUASH mais avec une autre technologie (animer en JavaScript des objets SVG ). Voir le tutoriel : "animer SVG"
Nous retrouvons la fonction jeuballe qui est toujours appelée tous les 20 millisecondes (50 fois par seconde).
Mais il y a une différence de taille quand au contenu de cette fonction. Alors que dans la solution précédente on se contente de modifier les attributs des objets SVG balle et raquette. Dans le cas de la solution Canvas on doit à chaque fois effacer toute la zone de dessin puis redessiner la balle et la raquette avec de nouvelles coordonnées.
C'est pour cette raison que nous avons du définir deux fonctions raquette et balle qui respectivement dessinent la raquette et à la balle.

Attention certaines variables sont utilisées dans différentes fonctions. Elles doivent donc être globales c'est le cas des variables raquetteX, balleX, balleY.

Mais revenons à la comparaison quant aux deux techniques (API Canvas d'une part et SVG & JS d'autre part).
Ce n'est pas parce que le code est plus long dans la technologie Canvas qu'il est moins rapide quant à son exécution ...
En effet on ne fait pas ici appel à l'API DOM qui est lente et dévoreuse de ressources.