• Accueil /
  • Cours et TP /

    • Modules et classes

    Technologie web 2

    Johan Girod

    Les modules (ESModule)

    À quoi servent les modules ?

    • découper son code en plusieurs fichiers pour mieux s'y retrouver
    • réutiliser du code d'un fichier à un autre
    • cacher les détails d'implémentation (variables « privée »)

    Exporter des variables

    Importer des variables
    à noter
    • Les instructions import doivent être au début du fichier
    • Les noms des variables importées doivent être les mêmes que ceux exportés
    • Le chemin du fichier est relatif au fichier qui importe

    On peut renommer un import

    Export par défaut

    Export par défaut
    À noter
    • On peut nommer la fonction importée comme on veut
    • On ne peut avoir qu'un seul export par défaut par fichier
    • Mais on peut mélanger les exports nommés et par défaut

    Les modules sont des singletons

    Un module est « chargé » une seule fois, même si on l'importe plusieurs fois.

    Dans un navigateur

    Les modules sont chargés de manière asynchrone, et sont exécutés dans l'ordre d'import.

    Les classes en Javascript

    Créer une classe

    Méthode static et propriétés privées

    Étendre une classe

    TP 5 : puissance 4

    Créer un jeu de puissance 4 en JavaScript.

    Partie 1 : le moteur de jeu

    Nous allons créer un moteur de jeu qui permet de jouer une partie de puissance 4.

    Créer un fichier puissance4.js qui contiendra le moteur de jeu.

    Créer une classe Puissance4 qui contiendra les méthodes suivantes :

    • constructor() : initialise le jeu
    • play(column) : joue un coup dans la colonne column
    • getCurrentPlayer() : retourne le joueur dont c’est le tour
    • getWinner() : retourne le joueur gagnant (ou null si personne n’a gagné)
    • getBoard() : retourne le plateau de jeu (le tableau de tableau)
    • logBoard() : affiche le tableau de jeu dans la console (on pourra utiliser console.table)

    Le plateau de jeu sera représenté par un tableau de 6 lignes et 7 colonnes. Chaque case pourra contenir un des trois états suivants : null (case vide), A (joueur A) ou B (joueur B).

    1. constructor()

    Le constructeur initialisera le plateau de jeu avec toutes les cases vides (initialisées à null).

    Le plateau est représenté par un tableau de 6 lignes, chaque ligne contenant un tableau de 7 éléments représentant les cases de chaque colonnes.

    Ainsi, pour accéder à la case en ligne 3 et colonne 4, on pourra utiliser this.#grid[3][4].

    Pour cela, on pourra utiliser la méthode Array.from.

    Exemple d’utilisation de Array.from

    const nombreJusqua10 = Array.from({ length: 10 }, (v, i) => i);
    Corrigé

    2. logBoard()

    La méthode logBoard() permettra d’afficher le plateau de jeu dans la console. On pourra utiliser la méthode console.table pour afficher le tableau.

    Vérifier que votre code fonctionne en initialisant une instance de la classe Puissance4 et en affichant le plateau de jeu dans la console.

    const game = new Puissance4();
game.logBoard();
    Corrigé

    3. getCurrentPlayer()

    Le premier joueur sera le joueur A. La méthode getCurrentPlayer() retournera le joueur dont c’est le tour. Ce dernier changera à chaque coup joué.

    Faire en sorte que le joueur courant ne puisse pas être modifié directement depuis l’extérieur de la classe (on pourra utiliser le mot-clé private).

    Corrigé

    4. play()

    La méthode play(column) permettra de jouer un coup dans la colonne column. Le coup sera joué par le joueur dont c’est le tour (joueur A ou joueur B). La méthode retournera true si le coup a été joué, false sinon.

    Vérifier que votre code fonctionne en jouant un coup dans une colonne.

    const game = new Puissance4();
