Accueil
Mes tutoriels sur la programmation

Tutoriel Canvas - sommaire


Vous pouvez me contacter via Facebook (questions, critiques constructives) : page facebook relative à mon site

Canvas : jeu de squash

Dans cette page un jeu réalisé avec l'API Canvas.

Essayez le jeu

Enfin un jeu complet ! 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 correspondant

Le code HTML

<canvas width ="300" height="400" style = "width : 40%; height : auto ; background : lime ;"> </canvas> <button type = 'button' >Jouer !</button>

Le 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 Voir le tutoriel "Dessiner avec 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.