TP noté

Exercice 1 — Taquin animé #

On va implémenter un jeu de taquin animé à partir d'une vidéo.

Création de la vidéo

1. Créer une page HTML avec un widget d'upload, un champ pour saisir la taille (= longueur = largeur) du jeu (qu'on note size dans la suite), et un bouton pour lancer le jeu.
2. Lier un script JS à la page. Écrire une fonction createVideoElement(file) qui renvoie un élément video avec comme source le fichier file passé en paramètre — attention, on parle bien d'un fichier c'est-à-dire une instance de la classe File.
3. Faire en sorte que la vidéo renvoyée se lance dès qu'elle a été créée, et qu'elle tourne en boucle (NB: pour que l'autoplay fonctionne, dans certains navigateurs il faut que la vidéo soit mise en muet — tout cela est géré par des attributs de l'élément video).
4. Après avoir testé, modifier la fonction createVideoElement() pour qu'elle renvoie, à la place de l'élément video, une promesse se résolvant en l'élément video lorsque la vidéo commence à tourner (pas avant). NB: un événement qui peut être utile est loadeddata, déclenché lorsque la première frame d'une vidéo est accessible.
5. À présent, faire en sorte qu'au clic sur le bouton, la fonction createVideoElement() soit appelée avec en argument le fichier fourni par l'internaute. (Pour tester votre code, vous pouvez télécharger cette vidéo.)
6. Optionnel: on fera en sorte que s'il y a un problème de lecture du fichier comme vidéo, la promesse se termine avec une erreur, qu'on récupérera pour afficher une alerte.

Implémentation des tuiles

À présent, on va mettre en place le puzzle, c'est-à-dire les « tuiles » (tiles) qui vont plus tard bouger.

1. Faire en sorte que lorsque l’on clique sur le bouton, le script crée size×size tuiles et les ajoute dans une nouvelle div d'identifiant puzzle. Les tuiles seront pour l'instant des éléments quelconques contenant les entiers de 0 à size²-1. Stocker les tuiles créées dans un tableau JS.
2. Les tuiles doivent maintenant s'afficher dans une grille size×size, grâce à une grille CSS (grid layout). NB : on est obligé d'écrire une partie du CSS dynamiquement puisque la taille n'est pas connue au départ.
3. Les tuiles doivent être ajoutées dans le désordre. Pour simplifier, on peut se contenter de les ranger alternativement au début puis à la fin, au moment de leur création.

Dessin et animation des tuiles

1. Modifier le code pour que les tuiles soient désormais des canevas, dans lequel est dessiné l'image courante de la vidéo. Noter que drawImage peut prendre en entrée un élément vidéo : c'est l'image courante qui sera dessinée. Attention à l'ordre des paramètres, qui est très piégeux… On fera en sorte que le code qui dessine les images dans les canevas ne soit lancés que lorsque la vidéo est lancée (c'est-à-dire quand la promesse est résolue).
2. Faire en sorte que les canevas soient redessinés en permanence, grâce à window.requestAnimationFrame.
3. Modifier le code pour que chaque tuile ne contienne qu'une partie de l'image courante, correspondant évidemment à la position initiale de la tuile. (N'hésitez pas à enregistrer dans chaque tuile sa ligne et sa colonne initiales, typiquement avec un attribut data-*.) Il suffit d'utiliser les attributs de drawImage pour découper l'image d'entrée. Les attributs permettant de récupérer la taille de la vidéo sont videoWidth/videoHeight.

Implémentation du jeu

Il ne reste plus qu'à implémenter le jeu : la tuile numéro 0 doit être dessinée vide. Cliquer sur une tuile à côté de la tuile 0 doit échanger leurs positions.

Vous êtes libres de choisir comment implémenter cela. Une possibilité est de mettre dans la div puzzle des éléments « conteneurs de tuiles », qui ne bougent pas et connaissent leur position, et se contentent d'échanger leur fils. Mais ce n'est pas obligatoire.