Tic-Tac-Toe-Spiel | HTML, CSS, JavaScript

Einführung

In diesem Projekt lernen Sie, wie Sie ein Tic-Tac-Toe-Spiel mit HTML, CSS und JavaScript erstellen. Tic-Tac-Toe ist ein Spiel für zwei Personen, bei dem die Spieler abwechselnd X oder O in ein 3x3-Raster setzen. Ziel ist es, drei Markierungen in einer Reihe zu platzieren – entweder horizontal, vertikal oder diagonal. Sie erstellen die erforderlichen HTML-, CSS- und JavaScript-Dateien und implementieren die Spiellogik Schritt für Schritt.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

Wie man die Grundstruktur des Tic-Tac-Toe-Spiels mit HTML aufbaut.
Wie man CSS-Stile hinzufügt, um das Erscheinungsbild der Spielelemente zu definieren.
Wie man die Spiellogik mit JavaScript implementiert.
Wie man Benutzerinteraktionen verarbeitet, auf Gewinn oder Unentschieden prüft und Spielstände aktualisiert.
Wie man das Spielfeld rendert und die Anzeige für den aktuellen Spieler aktualisiert.
Wie man es Spielern ermöglicht, das Spiel zurückzusetzen und eine neue Runde zu starten.

🏆 Erfolge

Nach Abschluss dieses Projekts sind Sie in der Lage:

Eine HTML-Datei für eine Webanwendung zu strukturieren.
Elemente mithilfe von CSS-Klassen zu gestalten.
Spiellogik mit JavaScript zu implementieren.
Benutzerinteraktionen zu verarbeiten und die Benutzeroberfläche entsprechend zu aktualisieren.
Das Spielfeld zu rendern und die Anzeige für den aktuellen Spieler zu aktualisieren.
Event-Listener zu erstellen und Ereignisse in JavaScript zu verarbeiten.

Erstellen der HTML-Datei

Erstellen Sie eine neue Datei namens index.html und fügen Sie den folgenden Code hinzu.

cd ~/project
touch index.html

Dieser Code legt die Grundstruktur des Tic-Tac-Toe-Spiels fest.

<!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>

✨ Lösung prüfen und üben

Hinzufügen von CSS-Stilen

Fügen Sie innerhalb des <style>-Tags im <head>-Bereich der HTML-Datei die für das Spiel erforderlichen CSS-Stile hinzu. Diese Stile definieren das Aussehen der Spielelemente wie Spielfeld, Zellen, Spielstände und Schaltflächen.

<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>

Sie können auch eine style.css zum Projekt hinzufügen und diese über das <link>-Tag mit der HTML-Datei verknüpfen.

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

Wählen Sie die Methode, die Sie bevorzugen.

✨ Lösung prüfen und üben

Hinzufügen des JavaScript-Codes für die Spiellogik

Fügen Sie innerhalb des <script>-Tags am Ende der HTML-Datei den JavaScript-Code hinzu, der die Spiellogik steuert. Dieser Code verfolgt den Spielstatus, verarbeitet Benutzerinteraktionen, prüft auf Gewinn oder Unentschieden, aktualisiert die Spielstände und rendert das Spielfeld.

<script>
  // Game logic code
</script>

✨ Lösung prüfen und üben

Initialisieren der Spielvariablen

Deklarieren Sie die erforderlichen Variablen zu Beginn des JavaScript-Codes. Diese Variablen speichern den Spielstatus, die Spielstände der Spieler und andere relevante Informationen.

// Game logic
const board = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
let gameEnded = false;
let playerXScore = 0;
let playerOScore = 0;
let winningCells = [];

✨ Lösung prüfen und üben

Verarbeiten von Zellklicks

Erstellen Sie eine Funktion namens handleCellClick, die aufgerufen wird, wenn auf eine Zelle auf dem Spielfeld geklickt wird. Diese Funktion steuert die Hauptlogik des Spiels, wie das Aktualisieren des Spielfelds, das Prüfen auf einen Gewinn, das Aktualisieren der Spielstände und den Wechsel des aktuellen Spielers.

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();
  }
}

✨ Lösung prüfen und üben

Prüfen auf einen Gewinn

Erstellen Sie eine Funktion namens checkWin, die prüft, ob eine Gewinnbedingung auf dem Spielfeld erfüllt ist. Diese Funktion vergleicht die Werte im board-Array mit den Gewinnkombinationen, um festzustellen, ob ein Spieler das Spiel gewonnen hat.

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;
}

✨ Lösung prüfen und üben

Zurücksetzen des Spiels

Erstellen Sie eine Funktion namens resetGame, die den Spielstatus auf die Anfangswerte zurücksetzt. Diese Funktion wird aufgerufen, wenn die Reset-Schaltfläche angeklickt wird. Sie leert das Spielfeld, setzt den aktuellen Spieler zurück, löscht die Gewinnzellen, aktualisiert die Anzeige für den aktuellen Spieler und rendert das Spielfeld neu.

