Puissance 4, Javascript et le DOM

Le but de ce TD est de se familiariser avec le langage Javascript. Nous allons uniquement travailler côté client. Pour réussir ce TD, vous avez besoin uniquement d’une connexion internet. En effet, il vous faudra chercher par vous-même certaines questions délicates.

  1. Commence par te créer un nouveau projet sur Glitch.

On s’échauffe avec le CSS

  1. Crée d’abord un document HTML qui contient une balise <div> contenant une table avec trois lignes et 2 colonnes. Chaque cellule étant vide et pense à identifier le <div>.

  2. Rajoute une feuille de style et donne une largeur et une hauteur aux cellules de ta table. Rajoute des bords bleus à ta cellule (border). En utilisant border-radius, fais en sorte d’obtenir ceci:

    Enfin, en utilisant background-color fais en sorte d’obtenir ceci:

  3. Le but va être de jouer des jetons dans la grille de deux couleurs différentes. Rajoute deux classes player1 et player2 par exemple et fais en sorte de remplir la couleur des cellules en fonction de la classe.

Unobtrusive (discret) JavaScript

On veut pouvoir jouer sur un grand tableau. Comme vu en cours, on essaye d’avoir une page qui peut être affichée même si le javascript est désactivé.

Ici, on va sortir un message d’erreur si ca ne marche pas, mais toujours afficher la page ref.

  1. Enlève l’ancienne table et remplace le div par

    <div id="...">Activez JavaScript pour jouer.</div>

  2. Rajoute un script javascript, utilise defer pour attacher le script. En utilisant console.log dans le script et en affichant la console (Shift+Ctrl+K pour Firefox, F12 pour Chrome) quand tu affiches ton site, vérifie que tout fonctionne comme il faut.

  3. Dans ce jeu, on va séparer la logique du jeu et le code qui tourne dans un tableau javascript des éléments du DOM du document HTML. Déclare une variable globale board et initialise à un tableau d’entiers de taille 6×7 contenant que des zéros. Pense à utiliser console.log pour vérifier ce que tu fais !

    Note: contrairement à C ou Java, les tableaux en JavaScript n’ont pas une taille fixée et les tableaux à deux dimensions peuvent être simulés ou bien par un tableau à une dimension ou bien par un tableau de tableaux.

    Utilise Array(n) et/ou .fill()

  4. Déclare une fonction set(row, column, player) qui prend en entrée une ligne et une colonne et un entier et change la valeur du tableau board à cet endroit.

  5. Génération du DOM: écris une fonction render() qui:

    • Trouve l’élément <div> en utilisant document.querySelector.
    • Vide cet élément (.innerHTML = '')
    • Crée la <table> du noeud du DOM node en utilisant document.createElement, et ajoute cet élément à la bonne place (.appendChild).
    • Crée les <tr> et <td> dans ta <table>. Teste ta fonction et vérifie que ta page affiche bien ce qu’il faut.

  6. Modifie render() pour que le <td> à la position (i,j) a la bonne classe en fonction de sa valeur contenue dans le board. Tu peux utiliser

    my_element.className = 'some_class_name';

    Teste ton travail avec la console en appelant set et render.

  7. Definis une variable globale turn, qui indique à qui c’est le tour de jouer.

  8. Déclare une fonction play(column) qui

    • prend en entrée une colonne,
    • regarde dans le board et trouve la première cellule vide.
    • si aucune cellule n’est vide, return false,
    • sinon change la valeur de la cellule à la valeur de turn, change la valeur de turn et renvoie la valeur de la ligne correspondante.

    Teste ta fonction !

événements !

C’est le momnet de jouer. Il faut lier le click (événement) au code Javascript. On pourrait associer un événement à chaque cellule, mais en JS on peut faire mieux: créer un événement pour la table en entière et utiliser .currentTarget à la place de .target.

Pour réagir et savoir où on est, il y a plusieurs solutions. En voici une:

  1. Utilise .addEventListener(), et définis un handler pour l’événement click sur le tableau (<table> element). Pour voir ce que cela fait, éxécute

    console.log(event.target)

    Teste tout cela en cliquant, et essaye avec .currentTarget.

  2. Modifie render() pour que chaque cellule <td> contienne un attribut data-column égal à la colonne contenant le <td>. Ces attributs data-* ont une API spéciale en Javascript: chaque noeud du DOM possède un champs dataset qui premet de lire et écrire à ces data-*.Par exemple, si my_cell represente un élément <td> le code suivant

    // example using dataset
my_row.appendChild(my_cell);
my_cell.dataset.column = 0;

    va insérer un noeud

    <td data-column="0"></td>

    dans le document. Attention, les propriétés dataset sont converties en string par JS.

    Modifie alors l’événement du clic pour qu’il affiche la valeur contenue dans data-column. Encore une fois, teste avant de continuer.

  3. Maintenant on peut jouer ! Modifie l’événemtn du clic pour répondre et jouer ou ne fait rien si le clic est en dehors d’une cellule. (Tu peux tester l’exitence de dataset.column).

Optionnel, à faire chez soi pour s’entrainer.

Si tu veux continuer à t’entrainer avant de commencer les projets, ce qui suit peut t’aider.

  1. Contruis une fonction qui vérifie si un coup est gagnant ou pas.

  2. Modifie l’application de telle sorte que: si un coup est gagnant, on affiche le vainqueur, et si on clique encore, on recommence le jeu.

  3. Utilise la propriété animation de CSS pour changer ce que fait l’interface pour les 4 jetons gagnant. guide sur animations CSS).

  4. Utilise la propriété box-shadow.

  5. Mets ton code dans une classe javascript et enlève les variables globales pour avoir plusieurs jeux par page.

  6. Teste le jeu sur ton smartphone et essaye d’avoir quelque chose de responsive. Tu eux voir cela aussi en faisant Shfit+Ctrl+M sur chrome ou firefox. guide on mobile development).