×
Outbyte PC Repair
Outbyte Driver Updater

Erstellen Sie ein Tic-Tac-Toe-Spiel für zwei Spieler mit JavaScript, HTML und CSS

2023/01/27
Erstellen Sie ein Tic-Tac-Toe-Spiel für zwei Spieler mit JavaScript, HTML und CSS

Tic-Tac-Toe ist ein beliebtes Spiel, das ein 3×3-Raster verwendet. Das Ziel des Spiels ist es, als erster Spieler drei Symbole in einer geraden horizontalen, vertikalen oder diagonalen Reihe zu platzieren.

Sie können ein Tic-Tac-Toe-Spiel erstellen, das in einem Webbrowser mit HTML, CSS und JavaScript ausgeführt wird. Sie können HTML verwenden, um den Inhalt hinzuzufügen, der das 3 × 3-Raster enthält, und CSS, um dem Spieldesign ein gewisses Styling hinzuzufügen.

Sie können dann JavaScript für die Funktionalität des Spiels verwenden. Dazu gehört das Platzieren von Symbolen, der Wechsel zwischen den Spielern und die Entscheidung, wer gewinnt.

So erstellen Sie die Benutzeroberfläche für das Tic-Tac-Toe-Spiel

Tic-Tac-Toe ist eines der vielen Spiele, die Sie machen können, wenn Sie das Programmieren lernen. Es ist gut, eine neue Sprache oder Umgebung zu üben, wie die PICO-8-Spieleentwicklungs-Engine.

Um ein Tic-Tac-Toe-Spiel zu erstellen, das in einem Webbrowser ausgeführt wird, müssen Sie HTML für den Seiteninhalt hinzufügen. Sie können dies dann mit CSS formatieren.

  1. Erstellen Sie eine neue Datei namens „index.html“.
  2. Fügen Sie in „index.html“ die grundlegende Struktur einer HTML-Datei hinzu: <!doctype html>
    <html lang="en-US">
      <head>
        <title>Tic Tac Toe Game</title>
      </head>
      <body>

      </body>
    </html>

  3. Fügen Sie innerhalb des HTML-Tags body eine Tabelle hinzu, die drei Zeilen mit drei Zellen in jeder Zeile enthält: <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>
  4. Erstellen Sie im selben Ordner wie Ihre HTML-Datei eine neue Datei namens „styles.css“.
  5. Fügen Sie in der CSS-Datei Ihrem 3-mal-3-Raster ein Styling hinzu: table {
      border-collapse: collapse;
      margin: 0 auto;
    }

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

  6. Verknüpfen Sie die CSS-Datei mit Ihrer HTML-Datei, indem Sie sie dem Head-Tag hinzufügen: <link rel="stylesheet" type="text/css" href="styles.css">

Wie man abwechselnd Symbole zum Spielbrett hinzufügt

Im Spiel gibt es zwei Spieler, jeder mit einem „X“- oder „O“-Symbol. Sie können entweder ein „X“- oder ein „O“-Symbol hinzufügen, indem Sie auf eine der Gitterzellen klicken. Dies wird fortgesetzt, bis einer von Ihnen eine gerade horizontale, vertikale oder diagonale Reihe erstellt hat.

Sie können diese Funktionalität mit JavaScript hinzufügen.

  1. Erstellen Sie im selben Ordner wie Ihre HTML- und CSS-Dateien eine JavaScript-Datei mit dem Namen „script.js“.
  2. Verknüpfen Sie die JavaScript-Datei mit Ihrer HTML-Datei, indem Sie das Skript am Ende des Body-Tags hinzufügen: <body>
      <!-- Your code here -->
      <script src="script.js"></script>
    </body>
  3. Fügen Sie in der JavaScript-Datei eine Zeichenfolge hinzu, die das Symbol des Spielers darstellt. Dies kann entweder „X“ oder „O“ sein. Standardmäßig setzt der erste Spieler ein „X“: let playerSymbol = "X";
  4. Fügen Sie eine weitere Variable hinzu, um zu verfolgen, ob das Spiel beendet ist: let gameEnded = false
  5. Jede Zelle in der HTML-Tabelle hat eine ID zwischen 1 und 9. Fügen Sie für jede Zelle in der Tabelle einen Ereignis-Listener hinzu, der ausgeführt wird, wenn ein Benutzer auf die Zelle klickt: for (let i = 1; i <= 9; i++) {
      document.getElementById(i.toString()).addEventListener(
        "click",
        function() {

        }
      );
    }

  6. Ändern Sie im Ereignis-Listener den inneren HTML-Code so, dass das aktuelle Symbol angezeigt wird. Stellen Sie sicher, dass Sie zuerst eine bedingte JavaScript-Anweisung verwenden, um sicherzustellen, dass die Zelle leer ist und das Spiel noch nicht beendet ist: if (this.innerHTML === "" &&! gameEnded) {
      this.innerHTML = playerSymbol;
    }
  7. Fügen Sie dem HTML-Element eine Klasse hinzu, um das Symbol zu formatieren, das im Raster angezeigt wird. Der Name der CSS-Klassen lautet je nach Symbol entweder „X“ oder „O“: this.classList.add(playerSymbol.toLowerCase());
  8. Fügen Sie in der Datei „styles.css“ diese beiden neuen Klassen für die Symbole „X“ und „O“ hinzu. Die Symbole „X“ und „O“ werden in verschiedenen Farben angezeigt: .x {
      color: blue;
      font-size: 80px;
    }

    .o {
      color: red;
      font-size: 80px;
    }

  9. Tauschen Sie in der JavaScript-Datei das Symbol aus, nachdem Sie innerHTML geändert haben, um das Symbol anzuzeigen. Wenn der Spieler beispielsweise gerade ein „X“ gesetzt hat, ändern Sie das nächste Symbol in „O“: if (playerSymbol === "X")
      playerSymbol = "O"
    else
      playerSymbol = "X"
  10. Um das Spiel auszuführen, öffnen Sie die Datei „index.html“ in einem Webbrowser, um das 3-mal-3-Raster anzuzeigen:
    Tic-Tac-Toe leeres Raster im Browser
  11. Beginnen Sie mit dem Platzieren von Symbolen auf dem Raster, indem Sie auf die Zellen klicken. Das Spiel wechselt zwischen den Symbolen „X“ und „O“:
    Tic-Tac-Toe-Spiel im Browser mit Symbolen

