🎮Do Local ao Mundo Real: Como coloquei meu jogo WorldWar online🌐

🌌 CodeVerse2026 – Artigo #09

🧑💻 Fala Galera Dev! 👋

Nos últimos artigos eu venho mostrando toda a construção dos meus projetos, desde a ideia até a organização do código. Mas hoje a gente sobe mais um nível nessa jornada.

Agora não é mais só sobre criar… é sobre colocar no mundo real.

Nesse artigo eu quero compartilhar como peguei o jogo WorldWar e consegui deixar ele online, acessível para qualquer pessoa jogar e testar. Pode parecer simples, mas pra mim foi um baita desafio, porque até então eu só trabalhava com deploy mais direto, tipo GitHub Pages e Vercel. Ou seja… tudo muito focado em front-end.

E por isso resolvi me desafiar e colocar a cara a tapa, para colocar o site online. Nunca tinha feito e por isso vi o desafio e sempre aquela dúvida de será que eu sei colocar um site online?

🌐 O desafio: sair do local e ir pro mundo real

O WorldWar não é só um site estático. Ele tem backend em PHP, banco de dados, autenticação e sincronização entre jogadores. Na prática, isso muda tudo. Não dava simplesmente pra subir no GitHub Pages e esperar funcionar.

Eu precisava de um servidor de verdade, com suporte a PHP e banco de dados rodando online.

Foi aí que comecei a pesquisar opções gratuitas, porque a ideia aqui era aprender na prática, sem custo e sem medo de errar. E claro aprender com os erros que cometer, afinal nada melhor para o aprendizado do que colocar a mão na massa!

🧪 Escolhendo o servidor

Depois de algumas buscas, encontrei o InfinityFree. Ele oferece hospedagem gratuita com PHP e MySQL, o que já resolvia boa parte do problema.

Parecia perfeito… até começar a configurar 😅

Porque é aí que entra aquela parte que ninguém fala muito: subir projeto é uma coisa, fazer ele funcionar é outra completamente diferente.

🔧 Ajustando o projeto para rodar online

O projeto estava rodando no XAMPP, ou seja, tudo local. Banco local, caminhos locais, configurações locais. Quando levei isso pra internet, nada funcionou de primeira. Literalmente nada.

Tive que ajustar credenciais de banco, corrigir caminhos de arquivos, revisar rotas das APIs e adaptar tudo pro ambiente do servidor.

Foi aquele ciclo clássico: sobe, dá erro, corrige… sobe de novo. E repete. E sem exagero… subi o projeto umas 10 vezes até tudo começar a funcionar.

🛠️ Banco de dados: o verdadeiro teste de paciência

Se teve uma parte que realmente me travou foi o banco de dados. O script SQL simplesmente não rodou de primeira. Deu erro, quebrou estrutura, relacionamento não funcionava… foi uma sequência de problemas.

Tive que revisar tudo com calma, entender o erro, ajustar algumas partes usando o copilot, outras manualmente e testar até funcionar. Mas quando finalmente rodou… foi aquele momento de alívio.

🎮 Como funciona o jogo WorldWar

Antes de continuar, deixa eu te explicar rapidamente como o jogo funciona, porque isso ajuda a entender a complexidade dele.

O objetivo principal é simples: 👉 encontrar e destruir a carta de “Alto Comando” do adversário.

Cada jogador começa com um deck de 27 cartas, mas apenas 10 são sorteadas para a partida. Essas cartas precisam ser posicionadas estrategicamente antes do jogo começar.

Os cards têm níveis de 0 a 10, onde o maior vence o menor. Mas existem regras especiais que mudam completamente o jogo.

Se dois cards têm o mesmo nível, os dois são destruídos. A Granada elimina cartas de nível baixo, enquanto a Bomba Atômica praticamente destrói tudo. Já o Sniper perde para qualquer carta… mas é o único que consegue eliminar o Alto Comando.

Ou seja, não é só força. É estratégia, leitura de jogo e tomada de decisão.

🌐 Modo Online e sistema de pontuação

Uma das partes mais legais, e também uma das mais difíceis, foi implementar o modo online, onde você joga contra outra pessoa em tempo real. Aqui o jogo deixa de ser apenas lógica rodando na tela e vira uma experiência de verdade, porque tem outro jogador pensando, reagindo e tentando vencer você do outro lado.

E para isso funcionar, eu precisei criar um sistema que controla não só os movimentos dos cards, mas também o tempo, a pontuação, o ranking e alguns comportamentos importantes da partida. Por exemplo: no modo offline, se o jogador recarregar a página, os cards voltam para serem posicionados novamente no campo de batalha. Mas no modo online isso não poderia acontecer, porque quebraria totalmente a partida entre os dois jogadores.

