Services web et politiques de sécurité ; Web components

Master Internet, Données et Connaissances

Alexandre Niveau

Enseignement des technologies du Web

 

Services web et politiques de sécurité ; Web components

Notes de cours

Travail personnel

Exercice 1 — Taquin animé #

On va créer un nouvel élément HTML sliding-puzzle qui implémente un jeu de taquin animé à partir d'une vidéo.

<sliding-puzzle src="videos/chien.webm" size="4">
</sliding-puzzle>
  1. Mettre en place votre custom element sliding-puzzle, en oubliant l'aspect puzzle pour l'instant, et sans se soucier de templates et de shadow DOM.

    Lors de sa création, l'élément doit s'ajouter comme fils un élément video avec pour source celle indiquée en attribut du sliding-puzzle. La vidéo doit se lancer directement et tourner en boucle.

  2. Vérifier que ça fonctionne, vous pouvez tester avec l'URL https://ensweb.users.info.unicaen.fr/tp/taquin/videos/chien.webm. Vérifier avec l'inspecteur que la vidéo est bien dans le DOM, et qu'on peut en modifier le style depuis la page (ajouter video { opacity: 0.5; } dans le CSS de la page).
  3. Modifier le code pour que la vidéo soit ajoutée non pas comme fils de l'élément lui-même, mais dans son shadow DOM. Constater les différences par rapport à la question précédente.
  4. À présent, on va gérer la partie puzzle. Le custom element doit créer size×size « tuiles », dans un tableau this.tiles. Les tuiles sont pour l'instant des éléments quelconques contenant les entiers de 0 à size²-1, et les ajouter dans une nouvelle div d'identifiant puzzle.
  5. Les tuiles doivent s'afficher dans une grille size×size, grâce à une grille CSS (grid layout). On est obligé d'écrire une partie du CSS dynamiquement puisque la taille n'est pas connue au départ. Cependant une bonne partie du CSS peut être écrite en-dehors du JS : le plus adapté est de créer un template HTML contenant notre div puzzle vide et un élément style avec tout le CSS statique.
  6. 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.
  7. Modifier le code pour que les tuiles soient des canevas, dans lequel est dessiné une partie 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… NB: un événement qui peut être utile est loadeddata, déclenché lorsque la première frame de la vidéo est accessible. Les attributs permettant de récupérer la taille de la vidéo sont videoWidth/videoHeight.
  8. Faire en sorte que les canevas soient redessinés en permanence, grâce à window.requestAnimationFrame.
  9. 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.