LabEx
EntrerRejoindre

Créer une application web de Morpion (Tic-Tac-Toe)

CSSBeginner
Pratiquer maintenant

Introduction

Dans ce projet, vous apprendrez à créer un jeu de Morpion en utilisant HTML, CSS et JavaScript. Le Morpion est un jeu à deux joueurs où chacun marque à tour de rôle un X ou un O dans une grille 3x3. L'objectif est d'aligner trois symboles, horizontalement, verticalement ou en diagonale. Vous créerez les fichiers HTML, CSS et JavaScript nécessaires et implémenterez la logique du jeu étape par étape.

👀 Aperçu

Aperçu du jeu de Morpion

🎯 Objectifs

Dans ce projet, vous apprendrez :

  • Comment structurer la base du jeu de Morpion avec HTML.
  • Comment ajouter des styles CSS pour définir l'apparence des éléments du jeu.
  • Comment implémenter la logique du jeu en utilisant JavaScript.
  • Comment gérer les interactions utilisateur, vérifier les victoires ou les matchs nuls, et mettre à jour les scores.
  • Comment afficher le plateau de jeu et mettre à jour l'indicateur de tour.
  • Comment permettre aux joueurs de réinitialiser le jeu pour commencer une nouvelle partie.

🏆 Compétences acquises

Après avoir terminé ce projet, vous serez capable de :

  • Structurer un fichier HTML pour une application web.
  • Appliquer des styles via des classes CSS.
  • Implémenter une logique de jeu en JavaScript.
  • Gérer les interactions utilisateur et mettre à jour l'interface en conséquence.
  • Afficher le plateau de jeu et mettre à jour l'indicateur de tour.
  • Créer des écouteurs d'événements et gérer les événements en JavaScript.

Créer le fichier HTML

Créez un nouveau fichier nommé index.html et ajoutez-y le code suivant.

cd ~/project
touch index.html

Ce code met en place la structure de base du jeu de Morpion.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tic-Tac-Toe</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      /* CSS styles for the game */
    </style>
  </head>

  <body>
    <div id="app">
      <h1 class="text-3xl font-bold mb-4 text-gray-900">Tic-Tac-Toe</h1>
      <div id="board" class="grid grid-cols-3 gap-4 mb-4">
        <!-- Game board cells -->
      </div>
      <div id="scoreboard" class="flex justify-between items-center mb-4">
        <!-- Player scores -->
      </div>
      <div
        id="turn-indicator"
        class="text-2xl font-bold mb-4 text-gray-900"
      ></div>
      <button
        id="reset-button"
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        Reset Game
      </button>
    </div>

    <script>
      // JavaScript code for the game logic
    </script>
  </body>
</html>
✨ Vérifier la solution et pratiquer

Ajouter les styles CSS

À l'intérieur de la balise <style> dans la section <head> du fichier HTML, ajoutez les styles CSS requis pour le jeu. Ces styles définissent l'apparence des éléments tels que le plateau, les cellules, les scores et les boutons.

<style>
  .board-cell {
    width: 100px;
    height: 100px;
  }

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #222;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }

  #app {
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  h1 {
    font-size: 32px;
    color: #333;
  }

  .text-gray-900 {
    color: #333 !important;
  }

  .text-2xl {
    font-size: 24px;
  }

  .bg-blue-500 {
    background-color: #4267b2;
  }

  .bg-blue-500:hover {
    background-color: #3b5ca0;
  }

  .bg-blue-700 {
    background-color: #385898;
  }

  .text-white {
    color: #fff !important;
  }

  .rounded {
    border-radius: 4px;
  }

  .highlight {
    background-color: #ffed4a;
  }
</style>

Vous pouvez également ajouter un fichier style.css au projet et le lier au fichier HTML via la balise <link>.

<link rel="stylesheet" href="style.css" />

Choisissez la méthode que vous préférez.

✨ Vérifier la solution et pratiquer

Ajouter le code JavaScript de la logique de jeu

À l'intérieur de la balise <script> à la fin du fichier HTML, ajoutez le code JavaScript qui gère la logique du jeu. Ce code suit l'état du jeu, gère les interactions, vérifie les victoires ou les matchs nuls, met à jour les scores et affiche le plateau.

<script>
  // Game logic code
</script>
✨ Vérifier la solution et pratiquer

Initialiser les variables du jeu

Déclarez les variables nécessaires au début du code JavaScript. Ces variables stockeront l'état du jeu, les scores des joueurs et d'autres informations pertinentes.

// Game logic
const board = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
let gameEnded = false;
let playerXScore = 0;
let playerOScore = 0;
let winningCells = [];
✨ Vérifier la solution et pratiquer

Gérer le clic sur une cellule

Créez une fonction nommée handleCellClick qui sera appelée lorsqu'une cellule du plateau est cliquée. Cette fonction gérera la logique principale, comme la mise à jour du plateau, la vérification d'une victoire, la mise à jour des scores et le changement de joueur.

function handleCellClick(index) {
  if (gameEnded || board[index] !== "") return;
  board[index] = currentPlayer;
  renderBoard();

  if (checkWin()) {
    updateScore();
    highlightWinningCells();
    alert(`Player ${currentPlayer} wins!`);
    gameEnded = true;
  } else if (board.every((cell) => cell !== "")) {
    alert("It's a tie!");
    gameEnded = true;
  } else {
    currentPlayer = currentPlayer === "X" ? "O" : "X";
    updateTurnIndicator();
  }
}
✨ Vérifier la solution et pratiquer

