:: Enseignements :: ESIPE :: E3INFO :: 2020-2021 :: Programmation Web avec JavaScript ::
![[LOGO]](http://igm.univ-mlv.fr/ens/resources/mlv.png) |
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.
-
Recopiez la page Web treasure1.html.
Qu'affiche le jeu sur la console ? Est-ce le résultat attendu ? Comment corriger se problème ?
-
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.
-
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.
-
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.
-
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
-
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.
-
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.
-
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.
© Université de Marne-la-Vallée