Introdução

Fizemos o Brasil TD, um Tower Defense 4v4 inspirado no Legion TD do Warcraft 3, que roda no navegador. Aqui está uma análise aprofundada do que funcionou e o que ainda está em desenvolvimento.

Pitch: Como eu fiz um tower defense 4v4 no navegador: simulação compartilhada, binário no websocket e deploy blue/green

Estrutura do Projeto

O projeto é um monorepo TypeScript com três pacotes: client (Preact + three.js + Vite), server (Node, http + ws, SQLite) e shared (a simulação do jogo). O cliente é uma PWA instalável no celular. O three.js é carregado sob demanda para evitar custos.

Simulação Compartilhada

A simulação é mantida num pacote só para garantir determinismo. No modo online, o servidor é a autoridade: o cliente envia comandos e o servidor valida e executa. No modo contra bot, a mesma simulação roda localmente num worker do navegador.

Comunicação WebSocket

Usamos WebSocket puro com ws. Comandos são enviados como JSON e as posições das unidades são enviadas em snapshots binários compactos, filtrados pelas lanes que aquele cliente está vendo.

Deploy Blue/Green

Para evitar derrubar conexões, usamos um deploy blue/green numa máquina só. O container novo sobe num slot livre, o Caddy detecta que está saudável e passa a mandar as conexões novas para ele. O container antigo recebe um sinal, termina as partidas em andamento, avisa os clientes ociosos para recarregar e se desliga quando ninguém está jogando. Se o novo não ficar saudável, ele é removido e a versão anterior continua no ar.

Conclusão

O Brasil TD é um Tower Defense 4v4 no navegador que mantém a simulação num pacote só para garantir determinismo. O deploy blue/green sem derrubar conexões é uma solução eficiente. O próximo passo é coletar mais dados de partidas reais para melhorar o balanceamento da economia (renda vs. defesa). O foco é o desktop; no celular, a experiência de toque ainda é a parte mais nova.

CompartilhadaDefenseNavegadorTowerWebsocket