2
carubbi
2 min de leitura ·

Transformei um tutorial de Snake do YouTube em um jogo multiplayer online

Fala, pessoal!

Todo mundo já viu aqueles vídeos "coding ASMR" no YouTube — sem falar nada, só teclado e código rolando na tela. Pois bem: assistindo ASMR Programming – Coding a Snake Game – No Talking, do canal Code Fiction, onde o autor constrói um Snake clássico em JavaScript puro com canvas, me veio aquela coceira clássica de dev: "e se mais de uma pessoa jogasse isso ao mesmo tempo?"

Então fiz o fork do projeto original e implementei o que eu tinha em mente: a versão multiplayer.

O resultado

🎮 Jogue aqui: https://carubbi-snake.azurewebsites.net/
💻 Código: https://github.com/rcarubbi/ytb_snake_js

O que tem no jogo

  • Multiplayer online com até 8 cobras na mesma arena — cada jogador entra pelo navegador, sem instalar nada
  • Multiplayer local para até 4 pessoas no mesmo teclado (aquela bagunça boa de WASD vs. setas)
  • Múltiplas salas com página de browse pra criar/entrar nas partidas dos amigos
  • Bombas caindo no mapa pra apimentar a partida
  • Controles por teclado e swipe no celular

Stack

O jogo original era um game.js único rodando no browser. Para transformar isso em multiplayer fiz uma reestruturação:

  • Backend: Express 5 + Socket.IO escritos em TypeScript. O servidor é autoritativo: ele roda o loop do jogo (classe Game portada do JS original) e faz broadcast do estado das cobras, maçãs e bombas para todos da sala.
  • Frontend: reescrevi o cliente em Next.js (App Router) + Tailwind CSS com tema dark "gamer". Em produção o cliente é estaticamente exportado e servido pelo próprio processo do backend — um único container sobe tudo.
  • Deploy: GitHub Actions → Azure Web App, com Docker para rodar local.

Lições do caminho

Algumas coisas que aprendi no processo, caso alguém esteja pensando em fazer algo parecido:

  1. Servidor autoritativo muda tudo — no single-player a lógica vive no cliente; no multiplayer precisei portar toda a simulação pro servidor e o cliente virou só renderizador + input.
  2. Sincronizar estado é mais barato que sincronizar eventos nessa escala (salas pequenas, tick fixo).
  3. O Socket.IO resolveu reconexão e fallback de transporte sem eu sofrer.

Créditos

Todo o mérito da ideia base vai pro canal Code Fiction e ao vídeo original — recomendo assistir, é muito satisfatório ver o jogo sendo construído do zero: https://youtu.be/J42SZXS-_Qo

O projeto é open source (MIT), então fiquem à vontade pra dar uma olhada, abrir issue, sugerir ideia ou mandar PR. Sugestões de features também são bem-vindas nos comentários — já tenho algumas ideias na manga (power-ups? ranking?).

Valeu! 🐍

Carregando publicação patrocinada...