tictactoe

Tic-Tac-Toe multijoueur en ligne

Démo vidéo :

Description : Cette application Web est destinée à être le « papier » en ligne du jeu de papier classique Tic Tac Toe. L'application sert de plate-forme permettant de jouer au jeu TTT, à côté de laquelle est également fournie une fonction de chat de base afin de faciliter la communication entre les joueurs.

Spécification des macros :

• Un « plateau de jeu » en ligne pour jouer à un jeu TTT ;
  • Les joueurs doivent pouvoir communiquer entre eux ;
• L'application Web doit fournir une fonctionnalité multi-pièces.

d-_-b

Outils et technologies :

Communication Serveur Client basée sur le protocole Socket.IO

Côté client * :	Côté serveur :
HTML, CSS, JS (y compris le framework SocketIO)	Frameworks Python : Flask, Flask SocketIO

^* Éléments front-end du tableau Tic Tac Toe inspirés du projet Web Dev Simplified Tic Tac Toe - fonctionnalité un côté pour 2 joueurs

Spécifique au jeu

• 2 joueurs ( x | o );
• joueur avec 1er coup => repère ( x | o ) :
• Jusqu'à (victoire ou match nul) : place du joueur 2 => échange de tour => place du 1er joueur ;

Logique de mise en œuvre

---

Dans le jeu multijoueur en ligne Tic-Tac-Toe , le traitement des mouvements, la gestion de la connexion des joueurs, le chat des joueurs et la gestion des salles de jeux sont assurés par le serveur (dans ce cas à l'aide des frameworks Flask, Flask SocketIO). Selon les règles du tic tac toe, il n’y a que deux joueurs dans une partie. Cela signifie que le serveur doit vérifier l'existence d'une salle de jeux et s'il y a déjà deux joueurs avant d'en connecter un nouveau.

Étape 1 - Connexion

• Deux clients se connectent au serveur.
  • Vérification initiale : existence de la salle, nombre de joueurs ;

Étape 2 - Le joueur est informé

• Le client reçoit des informations sur son identifiant de joueur utilisées pour cartographier la figure du joueur (par exemple, croix ou cercle).

Étape 3 - démarrer le jeu

• Le serveur démarre le match et informe les joueurs de qui commencera le match lorsque les joueurs auront accepté de commencer la partie.
  • Dans la troisième étape, les deux joueurs s’affrontent. Tout d'abord, le joueur cliquera sur un champ et ces informations seront envoyées au serveur. Les informations sur le terrain sélectionné et le prochain joueur sont envoyées aux clients par le serveur présent dans la salle. Cela sera répété jusqu'à ce qu'il y ait match nul ou qu'un joueur remporte la partie.

app.py

Le fichier où tout commence pour s'amuser... Voici la configuration des frameworks Flask et Flask Socket IO. Une fois configurées, les routes Flask sont décorées avec @app.route() et les gestionnaires Flask SocketIO sont décorés avec @socketio.event . Au bas du fichier, il y a socketio.run(app, debug=True) qui démarrera le serveur. "La fonction socketio.run() encapsule le démarrage du serveur Web et remplace le démarrage du serveur de développement Flask standard app.run() ." Flacon SocketIO

oophelpers.py

Il y a la modélisation des objets Player() et GameRoom() . En elles-mêmes, les classes définissent le comportement et les attributs nécessaires.

templates/

Fondamentalement, le templates/index.html est juste une page HTML qui décrit le contenu de la page - zone de jeu de société et de journaux. En haut de la page, il y a la "Vue Salutations" en tant que vue modale qui changera l'état : display: show -> display: none lorsque l'événement du serveur émet la disponibilité de la salle.

static/styles/

C'est là que se trouvent les fichiers CSS utilisés pour décrire l'esthétique de la page.

static/scripts/

Dans le fichier main.js se trouvent les scripts qui rendent possible l'interaction avec l'application Web. Le fichier commence par les " DÉCLARATIONS VARIABLES " en haut, puis sur la fonction anonyme addEventListener de joinButton la roomAvailability() est vérifiée au moyen des fonctions async et await . Une fois la disponibilité de la salle confirmée, les userConnectedHandlers() sont appelés. Les fonctions de chat et de jeu sont fournies dans l'ensemble du EventListener attaché aux boutons sendButton , startGameButton et restartButton .

requirements.txt

Ce fichier prescrit simplement les packages de dépendances pour cette application Web.

Reproduire une application Web

Une façon d'exécuter cette application :

• créer un environnement virtuel Python ;

python -m venv [directory]

• installer les exigences dans un environnement virtuel ;

pip install -r requirements.txt

• exécutez python app.py ou flask run et visitez http://localhost:5000 dans deux onglets de navigateur distincts.

python app.py

ou

flask run

Conteneurisation à l'aide de Docker

Créer une image à partir du Dockerfile

docker build -t < img_name > .        

docker build -t flask-tictactoe .        

Exécuter un conteneur en arrière-plan et publier le(s) port(s) d'un conteneur sur l'hôte

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

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

Accédez au conteneur dans le navigateur en utilisant : http://localhost ou http://127.0.0.1