Echtzeit-Gomoku-Spiel erstellen

Laden Sie die Dateien hoch, stellen Sie das Schema bereit und öffnen Sie zwei Browser. Ein Freund tritt dem in einem Browser erstellten Raum bei, und sobald ein Stein gesetzt wird, erscheint derselbe Zug auch auf dem anderen Bildschirm. Sieg, Niederlage und Rangliste zeichnet der Server automatisch auf.

Ein separates Frontend-Build-Tool ist nicht erforderlich. Spielen Sie zuerst mit dem fertigen Beispiel eine Partie und ändern Sie dann nacheinander Datenstruktur, Echtzeitfunktionen und Spielregeln.

1. Zuerst eine Partie spielen

Am schnellsten starten Sie mit dem vollständigen Beispiel als ZIP. Laden Sie Schema und Ansichtsdateien in denselben Ordner hoch und stellen Sie das Schema bereit. Danach können Sie sofort eine Partie eröffnen.

• Vollständiges Echtzeit-Gomoku-Beispiel als ZIP herunterladen: enthält Schema, index.html, style.css, app.js und README
• Gomoku-Schemadatei (.sfn) herunterladen: wenn Sie nur die Backend-Struktur ansehen oder eine selbst erstellte Ansicht anbinden möchten

Wenn Sie das Beispiel ausführen, sehen Sie Folgendes:

• Partie zweier Benutzer über einen Raumcode
• Anzeige des letzten Zugs, der eigenen Steine und des aktuellen Zugrechts
• Zeitlimit von 3 Minuten, das nach jedem Zug neu beginnt
• Live-Übertragung der Partie mit dem aktuellen Spielverlauf
• Anzeige von Sieg und Niederlage sowie automatische Aktualisierung der letzten Partien und der Spielerrangliste

Im Schema sind ein 19×19-Spielbrett, der Sieg mit fünf Steinen in einer Reihe und die Punkteregel 3 Punkte für Sieg, 1 Punkt für Unentschieden, 0 Punkte für Niederlage bereits hinterlegt. Jeder Benutzer kann bis zu 3 Warteräume erstellen; Warteräume ohne Teilnehmer werden nach 30 Minuten zur Bereinigung vorgemerkt.

Funktionen, die im Spiel zusammenwirken

Eine Gomoku-Partie enthält ganz selbstverständlich die wichtigsten Funktionen von Webspace.

Wichtig ist, dass der Browser weder den Sieg erklärt noch Punkte direkt schreibt. Der Server prüft das aktuelle Brett und das Zugrecht, speichert nur gültige Züge und sendet beiden Benutzern dasselbe Ergebnis.

2. In den Arbeitsbereich hochladen

Wenn Sie nur die Schemadatei heruntergeladen haben, laden Sie sie in einen Projektordner des Team- oder persönlichen Arbeitsbereichs hoch. Wenn Sie das vollständige ZIP heruntergeladen haben, legen Sie die fünf Dateien per Ordner-Upload oder Archiv-Upload in denselben Ordner.

gomoku-arena/
├── gomoku-realtime.sfn
├── index.html
├── style.css
├── app.js
└── README.md

Öffnen Sie die Schemadatei und prüfen Sie unter Datenbankstruktur die drei Tabellen.

Da Partien und Bilanzen getrennt gespeichert werden, lassen sich die letzten Aufzeichnungen und die Rangliste auch nach dem erneuten Öffnen der Ansicht wieder laden.

3. API und Echtzeitfunktionen prüfen

Öffnen Sie oben API-Erstellung und prüfen Sie die folgenden Punkte:

1. Der Datenbankname lautet gomoku.
2. Echtzeit-Socket steht auf Aktiviert.
3. Serverfunktion ist Rundenbasiertes Brettspiel (turn-based-board).
4. Die Berechtigungen Senden und Empfangen stehen auf Nur Mitglieder.
5. Die APIs zum Erstellen und Ändern sind für alle drei Tabellen deaktiviert.

Das Deaktivieren der Erstellungs- und Änderungs-APIs hat einen Grund: Teilnehmer sollen Siegzahlen oder Zugaufzeichnungen nicht direkt über die REST-API ändern können, und jede Änderung des Spielzustands soll den Ereignishandler des Servers durchlaufen.

4. Mit SQLite3 bereitstellen

Wählen Sie beim ersten Ausführen unter Speicher SQLite3. Da Sie weder eine Datenbankadresse noch ein Konto vorbereiten müssen, ist dies der einfachste Weg, das Beispiel auszuprobieren.

Prüfen Sie vor dem Klick auf Bereitstellen die angezeigten Änderungen und die Berechtigungszusammenfassung. Enthält eine Datenbank mit demselben Namen bereits Einträge, kann je nach Überschreibrichtlinie des Servers die Genehmigung eines Administrators oder Bereitstellungsverantwortlichen erforderlich sein.