Então precisei tratar esses cenários: recarregamento de página, mensagens de internet instável, erro de conexão e controle de abandono ou inatividade. Tudo isso foi necessário para o jogo não se perder quando algo inesperado acontecesse durante a partida.

Outra parte que deu bastante trabalho foi ajustar os timers. No modo online, cada jogador tem 10 segundos para fazer sua jogada. Se não jogar dentro desse tempo, o turno passa automaticamente para o adversário. Além disso, após os jogadores entrarem na partida, existe um tempo de 60 segundos para posicionar os cards no campo. Caso o jogador não posicione tudo a tempo, os cards são colocados automaticamente para a partida começar.

🧠 Como funciona o modo online

Quando você entra no modo online, o sistema tenta encontrar outro jogador disponível. Isso é o famoso matchmaking. Se tiver alguém online, vocês entram na partida automaticamente. Se não tiver, você fica aguardando até aparecer um adversário disponível.

A partir daí, o jogo começa normalmente, mas com um detalhe muito importante: tudo precisa estar sincronizado entre os dois jogadores. O posicionamento dos cards, os ataques, os movimentos, a troca de turnos, a pontuação e até os tempos precisam conversar entre si para que os dois vejam praticamente a mesma coisa na tela.

No resumo, o modo online funciona com dois controles principais de tempo: 60 segundos para posicionar os cards e 10 segundos para cada jogada. Parece simples olhando de fora, mas fazer isso funcionar sem quebrar a partida foi um dos maiores desafios desse projeto.

📊 Sistema de pontuação

Também implementei um sistema de pontuação online, pra dar mais sentido competitivo ao jogo. Funciona assim:

• Vitória → +5 pontos
• Derrota → +1 ponto
• Abandono → 0 pontos (e ainda conta como derrota)

Ou seja, até perder faz parte do progresso… mas abandonar não compensa.

🏆 Ranking online

Essa pontuação é usada para formar um ranking online, onde os jogadores acumulam pontos ao longo do tempo. Isso abre espaço para evoluções futuras, como competição entre jogadores, classificação e progressão dentro do jogo. Hoje ainda está simples, mas já é uma base muito boa.

⚠️ Regras importantes no modo online

Pra manter o jogo justo e funcional, implementei algumas regras extras:

• Se abandonar a partida → perde automaticamente
• O adversário ganha os pontos da vitória
• Partidas inativas por mais de 5 minutos são canceladas
• A pontuação é atualizada automaticamente no ranking

⚡ Multiplayer em tempo real: o maior desafio

Essa foi, sem dúvida, a parte mais difícil do projeto. Fazer com que o movimento de um jogador aparecesse para o outro em tempo quase real exigiu sincronização constante entre cliente, servidor e banco de dados. E quando a gente fala assim, parece simples… mas na prática foi uma verdadeira batalha. 😅

Várias vezes eu finalizava uma implementação, testava e tudo parecia funcionar. Aí, no outro dia, quando ia testar novamente, começavam os problemas: em uma tela o card se movimentava, na outra não; às vezes o card era selecionado, mas não saía do lugar; em outros momentos o turno simplesmente passava para o adversário sem a jogada acontecer de verdade.

Sem dúvida, essa foi a minha maior batalha no desenvolvimento do WorldWar. Porque não era apenas fazer uma ação funcionar localmente. Era garantir que os dois jogadores enxergassem o mesmo estado da partida, no tempo certo, sem quebrar a lógica do turno. Esse processo envolvia controle de turno, atualização de estado, sincronização das jogadas e comunicação contínua entre as partes do sistema. Depois de muitos testes, erros, ajustes e paciência… funcionou. Não ficou perfeito ainda, mas ficou funcional. E para mim, nesse estágio do projeto, isso já foi uma vitória gigante.

📱 Adaptar para mobile foi outro jogo dentro do jogo

Uma parte bem trabalhosa foi a adaptação para o mobile. E vou ser bem sincero: isso deu muito mais trabalho do que eu imaginava no começo.

O WorldWar foi pensado inicialmente para rodar no computador, com tela maior, visão lateral do campo de batalha e interação com mouse. No desktop, posicionar os cards era simples: você arrastava a carta e colocava no campo. Só que no celular a história muda completamente.

No mobile, principalmente usando o celular em modo retrato, arrastar cards não fica natural. Então precisei repensar a interação. Em vez de arrastar com o mouse, o jogador passou a tocar no card e depois tocar no local do campo onde deseja posicioná-lo. Só essa adaptação do modo offline levou praticamente um dia inteiro de desenvolvimento. Foi preciso ajustar layout, comportamento dos cards, tamanho dos elementos e a forma como o jogador interage com o jogo.

Quando terminei e testei tudo, achei que estava chegando ao fim. Mas aí veio a surpresa: o modo offline e o modo online tinham estruturas diferentes. Ou seja, o que eu tinha ajustado para o offline não funcionava automaticamente no online.

