Créer un jeu de morpion à deux joueurs en utilisant JavaScript, HTML et CSS

Le morpion est un jeu populaire qui utilise une grille 3×3. Le but du jeu est d’être le premier joueur à placer trois symboles dans une rangée droite horizontale, verticale ou diagonale.

Vous pouvez créer un jeu de morpion qui fonctionne dans un navigateur Web en utilisant HTML, CSS et JavaScript. Vous pouvez utiliser HTML pour ajouter le contenu qui contient la grille 3×3, et CSS pour ajouter du style à la conception du jeu.

Vous pouvez ensuite utiliser JavaScript pour la fonctionnalité du jeu. Il s’agit notamment de placer des symboles, de faire tourner les joueurs et de décider qui gagne.

Comment créer l’interface utilisateur du jeu du morpion ?

Détails du contenu : afficher

Vous pouvez lire et télécharger le code source complet de ce jeu sur son dépôt GitHub.

Le morpion est l’un des nombreux jeux que vous pouvez créer lorsque vous apprenez à programmer. C’est un bon jeu pour pratiquer un nouveau langage ou un nouvel environnement, comme le moteur de développement de jeux PICO-8.

Pour créer un jeu de morpion qui fonctionne dans un navigateur Web, vous devrez ajouter du HTML pour le contenu de la page. Vous pouvez ensuite le styliser à l’aide de CSS.

Créez un nouveau fichier appelé « index.html ».

A l’intérieur de « index.html », ajoutez la structure de base d’un fichier HTML :

 <!doctype html>
<html lang="en-US">
  <head>
    <title>Tic Tac Toe Game</title>
  </head>
  <body>
    
  </body>
</html>

A l’intérieur de la balise HTML body, ajoutez un tableau qui contient trois lignes, avec trois cellules dans chaque ligne :

 <div class="container">
  <table>
    <tr>
      <td id="1"></td>
      <td id="2"></td>
      <td id="3"></td>
    </tr>
    <tr>
      <td id="4"></td>
      <td id="5"></td>
      <td id="6"></td>
    </tr>
    <tr>
      <td id="7"></td>
      <td id="8"></td>
      <td id="9"></td>
    </tr>
  </table>
</div>

Dans le même dossier que votre fichier HTML, créez un nouveau fichier appelé « styles.css ».

Dans le fichier CSS, ajoutez du style à votre grille 3 par 3 :

 table {
  border-collapse: collapse;
  margin: 0 auto;
}

td {
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid black;
}

Liez le fichier CSS à votre fichier HTML en l’ajoutant à la balise head :
```
 <link rel="stylesheet" type="text/css" href="styles.css"> 
```

Comment ajouter des symboles au plateau de jeu à tour de rôle ?

Dans le jeu, il y aura deux joueurs, chacun avec un symbole « X » ou « O ». Vous pouvez ajouter un symbole « X » ou « O » en cliquant sur l’une des cellules de la grille. Cela continuera jusqu’à ce que l’un de vous ait créé une rangée droite horizontale, verticale ou diagonale.

Vous pouvez ajouter cette fonctionnalité en utilisant JavaScript.

Dans le même dossier que vos fichiers HTML et CSS, créez un fichier JavaScript appelé « script.js ».

Liez le fichier JavaScript à votre fichier HTML en ajoutant le script au bas de la balise body :

 <body>
  <!-- Your code here -->
  <script src="script.js"></script>
</body>

Dans le fichier JavaScript, ajoutez une chaîne pour représenter le symbole du joueur. Il peut s’agir de « X » ou de « O ». Par défaut, le premier joueur placera un « X » :
```
 let playerSymbol = "X"; 
```
Ajoutez une autre variable pour savoir si la partie est terminée :
```
 let gameEnded = false 
```

Chaque cellule du tableau HTML a un ID compris entre 1 et 9. Pour chaque cellule du tableau, ajoutez un écouteur d’événements qui s’exécutera chaque fois qu’un utilisateur cliquera sur la cellule :

 for (let i = 1; i <= 9; i++) {
  document.getElementById(i.toString()).addEventListener(
    "click", 
    function() {
            
    }
  );
}

À l’intérieur de l’écouteur d’événements, modifiez le code HTML interne pour afficher le symbole actuel. Veillez à utiliser une instruction conditionnelle JavaScript pour vous assurer que la cellule est vide et que le jeu n’est pas encore terminé :
```
 if (this.innerHTML === "" && !gameEnded) {
  this.innerHTML = playerSymbol;
} 
```
Ajoutez une classe à l’élément HTML pour donner un style au symbole qui sera affiché sur la grille. Le nom des classes CSS sera soit « X » soit « O », selon le symbole :
```
 this.classList.add(playerSymbol.toLowerCase()); 
```
Dans le fichier « styles.css », ajoutez ces deux nouvelles classes pour les symboles « X » et « O ». Les symboles « X » et « O » s’afficheront dans des couleurs différentes :
```
 .x {
  color: blue;
  font-size: 80px;
}

.o {
  color: red;
  font-size: 80px;
} 
```
Dans le fichier JavaScript, après avoir modifié le innerHTML pour afficher le symbole, échangez le symbole. Par exemple, si le joueur vient de placer un « X », changez le symbole suivant en « O » :
```
 if (playerSymbol === "X")
  playerSymbol = "O"
else
  playerSymbol = "X" 
```
Pour exécuter le jeu, ouvrez le fichier « index.html » dans un navigateur Web pour afficher la grille 3 par 3 :
Commencez à placer des symboles sur la grille en cliquant sur les cellules. Le jeu alternera entre les symboles « X » et « O » :

