HTML+CSS+JavaScript zum Erstellen eines einfachen Tic-Tac-Toe-Spiels

Demo-Adresse

Implementieren von HTML

Zuerst werde ich im Kopfbereich die CSS- und JavaScript-Dateien einbinden, die wir später erstellen werden. Ich habe auch eine Google-Schriftart namens Itim hinzugefügt.

<link rel="stylesheet" href="style.css" rel="externes nofollow" >
<link rel="preconnect" href="https://fonts.gstatic.com" rel="externes nofollow" >
<link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="externes Nofollow" rel="stylesheet">
<script src="index.js"></script>

Der Hauptteil des HTML wird ziemlich einfach sein. Um alles zusammenzufassen, verwende ich ein Haupttag und wende einen Klassenhintergrund darauf an. Innerhalb der Hauptverpackung werden wir fünf Abschnitte haben.

Der erste Abschnitt enthält nur unsere Überschrift h1.

Im zweiten Abschnitt wird angezeigt, wer gerade an der Reihe ist. In der Anzeige haben wir einen Bereich, der je nach aktuellem Benutzer entweder ein X oder ein O enthält. Wir wenden auf diesen Bereich eine Klasse an, um den Text einzufärben.

Der dritte Teil ist der Teil, der das Spielbrett hält. Es verfügt über eine Containerklasse, sodass wir die Kacheln richtig platzieren können. In diesem Abschnitt haben wir 9 Divs, die als Kacheln innerhalb des Boards fungieren.

Der vierte Teil ist für die Bekanntgabe der endgültigen Wettbewerbsergebnisse verantwortlich. Standardmäßig ist es leer und wir werden seinen Inhalt über JavaScript ändern.

Der letzte Abschnitt speichert unsere Steuerung, die eine Schaltfläche zum Neustarten enthält.

<Hauptklasse="Hintergrund">
        <Abschnitt Klasse="Titel">
            <h1>TicTacToe</h1>
        </Abschnitt>
        <Abschnitt Klasse="Anzeige">
            Der Zug von Spieler <span class="display-player playerX">X</span></section>
        <Abschnitt Klasse="Container">
            <div Klasse="Kachel"></div>
            <div Klasse="Kachel"></div>
            <div Klasse="Kachel"></div>
            <div Klasse="Kachel"></div>
            <div Klasse="Kachel"></div>
            <div Klasse="Kachel"></div>
            <div Klasse="Kachel"></div>
            <div Klasse="Kachel"></div>
            <div Klasse="Kachel"></div>
        </Abschnitt>
        <Abschnitt Klasse = "Anzeige Ansager ausblenden"></Abschnitt>
        <Abschnitt Klasse="Steuerungen">
            <button id="reset">Neustart</button>
        </Abschnitt>
    </main>

CSS hinzufügen

Ich werde nicht auf jede Zeile CSS im Detail eingehen, aber Sie können sich den vollständigen Code im Quellcode ansehen.

Zuerst erstelle ich die Datei style.css, entferne alle vom Browser definierten Ränder und Abstände und lege die Google-Schriftarten fest, die ich im HTML für das gesamte Dokument eingefügt habe.

* {
    Polsterung: 0;
    Rand: 0;
    Schriftfamilie: „Itim“, kursiv;
}

Das nächste wichtige, was wir hinzufügen müssen, ist der Stil unseres Boards. Wir werden CSS Grid verwenden, um das Board zu erstellen. Wir können den Container in zwei Hälften teilen, indem wir dreimal 33 % des Platzes für Spalten und Zeilen bereitstellen. Wir zentrieren den Container, indem wir eine maximale Breite und margin: 0 auto; festlegen.

.container {
    Rand: 0 automatisch;
    Anzeige: Raster;
    Rastervorlagenspalten: 33 % 33 % 33 %;
    Rastervorlagenzeilen: 33 % 33 % 33 %;
    maximale Breite: 300px;
}