Vérifier la victoire

Créez une fonction nommée checkWin qui vérifie s'il existe une condition de victoire sur le plateau. Cette fonction compare les valeurs du tableau board avec les combinaisons gagnantes pour déterminer si un joueur a gagné.

function checkWin() {
  const winningCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];

  for (let i = 0; i < winningCombinations.length; i++) {
    const [a, b, c] = winningCombinations[i];
    if (board[a] !== "" && board[a] === board[b] && board[a] === board[c]) {
      winningCells = [a, b, c];
      return true;
    }
  }
  return false;
}
✨ Vérifier la solution et pratiquer

Réinitialiser le jeu

Créez une fonction nommée resetGame qui réinitialise l'état du jeu à ses valeurs initiales. Cette fonction est appelée lorsque le bouton de réinitialisation est cliqué ; elle vide le plateau, réinitialise le joueur actuel, efface les cellules gagnantes, met à jour l'indicateur de tour et redessine le plateau.

function resetGame() {
  board.fill("");
  currentPlayer = "X";
  gameEnded = false;
  winningCells = [];
  updateTurnIndicator();
  renderBoard();
}
✨ Vérifier la solution et pratiquer

Mettre à jour les scores des joueurs

Créez une fonction nommée updateScore qui met à jour les scores. Cette fonction est appelée lorsqu'un joueur gagne. Elle incrémente le score du joueur correspondant et met à jour l'affichage sur la page.

function updateScore() {
  if (currentPlayer === "X") {
    playerXScore++;
    document.getElementById("player-x-score").textContent = playerXScore;
  } else {
    playerOScore++;
    document.getElementById("player-o-score").textContent = playerOScore;
  }
}
✨ Vérifier la solution et pratiquer

Mettre à jour l'indicateur de tour

Créez une fonction nommée updateTurnIndicator qui met à jour l'indicateur sur la page pour afficher le tour du joueur actuel.

function updateTurnIndicator() {
  const turnIndicator = document.getElementById("turn-indicator");
  turnIndicator.textContent = `Current Turn: Player ${currentPlayer}`;
}
✨ Vérifier la solution et pratiquer

Mettre en surbrillance les cellules gagnantes

Créez une fonction nommée highlightWinningCells qui ajoute une classe de surbrillance aux cellules gagnantes. Cette fonction est appelée lorsqu'un joueur gagne.

function highlightWinningCells() {
  const cells = document.querySelectorAll(".board-cell");
  cells.forEach((cell, index) => {
    if (winningCells.includes(index)) {
      cell.classList.add("highlight");
    }
  });
}
✨ Vérifier la solution et pratiquer

Afficher le plateau de jeu

Créez une fonction nommée renderBoard qui met à jour le plateau sur la page en fonction de l'état actuel du tableau board. Cette fonction est appelée après chaque coup pour mettre à jour l'interface visuelle.

function renderBoard() {
  const cells = document.querySelectorAll(".board-cell");
  cells.forEach((cell, index) => {
    cell.textContent = board[index];
    cell.classList.remove("highlight");
  });
}
✨ Vérifier la solution et pratiquer

Ajouter les écouteurs d'événements

Ajoutez des écouteurs d'événements aux cellules du plateau et au bouton de réinitialisation. Ces écouteurs appellent les fonctions correspondantes lors des interactions.

// Event listeners
const cells = document.querySelectorAll(".board-cell");
cells.forEach((cell, index) => {
  cell.addEventListener("click", () => handleCellClick(index));
});

const resetButton = document.getElementById("reset-button");
resetButton.addEventListener("click", resetGame);
✨ Vérifier la solution et pratiquer

Rendu initial

À la fin du code JavaScript, ajoutez le code pour le rendu initial. Ce code configure l'état de départ du jeu, met à jour l'indicateur de tour et affiche le plateau.

// Initial render
updateTurnIndicator();
renderBoard();
✨ Vérifier la solution et pratiquer

Exécuter le projet

Vous pouvez maintenant exécuter le projet et jouer au Morpion !

Cliquez sur le bouton Go Live dans le coin inférieur droit du WebIDE pour lancer le projet.

Bouton Go Live du WebIDE

Cela ouvrira le projet dans l'onglet Web 8080.

Interface de l'onglet Web 8080

Cliquez sur les cellules pour jouer vos coups et utilisez le bouton de réinitialisation pour commencer une nouvelle partie.

✨ Vérifier la solution et pratiquer

Résumé

Félicitations ! Vous avez créé avec succès un jeu de Morpion en utilisant HTML, CSS et JavaScript. Le projet a couvert la création du fichier HTML, l'ajout des styles CSS, l'implémentation de la logique de jeu et la gestion des interactions utilisateur. Le jeu permet à deux joueurs de jouer à tour de rôle, vérifie les victoires ou les matchs nuls, met à jour les scores et met en surbrillance les cellules gagnantes. Vous pouvez maintenant profiter de votre jeu de Morpion !

Connexe CSS Cours
CSS pour Débutants

CSS pour Débutants

cssweb-development
Construire une application web Tic-Tac-Toe

Construire une application web Tic-Tac-Toe

javascriptweb-development
Création d'un jeu web de Tapez - le - taupe

Création d'un jeu web de Tapez - le - taupe

javascriptweb-development