Déplacement d'un "sprite" dans un canevas

Un "sprite" ou lutin est un terme employé dans les jeux vidéos.
Il désigne un personnage inséré dans un décor et qui peut être déplacé. Le lutin peut lui être animé (un gif animé).
Vous avez dans la première partie de ce tuto comment insérer une image matricielle (jpg ou gif) dans un canevas : méthode drawImage().
Dans l'exemple de cette page on ne se contente pas de l'insérer ; on le déplace via un clavier.

Déplacer le squale qui apparait un premier clic sur une touche du clavier

Le code CSS & HTML

... th {border : none ; } img {border : none ; } </style></head> <body> ... <canvas style = "width : 100% ; height : auto ;background : url(../images/fond3.jpg) ; margin : auto ; background-size : cover ; " width ="600" height ="400"> </canvas> <table> <caption>Déplacer le squale grâce clavier ci-dessous</caption> <tr><th></th><th><button id ='haut' >&uarr;</button></th><th></th></tr> <tr><th><button id ='gauche'>&larr;</button></th><th></th> <th><button id ='droite'>&rarr;</button></th></tr> <tr><th></th><th><button id = 'bas'>&darr;</button></th><th></th></tr> </table>

Pour le script le canevas fait 600 par 400.
La zone d'animation est adaptative : largeur égale à 100% de celle du conteneur.
Le canevas a pour "background" une beau décor corallien.

Le script

var image = new Image(); image.src = '../images/requin.gif'; window.onload =function() { var canevas = document.querySelector('canvas'); var contexte = canevas.getContext('2d'); var X = canevas.width ; var Y = canevas.height; console.log("largeur canevas " + X); console.log("hauteur canevas" + Y); var x = 300 ; var y = 200; // position initiale image insérée var l =100; var h = 70; var x_maxi = X-l; var y_maxi = Y-h; //limites positions x,y de l'image contexte.drawImage(image,x,y,l,h) ; document.querySelector('#droite').onclick = function() { x+=40 ; if (x >= x_maxi) x = x_maxi; suite(); } document.querySelector('#gauche').onclick = function() { x-=40 ; if (x <= 0) x = 0 ;suite();} document.querySelector('#haut').onclick = function() { y-=40 ; if (y <= 0) y = 0 ; suite();} document.querySelector('#bas').onclick = function() { y+=40 ; if (y >= y_maxi) y = y_maxi; suite();} function suite() {contexte.clearRect(0, 0, X, Y); contexte.drawImage(image,x,y,l,h);} }

Vous pouvez remarquez que le requin (gif animé) ne bouge plus.
L'inconvénient de la méthode drawImage lorsqu'elle concerne un gif animé est que ladite animation est perdue.

Le requin ne peut sortir du décor grâce à des tests.
Retour menu