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

À 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
isWin() : vérifie si un joueur 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 : undefined (case vide), A (joueur A) ou B (joueur B).

Le constructeur initialisera le plateau de jeu avec toutes les cases vides.

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.

La méthode getCurrentPlayer() retournera le joueur dont c’est le tour.

La méthode isWin() vérifiera si un joueur a gagné. Elle retournera A si le joueur A a gagné, B si le joueur B a gagné, false sinon.

Pour vérifier les fonctions vous pouvez créer un fichier test.js qui appellera les fonctions de la classe Puissance4 et affichera le résultat dans la console.

node test.js

constructor()

Corrigé

getCurrentPlayer()

Corrigé

play(column)

Corrigé

isWin()

Corrigé

logBoard()

Corrigé

Partie deux : l’interface

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>

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.

Créer une fonction renderBord qui affiche le plateau de jeu dans la div board. 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, #ff0000, #990000);
}
.case.player-B {
	background: radial-gradient(circle, #ffff00, #999900);
}

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é