Animation – Avec le clavier

Exercice

Éléments de contenu
Utiliser le clavier pour contrôler le déplacement d'un objet.
Utiliser des conditions pour tester et contrôler la position d'un objet.

À récupérer… Le dossier : imagesAnimation

Remise
Rien à remettre mais doit être terminé avant le prochain cours.

Mise en situation

Vous devez développer un jeu de déplacement parsemé d'obstacles( un carré en fait  ).
Avant d'entreprendre ce jeu, vous devez tester la façon de déplacer un objet à l'aide du clavier.
À la fin de l'exercice, vous pourrez déplacer un personnage dans tous les sens (8 directions) à l'aide des flèches et de certaines touches en vous assurant qu'il demeure à l'intérieur de l'enclos.

Le jeu devra respecter le concept objet appris en cours.
Étapes à suivre
Créez une petite image et choisissez un gif de personnage parmi ceux fournis (ou à votre guise). La largeur devrait être d'environ 30 ou 40px et la hauteur ajustée en fonction de l'image choisie. ( déjà fait, vous pouvez cependant changer d’avatar)
Créer votre objet qui contiendra les informations pour faire bouger votre personnage.
Commencez par faire déplacer votre personnage avec les 4 flèches du clavier sans vous soucier des obstacles. Faites déplacer le personnage de 5 px à chaque fois qu'une touche est enfoncée (onkeydown).
Faites des tests pour modifier la vitesse de déplacement. Plus de px = plus vite, moins de px = moins vite.
Lorsque tout fonctionne, faites en sorte que votre personnage s'arrête lorsqu'il touche un mur. Il demeurera donc à l'intérieur de l'enclos.
Ajoutez maintenant la possibilité de le déplacer à l'aide des touches A, W, D, X en plus des flèches. Vous pouvez choisir d'autres touches si vous le désirez.
Ajoutez finalement la possibilité de le déplacer en diagonale à l'aide des touches Q, E, Z, C.
Ajustez la taille du déplacement en diagonale pour que la vitesse soit similaire à celle des déplacements en ligne droite. Cet ajustement doit se faire en