So erstellen Sie Tic-Tac-Toe in Ihr HTML5 Spiel

Dieses Spiel scheint wie eine ziemlich einfache Ergänzung zu Ihrem HTML5-Spiel, aber es kann überraschend schwierig sein, gut zu implementieren. Es gibt drei Hauptaspekte zu Tic-Tac-Toe, die Sie benötigen: die visuelle und Datenschnittstelle, einen Gewinner zu bestimmen und den Aufbau eines AI.

Erstellen Sie das Spielbrett

Der beste Weg, um die Benutzeroberfläche zu verwalten, ist eine vereinfachte kachelbasierten Mechanismus zu bauen. Der Schlüssel für die Tic-Tac-Toe-Spiel ist ein besonderes Sprite ein genannt Zelle. Jede Zelle stellt einen Platz auf der Platine. Es verfügt über drei Zustände (X, O, und leer). Ein Klick auf die Zelle ändert den internen Zustand und (natürlich) die visuelle Darstellung des Staates.

Die Zelle Objekt ist einfach eine Unterklasse der Sprite:

Funktionszelle () {TCELL = new Sprite (Spiel "blank.png", 100, 100) -tCell.setSpeed ​​(0) -tCell.state = BLANK-tCell.images = new Array ( "blank.png", " X.png "," O.png ") - tCell.checkClick = function () {if (this.isClicked ()) {if (this.state == BLANK) {this.state = currentPlayer-this.setImage (dies .images [currentPlayer]) - // die playerif ändern (currentPlayer == X) {currentPlayer = O} else {currentPlayer = X} // end if} // end if} // end if} // end checkClickreturn tCell-} // end Zelle

Hier ist, wie die Zelle Code funktioniert:

1. Ein ... kreieren currentPlayer Variable.

   Diese Variable enthält den Wert der aktuellen Spieler entspricht. Der aktuelle Spieler Variable wird zwischen X und O drehen

2. Weisen Sie Konstanten für die Staaten.

   Die drei Zustände sind ganzzahlige Konstanten.

3. Erstellen Sie ein Array von Bildern.

   Zuweisen Bilder, die zu den verschiedenen Zuständen entsprechen.

4. Ein ... kreieren checkClick () Verfahren.

   Diese Methode wird den Zustand der Zelle entsprechend ändern. Es wird auch die Änderung currentPlayer Variable so dass der nächste Klick für den anderen Spieler registrieren.

5. Erstellen Sie eine Anordnung von Zellen.

   Sobald eine einzelne Zelle tut, was Sie wollen, können Sie eine Reihe von ihnen bauen.

Wie stellt man das visuelle Layout up

Die Anordnung der Zellen auf dem Bildschirm ist interessant. Es kann natürlich erscheinen zwei-dimensionales Array für die Tic-Tac-Toe-Board zu verwenden, aber die verschachtelte Schleifenstruktur kann auf einer so kleinen Datenstruktur, und Behandeln des Board als 2D-Array umständlich bietet nicht viele Vorteile. Stattdessen betrachten dies als ein eindimensionales Array zu bauen.

Die Zellen werden wie folgt angeordnet:

0 1 23 4 56 7 8

Versuchen Sie vor allem die Werte im Bild Division durch 3. Sie werden einige interessante Muster zu sehen. Jeder Wert in der ersten Zeile (0, 1, und 2) ergeben Null (und etwas Rest), wenn sie von 3. Jedes Element in der zweiten Reihe geteilt (3, 4 und 5) gibt 1 Rest etwas, und jedes Element des dritte Reihe erzeugt eine 2 Rest etwas.

Wenn Sie eine dieser Zahlen durch 3 teilen und das Ergebnis in eine ganze Zahl konvertieren, werden Sie die Zeilennummer erhalten. In javascript können Sie diese Codezeile verwenden:

R. = parseInt (i / 3) -

Es gibt ein weiteres interessantes Muster, wenn man sich den Resten suchen. Alle Zahlen in der ersten Spalte (0, 3 und 6) gleichmäßig durch 3 teilbar ist, das heißt, sie alle Reste von 0. Die Zahlen in der nächsten Spalte (1, 4 und 7) einen Rest von 1 haben, und die letzte Spalte erzeugt einen Rest von 2. der Rest der Division durch 3 wird die Spaltennummer geben.

In javascript die Modul Operator (%) Wird den Rest einer ganzzahligen Division produzieren, so können Sie die Spaltennummer mit einer ähnlichen Formel erhalten:

col = i% 3

Der Code für die Zellen zu schaffen verwendet diese Formeln die Zeilen- und Spaltennummer für jede Zelle zu extrahieren und platziert dann die Zelle auf dem Bildschirm durch diese Werte von der Zellenbreite multipliziert wird und das Hinzufügen von einem Offset.

 Funktion buildCells () {Zellen = new Array (9) -xOffset = 100-yOffset = 100-for (i = 0-i lt; cells.length- i ++) {Zellen [i] = neue Zelle () - Zeile = parseInt (i / 3) -col = i% 3-xPos = (col * 100) + xOffset-yPos = (Zeile * 100) + yOffset-Zellen [i] .setPosition (xPos, yPos) -} // end for-Schleife} // end buildCells

Wie wird das Spiel für eine Gewinnkombination zu überprüfen

Der Computer versteht nicht, das Konzept der drei in einer Reihe, und es muss gelehrt werden.

Werfen Sie einen Blick auf das folgende Codefragment:

 winningCombos = new Array (new Array (0, 1, 2), new Array (3, 4, 5), new Array (6, 7, 8), new Array (0, 3, 6), new Array (1, 4, 7), new Array (2, 5, 8), new Array (0, 4, 8), new Array (2, 4, 6)) - 

Der Code setzt einfach auf ein zweidimensionales Array. Dieses Array ist eine Liste aller Gewinnkombinationen. Wenn der gleiche Spieler steuert Zellen 0, 1 und 2 hat der Spieler das Spiel gewonnen. Jede Zeile steht für eine andere Gewinnkombination.

Es wird dann einfach für einen Gewinner zu überprüfen:

 Funktion checkWins () {Sieger = 0für (Combo = 0- Combo lt; winningCombos.length- Combo ++) {a = winningCombos [Combo] [0] -b = winningCombos [Combo] [1] -c = winningCombos [Combo] [2] -Wenn (Zellen [a] .state == Zellen [b .state]) {if (Zellen [b] .state == Zellen [c] .state) {if (Zellen [a] .state! = BLANK) {Sieger = Zellen [a] .state-} // end if } // end if} // end if} // end forreturn Gewinner-} // end checkWins

Wie eine KI hinzufügen

Die häufigste Art von künstlicher Intelligenz für diese Art von Problem wird genannt Heuristik Algorithmus. Es ist ein Trick, dass der Computer mit einer guten Lösung, schnell zu kommen können, während nicht eine perfekte Lösung zu gewährleisten.

Die allgemeine Strategie ist es, eine Reihe von Zell Rankings zu erstellen:

 cellRank = new Array (3,2,3,3,4,3,3,2,3) -

Der Rang jeder Zelle gibt die Anzahl Gewinnkombinationen, die durch sie gehen, also Zelle 4 (die mittlere Zelle) ist die wertvollste Zelle zu Beginn des Spiels.

Wie das Spiel geht, reevaluates der Computer das Gitter nach folgenden vereinfachend Berechnungen:

1. Wenn eine Zelle nicht leeren ist, degradieren sie.

   Die einzigen Zellen, die Sie sollten prüfen, sind diejenigen, die leer sind, so dass, wenn eine Zelle bereits vergeben ist, subtrahieren 99 von seiner Zelle Ranking.

2. Suchen Sie nach teilweise fertiggestellten Gewinnkombinationen.

   Schritt für Schritt durch jede Gewinnkombination. Wenn zwei Zellen, die den gleichen Wert haben, aber die dritte ist leer, um einen Wert zu dem dritten hinzuzufügen.

3. Hier finden Sie die höchste Zelle.

   Nachdem man durch alle Kombinationen, eine Schleife durch die Zelle Rankings zu sehen, welche die höchste Zelle Ranking ist.