Como montar e jogar um jogo de adivinhar desenhos online
Eu montei esse sistema pra pessoal da minha casa usar quando não tinha muito o que fazer. Basicamente é um servidor web simples onde uma pessoa desenha e os outros tentam adivinhar o que é. O nome técnico que as pessoas usam hoje em dia é joguinho de adivinhar o desenho. Tem várias variações pela internet, mas a lógica por trás é sempre a mesma. Vou explicar como funciona na prática, não a versão de wikificação. A base é um canvas HTML5 com JavaScript puro. O jogador que desenha tem um quadro branco, escolhe uma palavra e começa rabiscar. Quem tá assistindo digita o que acha que é no campo de texto. Quando alguma resposta bate com a palavra secreta, todos recebem uma notificação e a rodada muda. Simples assim. A parte que a maioria subestima é o realtime: como fazer tudo isso funcionar sem um framework pesado.
joguinho de adivinhar o desenho
Eu uso Socket.IO pro realtime. Cada cliente conecta ao servidor e entra numa sala com um ID. O host define a palavra, o canvas dele transmite os eventos de draw (coordenadas X, Y, cor, tamanho do pincel) pra todos os outros jogadores da sala. O segredo é enviar só os deltas, não o canvas inteiro. Se você mandar a imagem completa a cada frame, vai travar com dois jogadores. Eu enviei um evento por cada movimento do mouse, com coordenadas normalizadas de 0 a 1000, e o client desenha as linhas localmente. Isso reduziu o tráfego de rede de uns 400KB por segundo pra algo em torno de 12KB. Um problema que eu tive num dia específico foi com a latência. Tava rodando num VPS barato na Europa, mas a maioria dos jogadores tava no Nordeste do Brasil. A resposta ao entrar na sala levava 800ms, o que fazia o desenho parecer engasgado. A solução foi fazer o client desenhar antecipadamente enquanto a confirmação do servidor vinha. Basicamente, o jogador host envia os pontos pra todos e recebe um ACK. Enquanto isso não chega, o client continua desenhando. Quando o ACK volta, ele sincroniza o estado se tiver havido alguma divergência. Funciona bem pra 5 a 10 jogadores. Com mais que isso, a coisa começa a desandar.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Outra coisa que ninguém fala sobre isso: o sistema de pontuação. Eu tentei no começo dar pontos pra quem adivinhou mais rápido. Aí percebi que os jogadores que chegavam tarde à rodada simplesmente fiquavam pra trás e desistiam. Mudei pra pontuação fixa por acerto, independente do tempo, e bônus pro primeiro a acertar. Aí sim a curva de retenção melhorou. Também adicionei um timer de 60 segundos por rodada. Se ninguém acertar, a palavra é revelada e o desenho passa pra outra pessoa. Sem timer, uma rodada pode durar 10 minutos se o grupo for lento, e todo mundo fica entediado. Para hospedar isso de graça, eu recomendo o Render ou o Fly.io. O Render tem um tier gratuito que aguenta uns 100 conexões simultâneas sem pagar nada. Mas cuidado com o sleep do primeiro request — a primeira pessoa que abrir a sala demora uns 30 segundos pra carregar porque o container acorda. Se vocês forem muitos de uma vez, isso vira um problema. Nesse caso, pague o mínimo no Render (uns 7 dólares por mês) ou use o Railway.
Se você não quer programar nada do zero, existem alternativas prontas. O Gartic Phone é bom mas limitado em número de jogadores. O Skribbl.io é clássico mas tem anúncios chatos. O Quick, Draw! do Google é mais pra experimento solo. Se o objetivo é jogar com amigos privados, montar o seu próprio servidor vale a pena. Leva uns 3 a 4 horas pro começo, dependendo do seu nível de JavaScript. O que eu não recomendo: tentar usar WebRTC direto sem um servidor signaling. A ideia parece boa — conexão ponto a ponto sem server intermediário —, mas na prática você vai precisar de pelo menos um servidor pra negociar os SDP offers e answers. E aí você já tem um servidor. Pode pular essa etapa e ir direto pro Socket.IO mesmo. Eu gastei dois dias tentando fazer WebRTC funcionar e depois voltei pro Socket.IO porque era mais simples e confiável.
Resumo prático: use Socket.IO, envie deltas normalizados, implemente previsão no client, limite o timer, e hospede num plano pago se tiver mais de 5 jogadores simultâneos. Se quiser o código, posso indicar repositórios open source que já fazem isso, mas cada um tem suas limitações e costumam precisar de ajustes pro seu caso específico.
