Portfolio Développement Front
TP8 – Canvas & animations interactives
Exercice 1 – Découverte du canvas
Dans cet exercice, j’ai réalisé le déplacement d’un personnage sous forme de sprite à l’intérieur d’un canvas de 512 × 512 à l’aide des touches directionnelles du clavier. À chaque appui sur une touche, la position du personnage est mise à jour et l’image affichée change afin de correspondre à la direction du déplacement. J’ai également mis en place des limites pour empêcher le personnage de sortir du canvas.
Voir l’exercice 1Exercice 2 – Fond défilant et animation de Mario
Dans cet exercice, j’ai combiné un décor qui défile indéfiniment avec un personnage animé afin de créer une illusion de mouvement. Le canvas utilisé mesure 600 × 480 et le fond se déplace horizontalement en boucle, tandis que Mario reste à une position fixe mais change d’image pour simuler la course. J’ai utilisé une boucle d’animation fluide et un système de gestion des frames pour éviter les vibrations visuelles.
Voir l’exercice 2Exercice 3 – Animation déclenchée par clic
Cet exercice consiste à déclencher une animation de goutte lorsqu’un clic est effectué dans un canvas de 1024 × 768. J’ai utilisé l’image fournie ainsi que le fichier infoSprite.js pour gérer les différentes frames de l’animation. La position du clic est récupérée afin de lancer l’animation exactement à l’endroit où l’utilisateur interagit.
Voir l’exercice 3