Als Nächstes fügen wir Stile für die Kacheln im Board hinzu. Wir wenden einen kleinen weißen Rand an und legen die Mindestbreite und -höhe auf 100 Pixel fest. Wir machen Gebrauch von Flexbox und zentrieren den Inhalt, indem wir justify-content und align-items到center setzen. Wir wählen eine große Schriftgröße und wenden cursor: pointer , damit die Benutzer wissen, dass das Feld anklickbar ist.

.Kachel {
    Rand: 1px durchgehend weiß;
    Mindestbreite: 100px;
    Mindesthöhe: 100px;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Schriftgröße: 50px;
    Cursor: Zeiger;
}

Um die beiden Spieler besser unterscheiden zu können, habe ich zwei unterschiedliche Farben verwendet. Dazu erstelle ich zwei Hilfsklassen. Die Farbe von Spieler X ist grün und die Farbe von Spieler O ist blau.

.spielerX {
    Farbe: #09C372;
}

.spielerO {
    Farbe: #498AFB;
}

Implementierung des Javascript-Teils

Da wir die JavaScript-Datei in <head> einbinden. Dies ist erforderlich, da unser Skript geladen wird, bevor der Browser den HTML-Text analysiert. Wenn Sie nicht alles in diese Funktion einschließen möchten, können Sie dem Skript-Tag „defer“ hinzufügen oder den Skript-Tag in den Textkörper verschieben.

window.addEventListener('DOMContentLoaded', () => {

});

Zuerst speichern wir einen Verweis auf den DOM-Knoten. Wir verwenden document.querySelectorAll(). Wir möchten ein Array, aber diese Funktion gibt eine NodeList zurück, also müssen wir Array.from() verwenden. Wir erhalten auch Verweise auf die Spieleranzeige, die Reset-Taste und den Ansager.

const tiles = Array.from(document.querySelectorAll('.tile'));
const playerDisplay = document.querySelector('.display-player');
const resetButton = document.querySelector('#reset');
const Ansager = document.querySelector('.Ansager');

Als Nächstes fügen wir die globalen Variablen hinzu, die zur Steuerung des Spiels erforderlich sind. Wir initialisieren eine Platine mit einem Array aus neun leeren Zeichenfolgen. Dadurch werden die XabdO-Werte für jedes Plättchen auf dem Brett gespeichert. Wir werden einen currentPlayer haben, der die Flagge des Spielers hält, der im aktuellen Zug aktiv ist. Die Variable isGameActive bleibt wahr, bis jemand gewinnt oder das Spiel unentschieden endet. In diesen Fällen setzen wir es auf „False“, sodass die verbleibenden Kacheln bis zum Zurücksetzen inaktiv sind. Wir haben drei Konstanten, die den Endzustand des Spiels darstellen. Wir verwenden diese Konstanten, um Tippfehler zu vermeiden.

lass Brett = ['', '', '', '', '', '', '', '', '', ''];
lass currentPlayer = 'X';
Lassen Sie isGameActive = true;

const PLAYERX_WON = "PLAYERX_WON";
const PLAYERO_WON = "PLAYERO_WON";
const TIE = "KRAWATTE";

Im nächsten Schritt speichern wir alle Gewinnpositionen auf dem Brett. In jedem Unterarray speichern wir die Indizes der drei Positionen, an denen wir das Spiel gewinnen können. Dieses [0, 1, 2] stellt also den Fall dar, in dem die erste horizontale Linie vom Spieler besetzt ist. Wir werden dieses Array verwenden, um zu entscheiden, ob wir einen Gewinner haben.

/*
   Indizes innerhalb des Boards
   [0] [1] [2]
   [3] [4] [5]
   [6] [7] [8]
*/

const Gewinnbedingungen = [
   [0, 1, 2],
   [3, 4, 5],
   [6, 7, 8],
   [0, 3, 6],
   [1, 4, 7],
   [2, 5, 8],
   [0, 4, 8],
   [2, 4, 6]
];

Jetzt schreiben wir einige Hilfsfunktionen. In der Funktion isValidAction entscheiden wir, ob der Benutzer eine gültige Aktion ausführen möchte. Wenn der interne Text der Kachel XorO ist, geben wir „false“ zurück, da die Operation ungültig ist. Andernfalls ist die Kachel leer und die Operation gültig.

