Canvas : insertion et 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 même ê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

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

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.
Nous n'aurions pas eu ce problème si à la place de l'outil Canvas nous avions utilisé SVG ...

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