game.play(3);
game.logBoard();
    Corrigé

    5. getWinner()

    La méthode getWinner() retournera le joueur gagnant (ou null si personne n’a gagné).

    Indice : on pourra utiliser une méthode privée #checkWin(row, column) qui vérifiera si un joueur a gagné à la fin de la méthode play. De cette manière, on sait à partir de quel jeton il faut vérifier les alignements.

    Vérifier que votre code fonctionne :

    const game = new Puissance4();
game.play(3); // A
game.play(1);
game.play(3); // A
game.play(6);
game.play(3); // A
game.play(4);
game.play(3); // A
game.logBoard();
console.log(game.getWinner()); // A
    Corrigé

    Partie deux : l’interface

    1. Créer un fichier puissance4.html qui contiendra l’interface du jeu, et un fichier index.js qui contiendra le code JavaScript permettant d’interagir avec le moteur de jeu.

      Vous pouvez utiliser le code HTML suivant :

      <!doctype html>
<html lang="fr">
	<head>
		<meta charset="UTF-8" />
		<title>Puissance 4</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<script src="index.js" type="module"></script>
		<h1>Puissance 4</h1>
		<div id="board"></div>
	</body>
</html>

    2. Pour pouvoir utiliser les modules avec votre projet, il faudra installer une extension VSCode qui permet de lancer un serveur local. Vous pouvez installer l’extension Live Server par exemple. Puis, faire un clic droit sur le fichier puissance4.html et choisir Open with Live Server.

    3. Créer une fonction renderBord qui affiche le plateau de jeu dans la div board. Cette fonction devra créer les éléments HTML du plateau de jeu. Le plateau sera représenté par plusieurs div représentant les colonnes et les cases du jeu.

    <div id="board">
	<div class="column">
		<div class="case"></div>
		...
	</div>
</div>

    Les case seront représentées par des div avec la classe case. Les cases du joueur A auront en plus la classe player-A, les cases du joueur B auront la classe player-B.

    Pour styliser le plateau de jeu, vous pouvez utiliser le fichier style.css suivant :

    #board {
	display: flex;
}

.column {
	display: flex;
	flex-direction: column;
}

.case {
	width: 50px;
	height: 50px;
	border: 1px solid black;
}

.case.player-A {
	background: radial-gradient(circle at 50% 50%, #ff0000 50%, #990000 50%, #990000 70%, white 70%);
}
.case.player-B {
	background: radial-gradient(circle at 50% 50%, #0000ff 50%, #000099 50%, #000099 70%, white 70%);
}
    1. Faire en sorte que le jeu puisse être joué en cliquant sur les colonnes du plateau :
      • Afficher en haut le joueur dont c’est le tour.
      • Jouer un coup dans la colonne en cliquant dessus
      • Si un joueur a gagné, on affichera un message de victoire
    Corrigé

    Partie 3 : Améliorations

    Ces améliorations vous familiariseront avec des notions CSS plus avancées. Ces notions ne seront pas vues en cours, mais elles vous seront très utiles si vous souhaitez vous spécialiser en développement front-end.

    1. Ajouter un jeton de la couleur du joueur au dessus de la colonne survolée par la souris. Vous pouvez le faire uniquement en CSS en utilisant la pseudo-classe :hover et la propriété ::before. Pour connaître la changer la couleur du jeton en fonction du joueur, vous pouvez ajouter une classe CSS à la grille de jeu contenant le joueur courant.

    Corrigé

    1. Faire en sorte que les joueurs puissent choisir la couleur de leur jeton.

      • Utiliser un input de type color pour permettre aux joueurs de choisir leur couleurs

      • Lorsque les couleurs seront modifiée, le code javascript devra mettre à jour une variable CSS contenant la couleur du joueur A et B. Les classes CSS des jetons devront être modifiées pour utiliser ces variables CSS.

      • Voir la documentation sur les input de type color

      • Voir une explication sur les variables CSS

    Corrigé

    1. Ajouter une animation lorsqu’un jeton est joué. Le jeton doit tomber depuis le haut et rebondir très lègerement sur le jeton du dessous. Pour cela, vous pourrez utiliser une animation CSS. Il vous faudra vous souvenir du dernier coup joué pour ajouter une classe spécifique déclenchant l’animation sur la case correspondante.