tictactoe

Tres en raya multijugador en línea

Demostración en vídeo:

Descripción: Esta aplicación web pretende ser el "papel" en línea para el clásico juego de papel Tic Tac Toe. La aplicación sirve como plataforma que permite jugar al juego TTT, junto con la cual también se proporciona una función de chat básica para facilitar la comunicación de los jugadores.

Especificación de macros:

• Un “tablero de juego” en línea para jugar un juego TTT;
  • Los jugadores deben poder comunicarse entre sí;
• La aplicación web debe proporcionar la función de varias habitaciones.

d-_-b

Herramientas y tecnologías:

Comunicación servidor-cliente basada en el protocolo Socket.IO

Lado del cliente * :	Lado del servidor:
HTML, CSS, JS (incluido el marco SocketIO)	Marcos de Python: Flask, Flask SocketIO

^* Elementos frontales del tablero Tic Tac Toe inspirados en el proyecto Web Dev Simplified Tic Tac Toe: funcionalidad para 2 jugadores en un lado

Específico del juego

• 2 jugadores ( x | o );
• jugador con el primer movimiento => marca de lugar ( x | o ):
• Hasta (ganar o empatar): marca de lugar del jugador 2 => intercambiar turno => marca de lugar del primer jugador;

Lógica de implementación

---

En el juego Tic-Tac-Toe multijugador en línea , el servidor proporciona el procesamiento de los movimientos, el manejo de la conexión de los jugadores, el chat de los jugadores y la administración de las salas de juego (en este caso con la ayuda de los marcos Flask, Flask SocketIO). Según las reglas del tres en raya, solo hay dos jugadores en un juego. Esto significa que el servidor tiene que comprobar la existencia de la sala de juego y si ya hay dos jugadores antes de conectar uno nuevo.

Paso 1 - Conexión

• Dos clientes se conectan al servidor.
  • Control inicial: existencia de la sala, número de jugadores;

Paso 2: se informa al jugador

• El cliente recibe información sobre su identificación de jugador utilizada para mapear la figura del jugador (por ejemplo, cruz o círculo).

Paso 3 - iniciar el juego

• El servidor inicia el partido e informa a los jugadores sobre quién comenzará el partido cuando los jugadores hayan aceptado comenzar el juego.
  • En el tercer paso, los dos jugadores juegan entre sí. Primero, el jugador hará clic en un campo y esa información se envía al servidor. La información sobre el campo seleccionado y el siguiente jugador es enviada a los clientes por el servidor de la sala. Esto se repetirá hasta que empate o un jugador gane el juego.

app.py

El archivo donde comienza toda la diversión... Aquí está la configuración de los marcos Flask y Flask Socket IO. Una vez configuradas, las rutas de Flask se decoran con @app.route() y los controladores Flask SocketIO se decoran con @socketio.event . En la parte inferior del archivo, está socketio.run(app, debug=True) que iniciará el servidor. "La función socketio.run() encapsula el inicio del servidor web y reemplaza el inicio del servidor de desarrollo Flask estándar app.run() ". Matraz SocketIO

oophelpers.py

Está el modelado de objetos Player() y GameRoom() . Dentro de sí mismas, las clases definen el comportamiento y los atributos necesarios.

templates/

Básicamente, templates/index.html es solo una página HTML que describe el contenido de la página: juego de mesa y área de registros. En la parte superior de la página hay una "Vista de saludos" como una vista modal que cambiará el estado: display: show -> display: none cuando el evento del servidor emite la disponibilidad de la sala.

static/styles/

Ahí es donde están los archivos CSS que se utilizan para describir la estética de la página.

static/scripts/

En el archivo main.js se encuentran los scripts que hacen posible la interacción con la aplicación web. El archivo comienza con las " DECLARACIONES VARIABLES " en la parte superior, luego en la función anónima addEventListener de joinButton se verifica roomAvailability() mediante las funciones async y await . Una vez confirmada la disponibilidad de la habitación, se llama a userConnectedHandlers() . La función de chat y juego se proporciona en EventListener adjunto a los botones sendButton , startGameButton y restartButton .

requirements.txt

Ese archivo simplemente prescribe los paquetes de dependencias para esta aplicación web.

Reproducir aplicación web

Una forma de ejecutar esta aplicación:

• crear un entorno virtual Python;

python -m venv [directory]

• instalar los requisitos en el entorno virtual;

pip install -r requirements.txt

• Ejecute python app.py o flask run y visite http://localhost:5000 en dos pestañas separadas del navegador.

python app.py

o

flask run

Contenedorización usando Docker

Construya una imagen a partir del Dockerfile

docker build -t < img_name > .        

docker build -t flask-tictactoe .        

Ejecute un contenedor en segundo plano y publique los puertos de un contenedor en el host

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

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

Acceda al contenedor en el navegador usando: http://localhost o http://127.0.0.1