const isValidAction = (Kachel) => {
    wenn (tile.innerText === 'X' || tile.innerText === 'O'){
        gibt false zurück;
    }

    gibt true zurück;
};

Die nächste Nutzenfunktion wird sehr einfach sein. In dieser Funktion erhalten wir einen Index als Parameter und setzen das entsprechende Element im Board-Array auf das Symbol unseres aktuellen Spielers.

const updateBoard = (index) => {
   board[index] = aktuellerSpieler;
}

Wir werden eine kleine Funktion schreiben, um die Player-Änderungen zu handhaben. In dieser Funktion rufen wir zuerst den Wert von playerDisplay ab. Der Zeichenfolgenvorlagenliteral player${currentPlayer} wird je nach aktuellem Spieler entweder zu playerX oder playerO. Als Nächstes verwenden wir einen ternären Ausdruck, um den Wert des aktuellen Players zu ändern. Wenn es X ist, ist es O, andernfalls ist es X. Nachdem wir nun den Wert unseres Players geändert haben, müssen wir den inneren Text des PlayerDisplays aktualisieren und die neue Player-Klasse anwenden.

const changePlayer = () => {
    playerDisplay.classList.remove(`player${currentPlayer}`);
    aktuellerSpieler = aktuellerSpieler === 'X' ? 'O' : 'X';
    playerDisplay.innerText = aktuellerPlayer;
    playerDisplay.classList.add(`player${currentPlayer}`);
}

Jetzt schreiben wir die Ansagerfunktion, die das endgültige Spielergebnis bekannt gibt. Es empfängt den Endspieltyp und aktualisiert den inneren Text des Ansager-DOM-Knotens entsprechend dem Ergebnis. In der letzten Zeile müssen wir die versteckte Klasse entfernen, da der Ansager standardmäßig versteckt ist, bis das Spiel vorbei ist.

const announce = (Typ) => {
    Schalter(Typ){
       Fall PLAYERO_WON:
            announcer.innerHTML = 'Spieler <span class="playerO">O</span> hat gewonnen';
            brechen;
       Fall PLAYERX_WON:
            announcer.innerHTML = 'Spieler <span class="playerX">X</span> hat gewonnen';
            brechen;
       Fallgleichheit:
            Ansager.innerText = "Unentschieden";
        }
    Ansager.classList.remove('ausblenden');
};

Als nächstes werden wir einen der interessantesten Teile dieses Projekts schreiben – die Auswertung der Ergebnisse. Zuerst erstellen wir eine Variable „roundWon“ und initialisieren sie auf „false“. Wir durchlaufen dann das WinConditions-Array und überprüfen jede Gewinnbedingung auf dem Board. Beispielsweise überprüfen wir in der zweiten Iteration diese Werte: Board3, Board4, Board5.

Wir werden auch einige Optimierungen durchführen. Wenn eines der Felder leer ist, rufen wir „Weiter“ auf und springen zur nächsten Iteration, da Sie nicht gewinnen können, wenn Ihre Gewinnbedingung ein leeres Feld enthält. Wenn alle Felder gleich sind, haben wir einen Gewinner. Daher setzen wir „roundWon“ auf „true“ und brechen die For-Schleife ab, da jede weitere Iteration eine Verschwendung von Rechenleistung wäre.

Nach der Schleife prüfen wir den Wert der Variable „roundWon“. Wenn dieser Wert stimmt, erklären wir einen Gewinner und deaktivieren das Spiel. Wenn es keinen Gewinner gibt, prüfen wir, ob sich leere Plättchen auf dem Brett befinden. Wenn es keinen Gewinner gibt und keine leeren Plättchen vorhanden sind, erklären wir das Spiel als unentschieden.

