Examen DCC janvier 2020-2021
Dans le cadre de cet examen, nous vous demandons de reproduire une version simplifiée du jeu Tic-Tac-Toe aussi connu sous le nom OXO. Le but est de remplir une ligne, colonne ou diagonale d’un même symbole dans une matrice de taille fixe, ici 9. Le jeu sera joué par une seule personne qui placera alternativement des JS et des
Vous pouvez consulter une version finale du projet ici.
- Renommez le dossier qui se trouve sur le bureau de votre machine qui porte le nom
examen-dcc-janvier-2020-2021
enexamen-dcc-janvier-2020-2021-nom-prenom-group
. - Dans le cadre de cet examen de Développement Côté Client vous devez uniquement vous focaliser sur le fichier
index.js
, qui se trouve à la racine. Mis à part ajouter la balisescript
, on ne vous demande pas de modifier le code html ni le code CSS qui s'y rapporte. - Cet examen dure maximum 4 heures.
- Créer une classe
Player
qui contient au moins une propriété qui représente le score du joueur. - Définissez une constante qui contient le temps maximal que prendra une partie.
- Stockez dans un conteneur approprié 2 instances de la classe Player.
- Stockez dans un conteneur approprié les 2 éléments
.result_item result_item--love
et.result_item result_item--js
afin de pouvoir facilement modifier leur contenu. Ces 2 éléments contiennent respectivement le score du joueur JS et love. - Définissez une variable globale qui vous permet de connaitre le joueur courant.
-
Commencez par ajouter à l'élément racine
html
la classejs-enabled
à l'aide de JavaScript. -
Retirez du document html l'élément
.no-js__message
. -
Générez 9 items de liste à l'élément portant l'identifiant
app
. Voici le code HTML d'un l'item.<li class="grid__item"></li>
-
Affichez dans l’élément
.timer
le temps maximal d’une partie. Notez que vous devez convertir les secondes en un couple (minutes, secondes) pour permettre l’affichage "01:40" si la durée maximale est égale à 100 secondes. 100 secondes c’est équivalent 1 minute et 40 secondes.
Dans cette seconde partie, nous vous demandons de programmer le jeu
-
Quand le joueur clique pour la première fois sur un
grid__item
vous ajoutez à cet élément la classegrid__item--js
. Ainsi l'item devient<li class="grid__item grid__item--js"></li>
-
Mettez à jour le score du premier joueur.
-
Dès que le joueur a cliqué, vous devez enclencher le compte à rebours.
-
Quand le joueur clique pour la deuxième fois sur un autre
grid__item
vous ajoutez à cet élément la classegrid__item--love
.<li class="grid__item grid__item--love"></li>
-
Mettez à jour le score du deuxième joueur.
-
Maintenez cette alternance de coups. Une fois JS une fois love.
-
Enrichissez l’expérience utilisateur en ajoutant la classe
js
à l’élément.grid
si c’est au tour deJS
etlove
si c’est au tour de love de jouer, cela permet d’avoir un effet au survol de la grille. Veillez à n'avoir qu'un seul modificateur de classe à la fois. Soitgrid js
ougrid love
. -
Affichez le nouveau score du bon joueur.
- Il n'est pas permis de changer la valeur d'une case. Quand on clique sur une case déjà jouée, le joueur perd 1 point.
- Dès que le conteur tombe à 0, le jeu se termine et personne n'a gagné.
- Détectez lorsque le joueur a placé une ligne, une colonne ou une diagonale de coeur ou de js. Dans quel cas vous connaissez le gagnant !
- Si le plateau de jeux est rempli, mais que personne n'a gagné alors le jeu se termine aussi
- Si le joueur gagne avec une ligne, colonne ou diagonale de JS alors vous devez charger le formulaire
<form class="play-again-template_form" method="get">
<p class="play-again-template_form__message"><span class="play-again-template_form__message__winner play-again-template_form__message__winner--js">js</span> a gagné !</p>
<input class="btn play-again-template_form__submit" type="submit" value="Jouer à nouveau !">
</form>
- Si le joueur gagne avec une ligne, colonne ou diagonale de love alors vous devez charger le formulaire
<form class="play-again-template_form" method="get">
<p class="play-again-template_form__message"><span class="play-again-template_form__message__winner play-again-template_form__message__winner--love">love</span> a gagné !</p>
<input class="btn play-again-template_form__submit" type="submit" value="Jouer à nouveau !">
</form>
- Si le joueur perd par manque de temps ou car toutes les cases sont remplies alors vous devez charger le formulaire
<form class="play-again-template_form" method="get">
<p class="play-again-template_form__message">Le jeu est perdu</p>
<input class="btn play-again-template_form__submit" type="submit" value="Jouer à nouveau !">
</form>
Organisez votre code de sorte à pouvoir recommencer infiniment. Si js perd alors c'est love qui commence la prochaine partie. Veillez à ne pas soumettre le formulaire, ce qui impliquerait de recharger la page.
Dans le document HTML se trouvent 3 templates JavaScript qui contiennent chacun un formulaire différent. Dès lors, vous pouvez améliorer le point précédent en chargeant le bon formulaire à l’aide de la méthode importNode(). Attention, cette méthode retournera le formulaire si vous lui passez le bon sélecteur, il n'est pas encore inclus dans l'arbre du document. Pour ce faire, vous devez appeler une méthode telle que insertAdjacentElement().
- Si le joueur gagne avec une ligne, colonne ou diagonale de JS alors vous devez charger le template
.play-again-template--js
- Si le joueur gagne avec une ligne, colonne ou diagonale de love alors vous devez charger le template
.play-again-template--love
- Si le joueur perd par manque de temps ou car toutes les cases sont remplies alors vous devez charger le template
.play-again-template--lost