Accueil

Traduction

Tutoriel Canvas - sommaire

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : 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

Le script

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.