Arena Clash
Arena shooter 2D multiplayer que roda no navegador (PC, Android, iPhone) sem instalação.
Phaser 3 + TypeScript + Vite (cliente) · Node.js + Colyseus + WebSocket (servidor autoritativo).
Rodar localmente
npm install
npm run build && npm start # http://localhost:2567 (cliente e servidor juntos)
# ou, em desenvolvimento:
npm run dev:server # terminal 1 (porta 2567)
npm run dev:client # terminal 2 (http://localhost:5173)
Para testar no celular na mesma rede Wi-Fi, abra http://IP-DO-PC:2567 (após npm run build && npm start).
Controles
| PC | Celular |
|---|
| WASD/setas: mover | Joystick esquerdo: mover |
| Mouse: mirar · clique: atirar | Joystick direito: mirar; empurrar = atirar |
| Espaço: dash · R: recarregar · Esc: menu | Botões DASH e ↻; ⚙ abre o menu |
Som e efeitos: botão 🔊 (ou tecla M) liga/desliga o som; ⚙ (ou Esc, também no menu inicial) abre as opções: volume, sons de tiro, de movimento, de combate, efeitos visuais, seta de mira e vibração. Tudo fica salvo no aparelho.
Toques são multitoque (mover e atirar ao mesmo tempo); rolagem, zoom por pinça e toque duplo são bloqueados; HUD respeita a área segura (notch).
Arquitetura
src/shared/sim.ts: regras, mapa e física (movimento/dash) usados pelo servidor e pela predição do cliente.src/server/ArenaRoom.ts: simulação a 30 Hz, tiros, dano, abates, respawn, fim/reinício de partida, reconexão (20 s), limite de taxa. O cliente só envia entradas; todo resultado é decidido no servidor, igual para PC e celular.src/client: Phaser (mundo), predição + reconciliação do jogador local, interpolação dos demais, HUD/controles em DOM, qualidade gráfica automática (reduz só efeitos, nunca regras).- Salas: nome + código opcional (vazio = partida rápida). Até 12 jogadores; 4 min ou 15 abates.
Publicar (link público com HTTPS/WSS)
O servidor serve o cliente e o WebSocket na mesma porta/origem, então basta hospedar o container:
- Suba esta pasta para um repositório GitHub.
- No Render (ou Fly.io, Railway, etc.) crie um serviço a partir do repositório usando o
Dockerfile (render.yaml incluso). O domínio recebe HTTPS e o cliente usa WSS automaticamente.
- Opcional: domínio próprio nas configurações do provedor.
Variáveis: PORT (padrão 2567), KILL_LIMIT (padrão 15).
Testes
npm run test:smoke (com o servidor rodando; use KILL_LIMIT=4 para ser rápido): 2 bots jogam, valida tiros, abates, fim/reinício e reconexão.
Checklist de teste em aparelhos reais (antes de divulgar)
Chrome e Edge (PC), Chrome (Android), Safari (iPhone): toque/multitoque, paisagem/retrato, tela cheia (não existe no iPhone; use "Adicionar à Tela de Início"), partida com PC + celular juntos, queda de Wi-Fi.
Créditos
Gatos: kit "Free Cartoon Cat Defense Game Asset Kit" (Craftpix.net, licença gratuita da Craftpix). As folhas de sprites em public/cats/ foram geradas a partir dele; a pasta original do kit não vai para o deploy (.dockerignore).
