Tic Tac Toe Teil 0: Vergleich von Svelte und React
Tic Tac Toe Teil 1: Svelte und Canvas 2D
Tic Tac Toe Teil 2: Staatenloses Rückgängigmachen / Wiederherstellen
Tic Tac Toe, Teil 3: Rückgängig / Wiederherstellen mit Befehlsspeicher
Tic Tac Toe Teil 4: Interaktion mit dem Flask Backend über HTTP
In diesem Teil diskutieren wir die Implementierung des Tic Tac Toe-Spiels unter Verwendung des Befehlsmusters, wobei Rückgängig / Wiederherstellen-Teams anstelle einzelner Status gespeichert werden und zufälliger Zugriff auf jeden Schritt des Spielverlaufs erfolgt.
Code starten
Der vorherige Teil des Artikels endete mit dem folgenden Code: REPL-Code .
Wir kommentieren den gesamten Code aus, der bei Änderungen zu Fehlern führt. Wir füllen alle Zellen des Spielfeldes mit Einheiten: Code auf REPL
Staatsspeicher
RELP-Code
Statusspeicher hinzugefügt. Das Spielfeld zeigt jetzt den Inhalt des Status- Repositorys an. Standardmäßig war das Spielfeld mit Zweien gefüllt. Statusausgabe in der App- Komponente hinzugefügt.
Befehlsklasse
RELP-Code
Wir haben die Command- Klasse zur Datei helpers.js hinzugefügt. Die History- Klasse wurde geändert, um Befehle anstelle von Status zu speichern.
Hier konnte ich die korrekte Statusaktualisierung nicht durchführen. Wenn jemand weiß, sag es mir bitte. Und ist es im Allgemeinen möglich, den Statusspeicher auf diese Weise zu verwenden?
Übersetzung verschieben
RELP-Code
Das Klicken auf eine bereits gefüllte Zelle wurde verboten. Der Konstruktor der Command- Klasse hat eine Übersetzung der Verschiebung durchgeführt. Statusausgabe korrigiert.
Zustand des Spielfeldes
RELP-Code
In den vorherigen Phasen gab es Zweifel an der korrekten Verwendung des separaten Statusspeichers, sodass dieser entfernt und der Speicher des Status des Spielfelds in die Verlaufsklasse übertragen wurde - das Statusfeld wurde hinzugefügt.
Direktzugriff
RELP-Code
Ausgabe einer Liste von Schritten hinzugefügt. Der zufällige Zugriff auf einen beliebigen Schritt des Spiels erfolgt durch sequentielle Ausführung der Befehle "Rückgängig" oder "Wiederherstellen" für das ausgewählte Team.
Gewinnerermittlung
RELP-Code
Gewinnerermittlung abgeschlossen. Statusspeicher hinzugefügt, um den Status anzuzeigen.
Fazit
Das Speichern des Verlaufs von Zügen mithilfe von Status ist bequemer, aber im Speicher teuer, da bei jedem Schritt eine Duplizierung des gesamten Status des Spiels durchgeführt wird. Bei Anwendungen mit einer großen Modellgröße ist es besser, die Speicherung von Befehlen im Verlauf zu verwenden.
GitHub-Repository
https://github.com/nomhoi/tic-tac-toe-part3
Installieren des Spiels auf dem lokalen Computer:
git clone https://github.com/nomhoi/tic-tac-toe-part3.git cd tic-tac-toe-part3 npm install npm run dev
Wir starten das Spiel in einem Browser unter der Adresse: http: // localhost: 5000 / .