Nach Abschluss der Bereitstellung stehen REST-API und WebSocket im folgenden Adressformat bereit.

GET /api/web/gomoku/gomoku_games/list
GET /api/web/gomoku/gomoku_players/list
WS  /api/web/gomoku/realtime-ws

Läuft der Produktionsserver über HTTPS, muss der Browser eine sichere wss://-Verbindung auf derselben Domain verwenden. Die Adresse sollte nicht fest auf eine bestimmte Entwicklungsdomain codiert, sondern aus dem Host der aktuellen Seite gebildet werden.

5. Gomoku-Ansicht öffnen

Die Schemadatei erstellt Datenbank und Backend des Spiels; index.html, style.css und app.js sind für Spielbrett und Benutzererlebnis zuständig. Durch diese Trennung können Sie die Ansicht neu gestalten und dabei die Partieaufzeichnungen behalten.

Wenn Sie das vollständige Beispiel hochgeladen haben, wählen Sie index.html und öffnen Sie die Vorschau. Wenn Sie nur die Schemadatei verwenden, binden Sie die obige REST-API und den WebSocket in Ihrem eigenen HTML an.

Der Client sendet Aktionen wie board-game.create, board-game.join und board-game.move über WebSocket. Steine und Punkte werden auf Grundlage der vom Server zurückgesendeten bestätigten Ereignisse angezeigt.

6. Zu zweit tatsächlich spielen

1. Öffnen Sie dieselbe index.html mit zwei verschiedenen Mitgliedskonten.
2. Klicken Sie im ersten Konto auf Neue Partie erstellen.
3. Übermitteln Sie den erzeugten Raumcode an das zweite Konto.
4. Geben Sie den Code im zweiten Konto ein und klicken Sie auf Beitreten.
5. Setzen Sie abwechselnd Steine und prüfen Sie, ob derselbe Zug auf beiden Bildschirmen erscheint.
6. Prüfen Sie nach fünf Steinen in einer Reihe, ob die Sieganzeige, die letzten Partien und die Rangliste aktualisiert werden.

Mit Browsern, deren Anmeldesitzungen getrennt sind, etwa ein normales und ein Inkognito-Fenster, lässt sich das bequem auf einem einzigen Computer testen.

Das Ergebnis zeichnet der Server auf

Sobald fünf Steine waagerecht, senkrecht oder diagonal in einer Reihe liegen, beendet der Server die Partie und speichert Sieger und Punkte. Auch wenn das Zeitlimit eines Zugs überschritten wird, entscheidet der Server anhand der Serverzeit über die Niederlage durch Zeitüberschreitung.

Wenn sich die letzten Partien und die Rangliste nicht sofort ändern, prüfen Sie statt erneutem Klicken, ob der Ablauf die Liste nach Empfang des WebSocket-Abschlussereignisses erneut abfragt. Wenn Sie in der Ansicht Entwicklerinformationen aufklappen, sehen Sie auch das gesendete und empfangene JSON sowie die Verarbeitungszeit des Servers.

Von hier aus ein eigenes Spiel erstellen

turn-based-board ist kein Handler, der an den Namen Gomoku gebunden ist. Ändern Sie in den Handler-Einstellungen der Schemadatei die folgenden Werte, um ihn als Ausgangspunkt für ein anderes rundenbasiertes Spiel zu verwenden.

Machen Sie daraus ein schnelles Spiel auf einem kleineren Brett oder passen Sie die Punkteregeln an eine Veranstaltung Ihrer Organisation an. Auf derselben Echtzeitbasis lassen sich auch eine Zuschaueransicht, Saisonranglisten und Teamduelle ergänzen.

Gomoku ist ein fertiges Beispiel und zugleich der Ausgangspunkt für neue Spiele. Zeigen Sie statt Steinen Monster und Gegenstände an, entsteht ein rundenbasierter Kampf; zeigen Sie statt Feldern Fragen und Antwortmöglichkeiten, entsteht ein Echtzeit-Quiz. Belassen Sie Daten und Regeln im Schema und geben Sie der Ansicht den Spielspaß, den Sie sich wünschen.

Bei Problemen

Zum Schluss

Im Gomoku-Beispiel wurden eine aus der Schemadatei erstellte Datenbank mit REST-API, eine auf angemeldete Mitglieder beschränkte Teilnahmeberechtigung und ein vom Server entschiedener Echtzeit-Spielzustand zu einem einzigen Dienst verbunden. Die anderen Tutorials behandeln ein mit KI erstelltes Geschäftssystem, eine Ressourcen-Pinnwand aus Ordnerdateien, einen gemeinsamen Monster-Raid und einen KI-Support-Chat. Kombinieren Sie je nach Bedarf einige davon, und Sie können die meisten internen und kundenorientierten Werkzeuge allein mit Webspace erstellen.

Als Nächstes ausprobieren

• APIs erstellen und Datenbank bereitstellen
• Leistung und Skalierung
• Dienste und Kapazität