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

Einführung

In diesem Projekt lernst du, wie du ein Tic-Tac-Toe-Spiel mit HTML, CSS und JavaScript erstellst. Tic-Tac-Toe ist ein Zwei-Spieler-Spiel, bei dem die Spieler abwechselnd in einem 3x3-Gitter X oder O markieren. Ziel ist es, drei Markierungen in einer Reihe zu erhalten, entweder horizontal, vertikal oder diagonal. Du wirst die erforderlichen HTML-, CSS- und JavaScript-Dateien erstellen und die Spiel-Logik schrittweise implementieren.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die grundlegende Struktur des Tic-Tac-Toe-Spiels mit HTML einrichtest.
Wie du CSS-Stile hinzufügst, um das Aussehen der Spiel-Elemente zu definieren.
Wie du die Spiel-Logik mit JavaScript implementierst.
Wie du Benutzerinteraktionen behandelst, Siege oder Unentschiedenheiten überprüfst und die Punkte aktualisierst.
Wie du das Spielfeld rendierst und den Zugzeiger aktualisierst.
Wie du Spielern erlaubst, das Spiel zurückzusetzen und eine neue Runde zu starten.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Eine HTML-Datei für eine Webanwendung zu strukturieren.
Elemente mit CSS-Klassen zu stylen.
Die Spiel-Logik mit JavaScript zu implementieren.
Benutzerinteraktionen zu behandeln und die Benutzeroberfläche entsprechend zu aktualisieren.
Das Spielfeld zu rendern und den Zugzeiger zu aktualisieren.
Ereignislistener zu erstellen und Ereignisse in JavaScript zu behandeln.

Erstellen Sie die HTML-Datei

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

cd ~/project
touch index.html

Dieser Code legt die grundlegende Struktur 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/[email protected]/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      /* CSS-Stile für das Spiel */
    </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">
        <!-- Spielfeldzellen -->
      </div>
      <div id="scoreboard" class="flex justify-between items-center mb-4">
        <!-- Spielerpunkte -->
      </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"
      >
        Spiel zurücksetzen
      </button>
    </div>

    <script>
      // JavaScript-Code für die Spiel-Logik
    </script>
  </body>
</html>

✨ Lösung prüfen und üben

Fügen Sie CSS-Stile hinzu

Im <style>-Tag im <head>-Abschnitt der HTML-Datei fügen Sie die für das Spiel erforderlichen CSS-Stile hinzu. Diese Stile definieren das Aussehen der Spiel-Elemente wie das Spielfeld, die Zellen, die Punkte und die 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 style.css zum Projekt hinzufügen und es über das <link>-Tag zur HTML-Datei verknüpfen.

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

Wählen Sie die Methode, die Ihnen am besten gefällt.

✨ Lösung prüfen und üben

Fügen Sie JavaScript-Code für die Spiel-Logik hinzu

Im <script>-Tag am Ende der HTML-Datei fügen Sie den JavaScript-Code hinzu, der die Spiel-Logik behandelt. Dieser Code verfolgt den Spielzustand, behandelt Benutzerinteraktionen, überprüft auf einen Sieg oder einen Unentschieden und aktualisiert die Punkte sowie rendert das Spielfeld.

<script>
  // Spiel-Logik-Code
</script>

✨ Lösung prüfen und üben

Initialisiere Spielvariablen

Deklariere die erforderlichen Variablen am Anfang des JavaScript-Codes. Diese Variablen werden den Spielzustand, die Spielerpunkte und andere relevante Informationen speichern.

// Spiel-Logik
const board = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
let gameEnded = false;
let playerXScore = 0;
let playerOScore = 0;
let winningCells = [];

✨ Lösung prüfen und üben

Behandle Zellenklick

Erstelle eine Funktion namens handleCellClick, die aufgerufen wird, wenn eine Zelle auf dem Spielfeld angeklickt wird. Diese Funktion wird die Hauptspiel-Logik behandeln, wie das Aktualisieren des Spielfelds, das Überprüfen auf einen Sieg, das Aktualisieren der Punkte und das Wechseln des aktuellen Spielers.

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

  if (checkWin()) {
    updateScore();
    highlightWinningCells();
    alert(`Spieler ${currentPlayer} gewinnt!`);
    gameEnded = true;
  } else if (board.every((cell) => cell !== "")) {
    alert("Unentschieden!");
    gameEnded = true;
  } else {
    currentPlayer = currentPlayer === "X" ? "O" : "X";
    updateTurnIndicator();
  }
}

