TP3 jeu 3 couleur avec Canvas cette fois-ci

1 - Apprendre à utiliser un canvas HTML5 pour dessiner des images dedans

1. Vous récupérerez le squelette du TP3 utilisé dans le cours magistral sur le github du projet (dans TP3/TP3_squelette_canvas). Faites-en une copie sur laquelle vous travailerez. Etudiez le code, lancez avec un serveur http (ou avec Liuve Server sous Visual Studio Code) la page index.html.
    
2. Vous allez regarder le MOOC "HTML5 Coding essential and best practices", module 2 et 3 sur le dessin et l'animation, en particulier la partie consacrée au dessin d'images.
    
3. Avant de dessiner des images, il faut être sûr qu'elles ont toutes été bien chargées. Comme l'initialisation d'une image est une opération asynchrone, on fera appel à un bout de code assez pratique qui va faire le chargement des images à notre place, et nous prévenir quand il aura fini. Regardez dans script.js et dans assets.js comment est géré le chargement des assets. Il s'agit d'une version améliorée d'un "multiple image loader" présenté dans le MOOC HTML5 Coding essentials and best practices.
    
4. Vous allez maintenant compléter le code partout  où figurent des // A FAIRE afin d'afficher correctement les images des cookies. Vous utiliserez la fonction drawImage vues dans le point 2 de cette liste. C'est ce que j'ai montré pendant la séance de live coding du cours magistral, mais essayez de le refaire, au pire regardez la correction, mais faites le fonctionner petit à petit dans votre cersion du code, c'est comme cela qu'on apprend et qu'on comprend comment cela fonctionne.

2 - Detecter les événements souris correctement dans un canvas

Travail à faire :

1. Lisez la partie du MOOC Module 4.3, partie sur la gestion de événements souris.
2. Essayez d'écrire un écouteur qui détecte le click souris et qui affiche dans un premier temps les coordonnées x et y cliquées. Vérifiez que si vous cliquez dans l'angle en haut à gauche du canvas on affiche bien 0, 0. regardez le jsbin qui a été écrit pendant le cours (sur la page principale du cours...)
    
3. A partir des coordonnées x et y cliquées il est important de trouver dans quelle case on est est ainsi pouvoir obtenir la référence sur l'objet cookie qui est dans cette case. Modifiez votre code pour afficher par exemple le type de la cookie trouvée, par exemple en changeant son image pour mettre à la place l'image "Surlignée" de la cookie.
    
4. Réfléchissez à comment on pourrait avoir l'équivalent du drag'n'drop qu'on avait utilisé avec la version basée sur le DOM. Aide : il va falloir gérer des "états" pour y arriver. Par exemple "si je suis dans l'état 'rien' et que j'ai un événement "mousedown" sur une cookie, je passe dans l'état 'drag'. Si je suis dans l'état 'drag' et que je déplace la souris avec un événement "mousemove" alors je dessine la cookie sélectionnée à l'endroit de la souris, si j'ai événement "mouseup" (bouton relâché) et que j'étais dans l'état "drag" alors je passe en état "drop" et je vais dans une méthode qui regarde quelle est la cookie à la position de la souris et qui regarde si le swap est possible, etc. Dessinez le diagramme d'état sur une feuille de papier pour vous y retrouver.
    
5. Essayez de rajouter la logique du TP que vous avez rendu pour la détection des chutes, la disparition des groupes de cookies etc.
    
6. Essayez de faire apparaitre les cookie au chargement de la page avec un effet d'animation, par exemple en les faisant apparaitre depuis une taille toute petite jusqu'à leur taille réelle, à 60 images par secondes dans la boucle d'animation. Vous pourrez vous inspirer de ce qui a été fait dans la correction du TP3 pour faire disparaitre les alignements.