L3 MIAGE 2020-2021 TP2 Introduction à JavaScript : TP1 mais avec un canvas..

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

1. Vous récupérerez ce projet squelette, le dézipperez et l'exécuterez,
    
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.

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
    
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.