tictactoe

Jogo da velha multijogador online

Demonstração em vídeo:

Descrição: Este aplicativo da web pretende ser o "papel" on-line do clássico jogo de papel Tic Tac Toe. O aplicativo serve como plataforma que permite jogar o jogo TTT, ao lado do qual é fornecido também um recurso básico de chat para facilitar a comunicação dos jogadores.

Especificação macro:

• Um “tabuleiro de jogo” online para jogar um jogo TTT;
  • Os jogadores devem ser capazes de comunicar entre si;
• O Web App deve fornecer o recurso de várias salas.

d-_-b

Ferramentas e tecnologias:

Comunicação Servidor Cliente baseada no protocolo Socket.IO

Lado do cliente * :	Lado do servidor:
HTML, CSS, JS (incluindo estrutura SocketIO)	Estruturas Python: Flask, Flask SocketIO

^* elementos front-end do tabuleiro Tic Tac Toe inspirados no projeto Web Dev Simplified Tic Tac Toe - funcionalidade de um lado para 2 jogadores

Específico do jogo

• 2 jogadores ( x | o );
• jogador com 1º lance => marca de posição ( x | o ):
• Até (vitória ou empate): marca do 2º jogador => turno de troca => marca do 1º jogador;

Lógica de implementação

---

No jogo Multiplayer Tic-Tac-Toe Online , o processamento dos movimentos, o gerenciamento da conexão dos jogadores, o bate-papo dos jogadores e o gerenciamento das salas de jogo são fornecidos pelo servidor (neste caso com a ajuda dos frameworks Flask, Flask SocketIO). De acordo com as regras do jogo da velha, existem apenas dois jogadores em um jogo. Isto significa que o servidor deve verificar a existência de sala de jogo e se já existem dois jogadores antes de conectar uma nova.

Passo 1 - Conexão

• Dois clientes se conectam ao servidor.
  • Verificação inicial: existência da sala, número de jogadores;

Passo 2 - O jogador é informado

• O cliente recebe informações sobre seu ID de jogador usado para mapear a figura do jogador (por exemplo, cruz ou círculo).

Etapa 3 - iniciar o jogo

• O servidor inicia a partida e informa aos jogadores quem iniciará a partida quando os jogadores concordarem em iniciar o jogo.
  • Na terceira etapa, os dois jogadores jogam um contra o outro. Primeiro, o jogador clica em um campo e essa informação é enviada ao servidor. As informações sobre o campo selecionado e o próximo jogador são enviadas aos clientes pelo servidor da sala. Isso será repetido até empate ou um jogador vencer o jogo.

app.py

O arquivo onde toda a diversão começa... Aqui está a configuração dos frameworks Flask e Flask Socket IO. Uma vez configuradas, as rotas Flask são decoradas com @app.route() e os manipuladores Flask SocketIO são decorados com @socketio.event . Na parte inferior do arquivo, há socketio.run(app, debug=True) que iniciará o servidor. "A função socketio.run() encapsula a inicialização do servidor web e substitui a inicialização do servidor de desenvolvimento Flask padrão app.run() ." Soquete de frasco IO

oophelpers.py

Existe a modelagem dos objetos Player() e GameRoom() . Dentro de si, as classes definem o comportamento e os atributos necessários.

templates/

Basicamente, o templates/index.html é apenas uma página HTML que descreve o conteúdo da página - jogo de tabuleiro e área de logs. No topo da página há a "Visualização de saudações" como uma visualização modal que irá alterar o estado: display: show -> display: none quando o evento do servidor emitir a disponibilidade da sala.

static/styles/

É onde estão os arquivos CSS usados ​​para descrever a estética da página.

static/scripts/

No arquivo main.js estão os scripts que tornam possível a interação com o webapp. O arquivo começa com " VARIABLE DECLARATIONS " no topo, depois na função anônima addEventListener do joinButton é verificado o roomAvailability() por meio das funções async & await . Assim que a disponibilidade da sala for confirmada, os userConnectedHandlers() são chamados. As funções de bate-papo e jogo são fornecidas em todo o EventListener anexado aos botões sendButton , startGameButton e restartButton .

requirements.txt

Esse arquivo simplesmente prescreve os pacotes de dependências para este aplicativo web.

Reproduzir aplicativo da web

Uma maneira de executar este aplicativo:

• crie um ambiente virtual Python;

python -m venv [directory]

• instalar os requisitos em ambiente virtual;

pip install -r requirements.txt

• execute python app.py ou flask run e visite http://localhost:5000 em duas guias separadas do navegador.

python app.py

ou

flask run

Conteinerização usando docker

Construa uma imagem a partir do Dockerfile

docker build -t < img_name > .        

docker build -t flask-tictactoe .        

Execute um contêiner em segundo plano e publique as portas de um contêiner no host

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

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

Acesse o container no navegador usando: http://localhost ou http://127.0.0.1