So ermitteln Sie den Gewinner

Im Moment wird das Spiel auch dann fortgesetzt, wenn ein Spieler drei aufeinanderfolgende Symbole platziert hat. Sie müssen eine Endbedingung hinzufügen, um dies nach jeder Runde zu überprüfen.

  1. Fügen Sie in Ihrer JavaScript-Datei eine neue Variable hinzu, um alle möglichen „Gewinnpositionen“ für das 3-mal-3-Raster zu speichern. Zum Beispiel ist „[1,2,3]“ die obere Zeile oder „[1,4,7]“ eine diagonale Zeile. 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]
    ];
  2. Fügen Sie eine neue Funktion namens checkWin() hinzu: function checkWin() {

    }

  3. Durchlaufen Sie innerhalb der Funktion jede der möglichen Gewinnpositionen: for (let i = 0; i < winPos.length; i++) {

    }

  4. Überprüfen Sie innerhalb der for-Schleife, ob alle Zellen das Symbol des Spielers enthalten: if (
      document.getElementById(winPos[i][0]).innerHTML === playerSymbol &&
      document.getElementById(winPos[i][1]).innerHTML === playerSymbol &&
      document.getElementById(winPos[i][2]).innerHTML === playerSymbol
    ) {

    }

  5. Wenn die Bedingung wahr ist, befinden sich alle Symbole in einer geraden Linie. Zeigen Sie dem Benutzer innerhalb der if-Anweisung eine Nachricht an. Sie können auch das Styling des HTML-Elements ändern, indem Sie eine CSS-Klasse namens „win“ hinzufügen: 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);

  6. Fügen Sie diese „win“-CSS-Klasse zur „styles.css“-Datei hinzu. Wenn der Spieler gewinnt, ändert sich die Hintergrundfarbe der Gewinnzellen in Gelb: .win {
      background-color: yellow;
    }
  7. Rufen Sie die Funktion checkWin() jedes Mal auf, wenn ein Spieler an der Reihe ist, innerhalb des in den vorherigen Schritten hinzugefügten Ereignishandlers: 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"
          }
        }
      );
    }

So setzen Sie das Spielbrett zurück

Sobald ein Spieler das Spiel gewonnen hat, können Sie das Spielbrett zurücksetzen. Sie können das Spielbrett im Falle eines Unentschiedens auch zurücksetzen.

  1. Fügen Sie in der HTML-Datei nach der Tabelle eine Schaltfläche zum Zurücksetzen hinzu: <button id="reset">Reset</button>
  2. Fügen Sie der Reset-Taste etwas Styling hinzu: .container {
      display: flex;
      flex-direction: column;
    }

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

  3. Fügen Sie in der JavaScript-Datei einen Ereignishandler hinzu, der ausgeführt wird, wenn der Benutzer auf die Schaltfläche zum Zurücksetzen klickt: document.getElementById("reset").addEventListener(
      "click",
      function() {

      }
    );

  4. Rufen Sie für jede Zelle im Raster das HTML-Element mit der Funktion getElementById() ab. Setzen Sie innerHTML zurück, um die Symbole „O“ und „X“ zu entfernen, und entfernen Sie alle anderen CSS-Stile: 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;
    }
  5. Führen Sie das Spiel aus, indem Sie die Datei „index.html“ in einem Webbrowser öffnen.
  6. Platzieren Sie die Symbole „X“ und „O“ auf dem Raster. Versuchen Sie, eines der Symbole zum Gewinnen zu bringen.
    Tic Tac Toe-Gewinner
  7. Drücken Sie die Reset-Taste, um das Spielbrett zurückzusetzen.
    Tic-Tac-Toe mit Reset-Taste

JavaScript lernen, indem man Spiele macht

Sie können Ihre Programmierkenntnisse weiter verbessern, indem Sie weitere Projekte in JavaScript erstellen. Es ist einfach, einfache Spiele und Tools in einer Webumgebung zu erstellen, indem plattformübergreifende, offene Technologien wie JavaScript und HTML verwendet werden.

Es gibt keinen besseren Weg, Ihre Programmierung zu verbessern, als das Schreiben von Programmen zu üben!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert