tictactoe

Online-Mehrspieler-Tic-Tac-Toe

Videodemo:

Beschreibung: Diese Web-App soll das Online-„Papier“ für das klassische Tic Tac Toe-Papierspiel sein. Die App dient als Plattform, auf der das TTT-Spiel gespielt werden kann. Daneben steht auch eine grundlegende Chat-Funktion zur Verfügung, um die Kommunikation der Spieler zu erleichtern.

Makrospezifikation:

• Ein Online-„Spielbrett“ zum Spielen eines TTT-Spiels;
  • Die Spieler müssen in der Lage sein, miteinander zu kommunizieren.
• Die Web-App muss eine Funktion für mehrere Räume bieten.

d-_-b

Werkzeuge und Technologien:

Server-Client-Kommunikation basierend auf dem Socket.IO-Protokoll

Kundenseite * :	Serverseite:
HTML, CSS, JS (einschließlich SocketIO-Framework)	Python-Frameworks: Flask, Flask SocketIO

^* Front-End-Elemente des Tic Tac Toe-Bretts, inspiriert vom Web Dev Simplified Tic Tac Toe-Projekt – eine Seite mit 2-Spieler-Funktionalität

Spielspezifisch

• 2 Spieler ( x | o );
• Spieler mit 1. Zug => Ortsmarke ( x | o ):
• Bis (Sieg oder Unentschieden): Platzmarke Spieler 2 => Zug tauschen => Platzmarke 1. Spieler;

Implementierungslogik

---

Im Online-Multiplayer-Tic-Tac-Toe -Spiel wird die Verarbeitung der Züge, die Verbindung der Spieler, der Spieler-Chat und die Verwaltung der Spielräume vom Server bereitgestellt (in diesem Fall mit Hilfe von Flask, Flask SocketIO-Frameworks). Gemäß den Tic-Tac-Toe-Regeln gibt es in einem Spiel nur zwei Spieler. Das bedeutet, dass der Server prüfen muss, ob ein Spielraum vorhanden ist und ob bereits zwei Spieler vorhanden sind, bevor ein neuer Spieler angeschlossen wird.

Schritt 1 – Verbindung

• Zwei Clients verbinden sich mit dem Server.
  • Erstkontrolle: Vorhandensein des Raumes, Anzahl der Spieler;

Schritt 2 – Der Spieler wird informiert

• Der Kunde erhält Informationen über seine Spieler-ID, die zur Zuordnung der Spielerfigur (z. B. Kreuz oder Kreis) verwendet wird.

Schritt 3 – Spiel starten

• Der Server startet das Spiel und informiert die Spieler darüber, wer das Spiel beginnen wird, wenn die Spieler zugestimmt haben, das Spiel zu starten.
  • Im dritten Schritt spielen die beiden Spieler gegeneinander. Zuerst klickt der Spieler auf ein Feld und diese Informationen werden an den Server gesendet. Die Informationen über das ausgewählte Feld und den nächsten Spieler werden vom Server im Raum an die Clients gesendet. Dies wird wiederholt, bis ein Unentschieden endet oder ein Spieler das Spiel gewonnen hat.

app.py

Die Datei, in der der ganze Spaß beginnt ... Hier ist die Konfiguration der Flask- und Flask Socket IO-Frameworks. Nach der Konfiguration werden die Flask-Routen mit @app.route() und die Flask-SocketIO-Handler mit @socketio.event dekoriert . Am Ende der Datei befindet sich socketio.run(app, debug=True) das den Server startet. „Die Funktion socketio.run() kapselt den Start des Webservers und ersetzt den Standardstart des Flask-Entwicklungsservers app.run() .“ FlaschensockelIO

oophelpers.py

Es gibt die Modellierung von Player() und GameRoom() Objekten. Klassen definieren in sich selbst Verhalten und benötigte Attribute.

templates/

Im Grunde handelt es sich bei templates/index.html nur um eine HTML-Seite, die den Inhalt der Seite beschreibt – Brettspiel und Protokollbereich. Oben auf der Seite gibt es die „Begrüßungsansicht“ als modale Ansicht, die den Status ändert: display: show -> display: none , wenn das Serverereignis die Raumverfügbarkeit ausgibt.

static/styles/

Dort werden die CSS-Dateien verwendet, um die Ästhetik der Seite zu beschreiben.

static/scripts/

In der Datei main.js befinden sich die Skripte, die die Webapp-Interaktion ermöglichen. Die Datei beginnt mit den „ VARIABLE DECLARATIONS “ oben, anschließend wird in der anonymen Funktion addEventListener von joinButton die Funktion roomAvailability() mithilfe der Funktionen async und „ await überprüft. Sobald die Zimmerverfügbarkeit bestätigt ist, werden die userConnectedHandlers() aufgerufen. Die Chat- und Spielfunktion wird im gesamten EventListener bereitgestellt, der an die Schaltflächen sendButton , startGameButton und restartButton angehängt ist.

requirements.txt

Diese Datei schreibt lediglich die Abhängigkeitspakete für diese Web-App vor.

Webanwendung reproduzieren

Eine Möglichkeit, diese Anwendung auszuführen:

• Erstellen Sie eine virtuelle Python-Umgebung.

python -m venv [directory]

• Installieren Sie die Anforderungen in einer virtuellen Umgebung.

pip install -r requirements.txt

• Führen Sie python app.py oder flask run aus und besuchen Sie http://localhost:5000 in zwei separaten Browser-Registerkarten.

python app.py

oder

flask run

Containerisierung mit Docker

Erstellen Sie ein Image aus der Docker-Datei

docker build -t < img_name > .        

docker build -t flask-tictactoe .        

Führen Sie einen Container im Hintergrund aus und veröffentlichen Sie die Ports eines Containers auf dem Host

docker run -d -p < host_port > : < container_port > < image_name >    

docker run -d -p 80:5000 flask-tictactoe  

Greift im Browser auf den Container zu über: http://localhost oder http://127.0.0.1