Comment déterminer le gagnant

Pour le moment, le jeu continue même si un joueur a placé trois symboles consécutifs. Vous devrez ajouter une condition de fin pour vérifier cela après chaque tour.

Dans votre fichier JavaScript, ajoutez une nouvelle variable pour stocker toutes les positions « gagnantes » possibles pour la grille 3 par 3. Par exemple, « [1,2,3] »est la première ligne, ou « [1,4,7] » est une rangée diagonale.
```
 let winPos = [
  [1, 2, 3], [4, 5, 6], 
  [7, 8, 9], [1, 4, 7], 
  [2, 5, 8], [3, 6, 9], 
  [1, 5, 9], [3, 5, 7]
]; 
```
Ajout d’une nouvelle fonction appelée checkWin() :
```
 function checkWin() {
  
} 
```
Dans la fonction, bouclez sur chacune des positions gagnantes possibles :
```
 for (let i = 0; i < winPos.length; i++) {

} 
```

Dans la boucle for, vérifiez si toutes les cellules contiennent le symbole du joueur :

 if (
  document.getElementById(winPos[i][0]).innerHTML === playerSymbol &&
  document.getElementById(winPos[i][1]).innerHTML === playerSymbol &&
  document.getElementById(winPos[i][2]).innerHTML === playerSymbol
) {

}

Si la condition est évaluée à true, alors tous les symboles sont en ligne droite. Dans l’instruction if, affichez un message à l’utilisateur. Vous pouvez également modifier le style de l’élément HTML en ajoutant une classe CSS appelée « win » :

 document.getElementById(winPos[i][0]).classList.add("win");
document.getElementById(winPos[i][1]).classList.add("win");
document.getElementById(winPos[i][2]).classList.add("win"); 
gameEnded = true;

setTimeout(function() {
  alert(playerSymbol + " wins!");
}, 500);

Ajoutez cette classe CSS « win » au fichier « styles.css ». Lorsque le joueur gagne, la couleur de fond des cellules gagnantes devient jaune :
```
 .win {
  background-color: yellow;
} 
```

Appelez la fonction checkWin() à chaque fois qu’un joueur a un tour, dans le gestionnaire d’événements ajouté dans les étapes précédentes :

 for (let i = 1; i <= 9; i++) {
  // Whenever a player clicks on a cell
  document.getElementById(i.toString()).addEventListener(
    "click", 
    function() {
      if (this.innerHTML === "" && !gameEnded) {
        // Display either "X" or "O" in the cell, and style it
        this.innerHTML = playerSymbol;
        this.classList.add(playerSymbol.toLowerCase());
                
        // Check if a player has won
        checkWin();
                
        // Swap the symbol to the other one for the next turn
        if (playerSymbol === "X")
          playerSymbol = "O"
        else
          playerSymbol = "X"
      }
    }
  );
}

Comment réinitialiser le plateau de jeu

Lorsqu’un joueur a gagné la partie, vous pouvez réinitialiser le plateau de jeu. Vous pouvez également réinitialiser le plateau de jeu en cas d’égalité.

Dans le fichier HTML, après le tableau, ajoutez un bouton de réinitialisation :
```
 <button id="reset">Reset</button> 
```

Ajoutez du style au bouton de réinitialisation :

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

#reset {
  margin: 48px 40%;
  padding: 20px;
}

Dans le fichier JavaScript, ajoutez un gestionnaire d’événements qui s’exécutera chaque fois que l’utilisateur cliquera sur le bouton de réinitialisation :
```
 document.getElementById("reset").addEventListener(
  "click", 
  function() {

  }
); 
```

Pour chaque cellule de la grille, récupérez l’élément HTML à l’aide de la fonction getElementById(). Réinitialisez le innerHTML pour supprimer les symboles « O » et « X », et supprimez tous les autres styles CSS :

 for (let i = 1; i <= 9; i++) {
  document.getElementById(i.toString()).innerHTML = "";
  document.getElementById(i.toString()).classList.remove("x");
  document.getElementById(i.toString()).classList.remove("o");
  document.getElementById(i.toString()).classList.remove("win");
  gameEnded = false;
}

Lancez le jeu en ouvrant le fichier « index.html » dans un navigateur Web.
Commencez à placer des symboles « X » et « O » sur la grille. Essayez de faire gagner un des symboles.
Appuyez sur le bouton de réinitialisation pour réinitialiser le plateau de jeu.

Apprendre le JavaScript en créant des jeux

Vous pouvez continuer à améliorer vos compétences en programmation en créant d’autres projets en JavaScript. Il est facile de créer des jeux et des outils simples dans un environnement Web, en utilisant des technologies ouvertes et multiplateformes comme JavaScript et HTML.

Il n’y a pas de meilleur moyen d’améliorer votre programmation que de vous entraîner à écrire des programmes !