Funktion handleResultValidation() {
  lass roundWon = false;
  für (lass i = 0; i <= 7; i++) {
    const Gewinnbedingung = Gewinnbedingungen[i];
    const a = Brett[Gewinnbedingung[0]];
    const b = Brett[Gewinnbedingung[1]];
    const c = Brett[Gewinnbedingung[2]];
    wenn (a === "" || b === "" || c === "") {
      weitermachen;
    }
    wenn (a === b und b === c) {
      Runde gewonnen = wahr;
      brechen;
    }
  }

  wenn (Runde gewonnen) {
    ankündigen(currentPlayer === "X" ? PLAYERX_WON : PLAYERO_WON);
    istGameActive = falsch;
    zurückkehren;
  }

  wenn (!board.includes("")) ankündigen(TIE);
}

Als nächstes kümmern wir uns um die Aktionen des Benutzers. Diese Funktion erhält eine Kachel und einen Index als Parameter. Wenn der Benutzer auf eine Kachel klickt, wird diese Funktion aufgerufen. Zuerst müssen wir prüfen, ob es sich um eine gültige Aktion handelt. Außerdem prüfen wir, ob das Spiel derzeit aktiv ist. Wenn beides zutrifft, aktualisieren wir den inneren Text des Tiles mit dem Symbol des aktuellen Spielers, fügen die entsprechende Klasse hinzu und aktualisieren das Board-Array. Nachdem nun alles aktualisiert ist, müssen wir prüfen, ob das Spiel vorbei ist. Dazu rufen wir handleResultValidation() auf. Abschließend müssen wir die Methode changePlayer aufrufen, um den Zug an den anderen Spieler weiterzugeben.

const userAction = (Kachel, Index) => {
  wenn (isValidAction(tile) und isGameActive) {
    tile.innerText = aktuellerPlayer;
    tile.classList.add(`Spieler${currentPlayer}`);
    updateBoard(index);
    handleResultValidation();
    Spieler ändern();
  }
};

Damit das Spiel richtig funktioniert, müssen wir den Kacheln Ereignis-Listener hinzufügen. Dies erreichen wir, indem wir eine Schleife durch das Array der Kacheln ausführen und für jede Kachel einen Ereignislistener hinzufügen. (Für eine bessere Leistung könnten wir einfach einen Ereignislistener zum Container hinzufügen und Ereignis-Bubbling verwenden, um Klicks auf die Kachel des übergeordneten Elements zu erfassen, aber ich denke, das ist für Anfänger leichter zu verstehen.)

tiles.forEach( (tile, index) => {
    tile.addEventListener('klicken', () => Benutzeraktion(Kachel, Index));
});

Wir vermissen nur eine Funktion: das Zurücksetzen des Spiels. Dazu schreiben wir eine ResetBoard-Funktion. In dieser Funktion legen wir fest, dass das Brett X aus neun leeren Zeichenfolgen besteht, aktivieren das Spiel, entfernen den Ansager und ändern den Spieler zurück (per Definition startet X immer).

Als Letztes müssen wir die Kacheln durchlaufen, den inneren Text wieder auf eine leere Zeichenfolge zurücksetzen und alle spielerspezifischen Klassen aus den Kacheln entfernen.

const resetBoard = () => {
    Brett = ['', '', '', '', '', '', '', '', '', ''];
    istGameActive = wahr;
    Ansager.classList.add('ausblenden');

    wenn (aktuellerSpieler === 'O') {
        Spieler ändern();
    }

    Kacheln.fürJedes(Kachel => {
        Kachel.innerText = '';
        tile.classList.remove('SpielerX');
        tile.classList.remove('SpielerO');
    });
}

Jetzt müssen wir diese Funktion nur noch als Klick-Eventhandler für den Reset-Button registrieren.

resetButton.addEventListener('klicken', resetBoard);

Das ist es, wir haben ein voll funktionsfähiges Tic Tac Toe-Spiel, das Sie mit Ihren Freunden spielen und Spaß haben können.

Oben finden Sie Einzelheiten zum Erstellen eines einfachen Tic-Tac-Toe-Spiels mit HTML+CSS+JavaScript. Weitere Informationen zu HTML+CSS+JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!