Mafia on Go, Vanila JS e WebSocket'ah



Será sobre a implementação na web do popular jogo de cartas " Mafia ". Foi escrito por diversão e experiência no desenvolvimento de jogos. A primeira versão foi escrita em duas semanas de tempo livre do trabalho e, ao mesmo tempo, foi reescrita para a segunda versão. A vantagem deste jogo é a ausência de um host.

Com base nos objetivos de desenvolvimento, decidi pela implementação / não implementação de recursos.
O que exatamente precisava ser feito:

  • Jogo mínimo que repete as regras do jogo clássico
  • Voz de comandos do líder em dispositivos clientes
  • Continuação do jogo, mesmo após reiniciar a guia do navegador

O que não foi planejado ou pode ser adiado:

  • Registro do Jogo
  • Interface de administração
  • Armazenamento permanente de dados de jogos em um banco de dados
  • Sincronização de tempo entre dispositivos

Backend


https://github.com/mrsuh/mafia-backend
Escrito em Go. Ele armazena o estado do jogo e é responsável por sua lógica.

Durante o jogo, você pode entrar em contato com o servidor para descobrir todas as informações:

curl 'http://127.0.0.1:8000/info?game=23' | python -m json.tool 

Exibição de informações do jogo
{
"event": "greet_mafia",
"event_status": 2,
"id": 23,
"is_over": false,
"iter": 1,
"players": [
{
"addr": "172.18.0.1:51438",
"createdAt": "2018-09-23T14:39:29.631475779Z",
"id": 33309,
"name": "Anton",
"role": 4
},
{
"addr": "172.18.0.1:51440",
"createdAt": "2018-09-23T14:39:32.867080927Z",
"id": 5457,
"name": "username:0",
"role": 2
},
{
"addr": "172.18.0.1:51442",
"createdAt": "2018-09-23T14:39:32.882463945Z",
"id": 14214,
"name": "username:2",
"role": 1
},
{
"addr": "172.18.0.1:51444",
"createdAt": "2018-09-23T14:39:32.895209072Z",
"id": 63759,
"name": "username:1",
"role": 3
}
],
"win": 0
}


Ou descubra o status do servidor:

 curl 'http://127.0.0.1:8000/health' | python -m json.tool 

Exibir informações de status do servidor
{
"runtime.MemStats.Alloc": 764752,
"runtime.MemStats.NumGC": 0,
"runtime.MemStats.Sys": 4165632,
"runtime.MemStats.TotalAlloc": 764752,
"runtime.NumGoroutine": 14
}


Para determinar se o jogador ainda está ativo, o back-end envia um batimento cardíaco. Se um jogador não responder após um certo intervalo, ele será eliminado do jogo. Ao mesmo tempo, se um jogador se reconectar antes do final do intervalo (a rede desapareceu), ele poderá continuar o jogo.

Para operação estável, o back-end foi coberto por testes de unidade com a biblioteca Go padrão, onde os principais cenários de operação são verificados.

 go test mafia-backend/src -cover ok mafia-backend/src 1.315s coverage: 70.7% of statements 

Frontend


https://github.com/mrsuh/mafia-frontend
É escrito em JS puro e construído usando o Grunt .
Não possui nenhuma lógica.

Quando um evento ocorre com o back-end, ele renderiza a página desejada, exibe os dados que foram enviados a ele e reproduz o som do novo evento.

O Frontend armazena os IDs do jogo e do jogador no LocalStorage ou na string de consulta do navegador (se você precisar executar várias guias em um navegador para diferentes jogadores). A completa falta de lógica, bem como o armazenamento dos parâmetros básicos do jogo, tornam possível, mesmo após o recarregamento da página, restaurar o estado do jogo.

O navegador proíbe a reprodução automática de sons sem a intervenção do usuário (por exemplo, pressionando um botão). Para reproduzir sons para cada evento que acompanha o back-end, apenas 1 objeto JavaScript Audio foi criado. Cada jogador deve pressionar um botão para iniciar o jogo e, nesse momento, o objeto Áudio se torna ativo (disponível para reprodução) e, posteriormente, ele pode alterar o parâmetro src para reproduzir sons diferentes sem a intervenção do usuário.

Além disso, para testar o jogo, foi escrito um "bot" que pode ser usado sozinho.
Basta abrir a guia do navegador, onde os parâmetros indicam que você deseja executar o teste

 http://127.0.0.1?master=1&test=1&sound=0&testUsersCount=5 

e permita a abertura de novas guias do JavaScript para este domínio.
Após o início do jogo, mais 5 abas com os jogadores abrirão e eles começarão a jogar entre si.

Protocolo de interação


O protocolo WebSocket foi escolhido devido à necessidade de constante troca bidirecional de dados entre o back-end e o front-end e seu suporte nos dois idiomas.

Eventos do jogo


O jogo inteiro é dividido em eventos:

Eventos
  • jogo
    • criar
    • juntar
    • iniciar
    • sobre
    • reconectar

  • dia
    • iniciar

  • noite
    • iniciar

  • cumprimento dos cidadãos
    • iniciar
    • função
    • fim

  • cumprimento da máfia
    • iniciar
    • jogadores
    • fim

  • tribunal
    • iniciar
    • jogadores
    • fim

  • mafia
    • iniciar
    • jogadores
    • fim

  • médico
    • iniciar
    • jogadores
    • fim

  • moça
    • iniciar
    • jogadores
    • fim

  • sherif
    • iniciar
    • jogadores
    • fim



Os eventos têm começo, fim e conteúdo.
No início e no final do evento, uma notificação é enviada a todos os jogadores ativos, que devem ser confirmados. O jogo continua somente após a confirmação deste evento por todos os jogadores ativos (por exemplo, somente após a reprodução do arquivo de som).

Docker


O jogo inteiro pode ser aumentado usando o Docker :
docker-compose.yml

 version: '3' services: mafia-frontend: image: mrsuh/mafia-frontend:latest container_name: mafia_frontend ports: - 9080:80 mafia-backend: image: mrsuh/mafia-backend:latest container_name: mafia_backend ports: - 8000:8000 

Basta instalar o Docker (se você ainda não o fez), copiar o texto docker-compose.yml e executar o comando:

 docker-compose up 

Depois disso, você pode abrir a guia do jogo no navegador:

 http://127.0.0.1:9080 

Conclusão


Aqui você pode ver qual foi o resultado (a velocidade de reprodução aumentou em 1,5 vezes).


Depois de quase um mês de desenvolvimento no meu tempo livre, consegui um jogo bastante estável que você pode jogar com os amigos. O jogo suporta recargas de página ou interrupções temporárias na rede. A dublagem de eventos nos dispositivos funciona, embora sem sincronização de tempo. O desenvolvimento do jogo não está planejado.

PS: Obrigado a Lera pela dublagem do jogo.

Source: https://habr.com/ru/post/pt423821/


All Articles