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
Sie können den vollständigen Quellcode für dieses Spiel von lesen und herunterladen GitHub-Repository.
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 z
die Spieleentwicklungs-Engine PICO-8.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.
- Erstellen Sie eine neue Datei namens "index.html".
- Fügen Sie in "index.html" die grundlegende Struktur einer HTML-Datei hinzu:
html>
<htmllang="en-US">
<Kopf>
<Titel>Tic Tac Toe-SpielTitel>
Kopf>
<Körper>
Körper>
html> - Fügen Sie innerhalb des HTML-Tags body eine Tabelle hinzu, die drei Zeilen mit drei Zellen in jeder Zeile enthält:
<divKlasse="Container">
<Tisch>
<tr>
<tdAusweis="1">td>
<tdAusweis="2">td>
<tdAusweis="3">td>
tr>
<tr>
<tdAusweis="4">td>
<tdAusweis="5">td>
<tdAusweis="6">td>
tr>
<tr>
<tdAusweis="7">td>
<tdAusweis="8">td>
<tdAusweis="9">td>
tr>
Tisch>
div> - Erstellen Sie im selben Ordner wie Ihre HTML-Datei eine neue Datei mit dem Namen "styles.css".
- Fügen Sie in der CSS-Datei Ihrem 3-mal-3-Raster ein Styling hinzu:
Tisch {
Grenze zusammenbrechen: Zusammenbruch;
Rand: 0 Auto;
}td {
Breite: 100px;
Höhe: 100px;
Textausrichtung: Center;
vertikal ausrichten: Mitte;
Grenze: 1pxsolideSchwarz;
} - Verknüpfen Sie die CSS-Datei mit Ihrer HTML-Datei, indem Sie sie dem Head-Tag hinzufügen:
<Verknüpfungrel="Stilvorlage"Typ="text/css"href="stile.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.
- Erstellen Sie im selben Ordner wie Ihre HTML- und CSS-Dateien eine JavaScript-Datei namens „script.js“.
- Verknüpfen Sie die JavaScript-Datei mit Ihrer HTML-Datei, indem Sie das Skript am Ende des Body-Tags hinzufügen:
<Körper>
Ihr Code hier
<SkriptQuelle="script.js">Skript>
Körper> - 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 platziert der erste Spieler ein „X“:
lassen SpielerSymbol = "X"; - Fügen Sie eine weitere Variable hinzu, um zu verfolgen, ob das Spiel beendet ist:
lassen gameEnded = FALSCH - 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:
für (lassen ich = 1; ich <= 9; i++) {
dokumentieren.getElementById (i.toString()).addEventListener(
"klicken",
Funktion() {
}
);
} - Ändern Sie im Ereignis-Listener den inneren HTML-Code so, dass das aktuelle Symbol angezeigt wird. Unbedingt verwenden eine bedingte JavaScript-Anweisung Stellen Sie zunächst sicher, dass die Zelle leer ist und das Spiel noch nicht beendet ist:
Wenn (Das.innerHTML "" && !gameEnded) {
Das.innerHTML = playerSymbol;
} - 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":
Das.classList.add (playerSymbol.toLowerCase()); - 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 unterschiedlichen Farben angezeigt:
.X {
Farbe: Blau;
Schriftgröße: 80px;
}.Ö {
Farbe: Rot;
Schriftgröße: 80px;
} - 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“ platziert hat, ändern Sie das nächste Symbol in „O“:
Wenn (playerSymbol "X")
SpielerSymbol = "Ö"
anders
SpielerSymbol = "X" - Um das Spiel auszuführen, öffnen Sie die Datei „index.html“ in einem Webbrowser, um das 3-mal-3-Raster anzuzeigen:
- 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“:
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.
- Fügen Sie in Ihrer JavaScript-Datei eine neue Variable hinzu, um alle möglichen "Gewinn"-Positionen für das 3-mal-3-Raster zu speichern. Beispielsweise ist „[1,2,3]“ die obere Zeile oder „[1,4,7]“ eine diagonale Zeile.
lassen 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]
]; - Fügen Sie eine neue Funktion namens checkWin() hinzu:
FunktioncheckWin() {
} - Durchlaufen Sie innerhalb der Funktion jede der möglichen Gewinnpositionen:
für (lassen ich = 0; i < winPos.länge; i++) {} - Überprüfen Sie innerhalb der for-Schleife, ob alle Zellen das Symbol des Spielers enthalten:
Wenn (
dokumentieren.getElementById (winPos[i][0]).innerHTML playerSymbol &&
dokumentieren.getElementById (winPos[i][1]).innerHTML playerSymbol &&
dokumentieren.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - 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:
dokumentieren.getElementById (winPos[i][0]).classList.add("gewinnen");
dokumentieren.getElementById (winPos[i][1]).classList.add("gewinnen");
dokumentieren.getElementById (winPos[i][2]).classList.add("gewinnen");
gameEnded = WAHR;setTimeout(Funktion() {
Alarm (playerSymbol + " Gewinnt!");
}, 500); - Fügen Sie diese „win“-CSS-Klasse zur Datei „styles.css“ hinzu. Wenn der Spieler gewinnt, ändert sich die Hintergrundfarbe der Gewinnzellen in Gelb:
.gewinnen {
Hintergrundfarbe: Gelb;
} - Rufen Sie die Funktion checkWin() jedes Mal auf, wenn ein Spieler an der Reihe ist, innerhalb des in den vorherigen Schritten hinzugefügten Ereignishandlers:
für (lassen ich = 1; ich <= 9; i++) {
// Immer wenn ein Spieler auf eine Zelle klickt
dokumentieren.getElementById (i.toString()).addEventListener(
"klicken",
Funktion() {
Wenn (Das.innerHTML "" && !gameEnded) {
// Entweder "X" oder "O" in der Zelle anzeigen und formatieren
Das.innerHTML = playerSymbol;
Das.classList.add (playerSymbol.toLowerCase());
// Prüfen, ob ein Spieler gewonnen hat
checkWin();
// Tausche das Symbol für die nächste Runde gegen das andere aus
Wenn (playerSymbol "X")
SpielerSymbol = "Ö"
anders
SpielerSymbol = "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.
- Fügen Sie in der HTML-Datei nach der Tabelle eine Schaltfläche zum Zurücksetzen hinzu:
<TasteAusweis="zurücksetzen">ZurücksetzenTaste> - Fügen Sie der Reset-Taste etwas Styling hinzu:
.Container {
Anzeige: biegen;
Flex-Richtung: Spalte;
}#zurücksetzen {
Rand: 48px 40%;
Polsterung: 20px;
} - 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:
dokumentieren.getElementById("zurücksetzen").addEventListener(
"klicken",
Funktion() {}
); - 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:
für (lassen ich = 1; ich <= 9; i++) {
dokumentieren.getElementById (i.toString()).innerHTML = "";
dokumentieren.getElementById (i.toString()).classList.remove("X");
dokumentieren.getElementById (i.toString()).classList.remove("Ö");
dokumentieren.getElementById (i.toString()).classList.remove("gewinnen");
gameEnded = FALSCH;
} - Führen Sie das Spiel aus, indem Sie die Datei „index.html“ in einem Webbrowser öffnen.
- Platzieren Sie die Symbole „X“ und „O“ auf dem Raster. Versuchen Sie, eines der Symbole zum Gewinnen zu bringen.
- Drücken Sie die Reset-Taste, um das Spielbrett zurückzusetzen.
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!