Apprendre le javascript (fin) : les tableau

Reprendre le livre JavaScript Éloquent et lire maintenant le chapitre d’après (mais ne pas y passer plus d’une séance, tant pis si vous n’avez pas tout lu) :

Structures de données : objets et tableaux

 Application n°3 : Faire voler un dragon

Le fichier javascript de la troisième application s’appelle application-3_sprites.js et est appelé dans le fichier html correspondant (on appelle sprite, ou lutin, un élément graphique qui peut se déplacer sur l’écran).

Le but de cette application est de créer une animation avec un dragon puis un rouge-gorge. Les images à utiliser se trouvent dans le répertoire assets/images/.

Attention : si le nom de l’image n’est pas correct, le programme peut bloquer sur Loading, sans afficher de message d’erreur dans la console.

Travail à effectuer :

n°	Tâche	Indications
1	Compléter le commentaire en en-tête du programme en indiquant votre nom et la date.	Toujours prendre le temps de commenter un programme.
2	Déclarer une variable appelée dragon qui doit pouvoir être accessible de partout dans le programme. Stocker dans cette variable dragon l’image dragon_frame-1.png. Puis afficher l’image à la position de la souris.	dragon doit-elle être une variable locale ou globale ? Pour charger une image, utiliser la fonction preload(). Pour afficher une image, utiliser image(dragon,dx=valeur,dy=valeur) où les valeurs données à dx et dy donnent la position de l’image sur la fenêtre de dessin. La position de la souris est donnée par mouseX et mouseY. Afficher l’image dans la fonction draw(). Pour effacer il faut appeler la fontion background(). Pour plus d’esthétique, on pourra rajouter imageMode(CENTER) et noCursor() dans la fonction setup().
3	Transformer la variable dragon en tableau et y stocker dans l’ordre les quatre images de dragon contenues dans assets/images/ Afficher l’image n°3 à la position de la souris.	Pour déclarer un tableau vide il faut écrire var tab = []. Pour ajouter un élément à un tableau on peut utiliser : tab.push(element). Le remplissage du tableau avec la fonction loadImage() doit se faire dans la fonction preload(). Afficher le tableau dans la console pour vérifier qu’il est bien rempli.
4	Animer le dragon en faisant défiler les images	Il faut créer une variable index qui stocke le numéro de l’image à afficher. Changer la valeur de index dans la fonction draw(). Attention : index doit correspondre à un élément du tableau, il ne peut pas prendre n’importe quelle valeur.
5	Remplacer le dragon par un rouge-gorge à en utilisant les fichiers assets/images/rouge-gorge_frame-i.png.	Vu le nombre d’image il faut utiliser une boucle for. Pour transformer un nombre en chaîne de caractère on peut utiliser srt() Pour concaténer deux chaînes de caractère a et b utiliser simplement a+b.