:: Enseignements :: ESIPE :: E3INFO :: 2020-2021 :: Programmation Web avec JavaScript ::
[LOGO]

Objet, Dictionnaire, DOM, Tableaux, EcmaScript 6


Comme pour les TPs précédents, on vous demande de créer le rapport du TP4 dans un fichier compte-rendu-tp4.html. En plus du compte rendu, le TP consiste pour les deux exercice à éditer les fichiers treasure1.html et treasure2.html.

Exercice 1 - Treasure Map

Le but de cet exercice est de fabriquer un jeu simple de recherche de trésor sur une plage. Cet exercice est découpé en 3 phases, dans un premier temps, comprendre comment intéragir avec l'utilisateur et mettre à jour l'arbre DOM existant. Dans un second temps, créer dynamiquement l'arbre DOM. Et enfin dans un dernier temps, utiliser des images de sable et de trésor pour rendre l'aspect visuel du jeu plus attractif.

  1. Recopiez la page Web treasure1.html.
    Qu'affiche le jeu sur la console ? Est-ce le résultat attendu ? Comment corriger se problème ?
  2. On souhaite parcourir chaque ligne de la grille et chaque case de la grille en utilisant une boucle sur chaque ligne et une boucle sur chaque case d'une ligne.
    Ecrire le code qui affiche dans la console le div de chaque case ainsi que sa position en x et y (la première case est en (0, 0)) en utilisant deux boucles avec des index.
    Note: ecrire une version compatible avec La version 5 de EcmaScript. On verra plus tard pourquoi.
    Rappel: le champ children sur un noeud de l'arbre DOM renvoie une HTMLCollection qui possède un champ length qui renvoie le nombre d'enfants et un opérateur [] qui permet d'accéder au ième élement.
  3. Au lieu de faire des boucles, on souhaite utiliser la méthode forEach définie sur les tableaux.
    Expliquer pourquoi on ne peut pas utiliser la méthode forEach sur les children de game. Par exemple, en écrivant game.children.forEach(...).
    Pour résoudre se problème, on va utiliser Array.from() comme cela Array.from(game.children).forEach(...). A quoi sert la méthode Array.from ?
    Commenter le code avec les deux boucles et ré-écrivez un code qui fait la même chose mais en utilisant forEach.
    Rappel: la fonction que prend forEach a deux paramètres, le second est l'index dans le taleau.
  4. Modfifier le code pour afficher la case et les coordonées uniquement si l'utilisateur clique sur la case.
    Rappel: Il existe un champ onclick sur les noeuds DOM.
  5. Commenter le code précédent et décommenter le code avec les deux boucles et ajouter la detection des clicks de l'utilisateur.
    Expliquer pourquoi le code ne marche pas (si vous avez utilisé des var) ?
    En supposant que l'on a pas le droit d'utiliser EcmaScript 6 (ES6), on va utiliser la technique IIFE pour résoudre le problème, modifier votre code en conséquence.
    Rappel: Immediately Invoked Function Expression ou IIFE
  6. Si on a le droit d'utiliser la version EcmaScript 6, le plus simple est d'utiliser un let au lieu d'un var.
    Puisque l'on utilise EcmaScript 6, on va aussi en profiter pour utiliser des lambdas (les arrow functions) à la place des fonctions classique qui n'ont pas de noms.
    Commenter les versions avec un for(var et un forEach et écrivez une version avec des let à la place des var et des lambdas.
  7. Bien revenons au jeu, on veut cacher des trésors sur la grille et lorsque l'utilisateur clique sur un DIV découvrir si il y a un trésor ou pas sur cette case. Pour l'instant lorsqu'une case est cliquer, nous allons changer sa couleur de background soit en vert si il y a un trésor soit en rouge si il n'y a pas de trèsor. Une fois qu'une case cliqué, celle-ci ne peut plus être cliqué une seconde fois.
    Nous allons découper le problème en deux parties, une qui consiste à générer les trésors, et une second partie qui indique si il existe un trésor à une case en fonction de coordonées x et y.
    On se propose pour cela de créer deux fonctions, une fonction createTreasures() qui renvoie un tableau contenant 10 trésors (tirer aléatoirement) et une fonction findTreasure(treasures, w, y) qui renvoie vrai si il y a un trésor du tableau sous la case x, y.
    Ecrire les deux fonctions createTreasures et findTreasure et afficher dans la console le résultat de findTreasure lorsqu'un utilisateur clique sur une case.
    Note: il faut stocker chaque treasure sous la forme d'un objet/dictionnaire avec des champs row et col (respectivement pour les lignes et colonnes). Il n'est pas nécessire d'utiiser un objet nommé (que l'on créé avec new) ici, mais cela n'est pas dérangeant si vous préférez, cela juste plus de lignes de codes.
    Note 2: pour l'instant on ne s'occupe pas du fait que l'on peut générer deux trésors au même endroit, on verra cela plus tard.
    Rappel: Math.floor(Math.random() * 8) permet d'obtenir un nombre aléatoire entre 0 et 8 (non compris).
    Rappel 2: [] est un tableau vide et la méthode push permet d'ajouter une valeur en fin de tableau.
    Rappel 3: il existe une méthode filter sur les tableaux qui permet de selectionner si une valeur d'une case répond à certain critère, ici, si les coordonnées sont les bonnes.
  8. Il ne nous reste plus qu'a changer le couleur du background en fonction de la valeur de retour de findTreasure. Pour cela, il suffit de changer la valeur background-color du style du noeud DOM correspond.
    Note: il y a deux façon d'accéder à un champ d'un objet DOM, soit avec la notation .champ soit avec la notation ["champ"]. La notation "." ne marche pas si le nom du champ n'est pas un identifiant valide en JavaScript.
    Note 2: si vous ne l'avez pas déjà fait, il faut aussi éviter que l'utilisateur puisse cliquer deux fois sur la même case.

Exercice 2 - Treasure Map (2)

On veut maintenant améliorer le jeu, aussi bien au niveau du code que du visuel
On utilisera pour cela le fichier treasure2.html.
A part la première question, les changements proposés par cet exercice sont indépendant les uns des autres.