function resetGame() {
  board.fill("");
  currentPlayer = "X";
  gameEnded = false;
  winningCells = [];
  updateTurnIndicator();
  renderBoard();
}

✨ Lösung prüfen und üben

Aktualisieren der Spielstände

Erstellen Sie eine Funktion namens updateScore, die die Spielstände der Spieler aktualisiert. Diese Funktion wird aufgerufen, wenn ein Spieler ein Spiel gewinnt. Sie erhöht den Punktestand des entsprechenden Spielers und aktualisiert die Anzeige auf der Seite.

function updateScore() {
  if (currentPlayer === "X") {
    playerXScore++;
    document.getElementById("player-x-score").textContent = playerXScore;
  } else {
    playerOScore++;
    document.getElementById("player-o-score").textContent = playerOScore;
  }
}

✨ Lösung prüfen und üben

Aktualisieren der Anzeige für den aktuellen Spieler

Erstellen Sie eine Funktion namens updateTurnIndicator, die die Anzeige auf der Seite aktualisiert, um den Spielzug des aktuellen Spielers anzuzeigen.

function updateTurnIndicator() {
  const turnIndicator = document.getElementById("turn-indicator");
  turnIndicator.textContent = `Current Turn: Player ${currentPlayer}`;
}

✨ Lösung prüfen und üben

Hervorheben der Gewinnzellen

Erstellen Sie eine Funktion namens highlightWinningCells, die den Gewinnzellen auf dem Spielfeld eine Highlight-Klasse hinzufügt. Diese Funktion wird aufgerufen, wenn ein Spieler das Spiel gewinnt.

function highlightWinningCells() {
  const cells = document.querySelectorAll(".board-cell");
  cells.forEach((cell, index) => {
    if (winningCells.includes(index)) {
      cell.classList.add("highlight");
    }
  });
}

✨ Lösung prüfen und üben

Rendern des Spielfelds

Erstellen Sie eine Funktion namens renderBoard, die das Spielfeld auf der Seite entsprechend dem aktuellen Status des board-Arrays aktualisiert. Diese Funktion wird nach jedem Spielzug aufgerufen, um die visuelle Darstellung zu aktualisieren.

function renderBoard() {
  const cells = document.querySelectorAll(".board-cell");
  cells.forEach((cell, index) => {
    cell.textContent = board[index];
    cell.classList.remove("highlight");
  });
}

✨ Lösung prüfen und üben

Hinzufügen von Event-Listenern

Fügen Sie Event-Listener zu den Spielfeldzellen und der Reset-Schaltfläche hinzu. Diese Event-Listener rufen die entsprechenden Funktionen auf, wenn die Ereignisse eintreten.

// 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);

✨ Lösung prüfen und üben

Initiales Rendern

Fügen Sie am Ende des JavaScript-Codes den Code für das initiale Rendern hinzu. Dieser Code richtet den Anfangszustand des Spiels ein, aktualisiert die Anzeige für den aktuellen Spieler und rendert das Spielfeld.

// Initial render
updateTurnIndicator();
renderBoard();

✨ Lösung prüfen und üben

Ausführen des Projekts

Sie können das Projekt jetzt ausführen und Tic-Tac-Toe spielen!

Klicken Sie auf die Schaltfläche Go Live in der unteren rechten Ecke der WebIDE, um das Projekt zu starten.

Dadurch wird das Projekt im Tab Web 8080 geöffnet.

Klicken Sie auf die Zellen, um Ihre Züge zu machen, und klicken Sie auf die Reset-Schaltfläche, um ein neues Spiel zu starten.

✨ Lösung prüfen und üben

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich ein Tic-Tac-Toe-Spiel mit HTML, CSS und JavaScript erstellt. Das Projekt umfasste das Erstellen der HTML-Datei, das Hinzufügen von CSS-Stilen, die Implementierung der Spiellogik und die Verarbeitung von Benutzerinteraktionen. Das Spiel ermöglicht es zwei Spielern, abwechselnd zu ziehen, prüft auf Gewinn oder Unentschieden, aktualisiert die Spielstände und hebt die Gewinnzellen hervor. Sie können das Projekt jetzt ausführen und viel Spaß beim Spielen von Tic-Tac-Toe haben!

Erstellung einer Tic-Tac-Toe-Webanwendung

Einführung

👀 Vorschau

🎯 Aufgaben

🏆 Erfolge

Erstellen der HTML-Datei

Hinzufügen von CSS-Stilen

Hinzufügen des JavaScript-Codes für die Spiellogik

Initialisieren der Spielvariablen

Verarbeiten von Zellklicks

Prüfen auf einen Gewinn

Zurücksetzen des Spiels

Aktualisieren der Spielstände

Aktualisieren der Anzeige für den aktuellen Spieler

Hervorheben der Gewinnzellen

Rendern des Spielfelds

Hinzufügen von Event-Listenern

Initiales Rendern

Ausführen des Projekts

Zusammenfassung