Resultado: voltei para o código novamente. 😅

No modo online, precisei recriar parte da estrutura, adaptar os botões, reorganizar o layout para telas menores e ainda aproveitei para criar um histórico de jogadas, ajudando o jogador a acompanhar melhor o que estava acontecendo na partida.

Depois de mais dois dias codando, testando, quebrando e corrigindo, os ajustes começaram a funcionar. E esse foi um baita aprendizado: quando a gente fala que um sistema é responsivo, não é só “diminuir a tela”. Muitas vezes é repensar toda a experiência de uso para aquele dispositivo. Mobile não é só adaptação visual. É adaptação de comportamento.

🎮 Ajustes finais antes de subir

Antes de colocar no ar, também fiz alguns ajustes importantes no jogo. Troquei imagens dos cards para evitar problemas com direitos autorais, revisei regras e validei o funcionamento geral. Também percebi que o carregamento de algumas imagens pode demorar um pouco, provavelmente por limitações do servidor gratuito. Mas no geral, o jogo está funcionando bem.

😅 Nem tudo é perfeito (e tá tudo certo)

Vou ser bem direto aqui. Essa foi a primeira vez que subi um projeto desse tipo online. Então sim, pode ter bug, pode ter falha e ainda tem muita coisa pra melhorar.

Além disso depois de tudo estar funcionando, e soltar o game para rodar na ultima segunda feira dia 27/04/2026, mostrando para um colega, vi que os novos cadastros estavam dando erro, e quando fui ver era uma variável que não tinha iniciado no código em um ultimo ajuste que fiz e por isso não permitia criar novos cadastros.

Esse bug foi gerado quando apliquei um controle no controle de acesso limitando a cinco tentativas de acesso, e quando a tentativa de erro de senha for feito por mais de cinco vezes, é bloqueada novas tentativas, protegendo o sistema de ataques de brute force.

Mas isso faz parte do processo. O importante não é estar perfeito… é estar funcionando e evoluindo, então se encontrar algum bug, pode me relatar aqui que vou tentar corrigir o mais rápido possível e deixar o jogo totalmente funcional e sem erros!

🎯 O maior ganho foi o aprendizado

Esse processo me ensinou muito mais do que só “subir um site”. Aprendi sobre ambiente de produção, configuração de servidor, banco real e problemas que só aparecem fora do ambiente local. Coisas que fazem muita diferença na vida real de um desenvolvedor.

🎮 Testa aí e me dá um feedback

Agora vem a melhor parte. 👉 O jogo está online. Acessa, testa, chama um amigo e joga uma partida. E se encontrar algum bug ou algo estranho… me fala. Porque é assim que o projeto evolui.

🚀 O que vem pela frente

Esse projeto abriu uma ideia maior na minha cabeça. 👉 a criação da plataforma CodeVerse.

A ideia é desenvolver uma plataforma para reforço de aprendizado de alfabetização com jogos educativos simples, voltados para crianças, ajudando no aprendizado de matemática, leitura e lógica. Tudo de forma leve, acessível e gratuito. Com ranking geral e entre a turma, acompanhamento e uso por professores para adicionarem exercícios personalizados. Mas calma… 👉 um passo de cada vez. Vou fazer isso até o final desse ano, se tudo der certo na minha programação.

🚀 Conclusão

Colocar um projeto online muda completamente a forma como você enxerga o desenvolvimento. Você sai do clássico “funciona na minha máquina” e entra no mundo real, onde tudo precisa funcionar de verdade, para pessoas reais.

E é exatamente nesse ponto que acontece a evolução de verdade como desenvolvedor. Porque não é mais só escrever código… é fazer um sistema rodar, se conectar com banco de dados, lidar com erros, ajustar comportamento e garantir que tudo funcione mesmo fora do seu ambiente controlado.

Durante esse processo, estou tendo uma experiência muito próxima do que é trabalhar em uma empresa tech. Colocar no ar, testar, receber feedback de usuários, identificar bugs tanto no código quanto no banco, e ir corrigindo aos poucos, melhorando o sistema a cada versão.

E isso ensina muito mais do que qualquer curso isolado. Porque aqui você não está só aprendendo… você está vivendo o desenvolvimento na prática.

🔥 Antes de começar um novo projeto… coloca o atual no ar e vê ele rodar no mundo real. 🚀

Se esse conteúdo te ajudou de alguma forma, peço que divulgue para algum colega ou amigo e se quiser me segue nas redes sociais onde sempre crio posts tech na prática!

• 🔗 Segue lá no GitHub: https://github.com/Carlos-CGS/CodeVerse2026
• 🔗 Segue lá no LinkedIn: https://www.linkedin.com/in/carlos-cgs/