✨ Lösung prüfen und üben

Überprüfe auf einen Sieg

Erstelle eine Funktion namens checkWin, die überprüft, ob es auf dem Spielfeld einen Gewinn-Zustand gibt. Diese Funktion vergleicht die Werte im board-Array mit den Gewinn-Kombinationen, um zu bestimmen, 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

Setze das Spiel zurück

Erstelle eine Funktion namens resetGame, die den Spielzustand auf seine Anfangswerte zurücksetzt. Diese Funktion wird aufgerufen, wenn die Zurücksetz-Schaltfläche geklickt wird und löscht das Spielfeld, setzt den aktuellen Spieler zurück, löscht die gewinnenden Zellen, aktualisiert den Zuganzeiger und rendert das Spielfeld.

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

✨ Lösung prüfen und üben

Aktualisiere Spielerpunkte

Erstelle eine Funktion namens updateScore, die die Punkte der Spieler aktualisiert. Diese Funktion wird aufgerufen, wenn ein Spieler ein Spiel gewinnt. Sie erhöht den Punktestand des entsprechenden Spielers und aktualisiert die Punktanzeige 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

Aktualisiere Zuganzeiger

Erstelle eine Funktion namens updateTurnIndicator, die den Zuganzeiger auf der Seite aktualisiert, um den aktuellen Spielerzug anzuzeigen.

function updateTurnIndicator() {
  const turnIndicator = document.getElementById("turn-indicator");
  turnIndicator.textContent = `Aktueller Zug: Spieler ${currentPlayer}`;
}

✨ Lösung prüfen und üben

Hervorhebe gewinnende Zellen

Erstelle eine Funktion namens highlightWinningCells, die der Klasse highlight die gewinnenden Zellen auf dem Spielfeld 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

Rendere das Spielfeld

Erstelle eine Funktion namens renderBoard, die das Spielfeld auf der Seite gemäß dem aktuellen Zustand des board-Arrays aktualisiert. Diese Funktion wird nach jedem Zug eines Spielers aufgerufen, um die Visualisierung 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

Füge Ereignislistener hinzu

Füge Ereignislistener zu den Zellen des Spielfelds und der Zurücksetzungs-Schaltfläche hinzu. Diese Ereignislistener rufen die entsprechenden Funktionen auf, wenn die Ereignisse auftreten.

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

Initiale Darstellung

Am Ende des JavaScript-Codes füge den Code für die initiale Darstellung hinzu. Dieser Code setzt den Anfangszustand des Spiels ein, aktualisiert den Zuganzeiger und rendert das Spielfeld.

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

✨ Lösung prüfen und üben

Starte das Projekt

Du kannst jetzt das Projekt ausführen und Tic-Tac-Toe spielen!

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

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

Klicke auf die Zellen, um deine Züge zu machen, und klicke auf die Zurücksetzungs-Schaltfläche, um ein neues Spiel zu starten.

✨ Lösung prüfen und üben

Zusammenfassung

Herzlichen Glückwunsch! Du hast 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 das Verarbeiten von Benutzereingaben. Das Spiel ermöglicht es zwei Spielern, abwechselnd Züge zu machen, prüft auf einen Sieg oder ein Unentschieden, aktualisiert die Punkte und hebt gewinnende Zellen hervor. Du kannst jetzt das Projekt ausführen und Spaß beim Spielen von Tic-Tac-Toe haben!

Erstelle eine Tic-Tac-Toe-Webanwendung

Einführung

👀 Vorschau

🎯 Aufgaben

🏆 Errungenschaften

Erstellen Sie die HTML-Datei

Fügen Sie CSS-Stile hinzu

Fügen Sie JavaScript-Code für die Spiel-Logik hinzu

Initialisiere Spielvariablen

Behandle Zellenklick

Überprüfe auf einen Sieg

Setze das Spiel zurück

Aktualisiere Spielerpunkte

Aktualisiere Zuganzeiger

Hervorhebe gewinnende Zellen

Rendere das Spielfeld

Füge Ereignislistener hinzu

Initiale Darstellung

Starte das Projekt

Zusammenfassung