Nokia Snake Game
Uma recriação nostálgica do clássico jogo Snake do Nokia 3310, construído com React e HTML5 Canvas. Jogue diretamente no seu navegador.
Lembra do Nokia 3310? O celular que sobrevivia a qualquer coisa. Antes dos smartphones, antes das touchscreens, existia o Snake.
Eu reconstruí do zero. Mesmas regras simples. Mesma jogabilidade viciante. Agora no seu navegador.
Jogue
O Original
O Snake apareceu pela primeira vez nos celulares Nokia em 1998. As regras eram simples: controle uma linha crescente, coma pontos, não bata nas paredes ou em si mesmo. Sem tutoriais. Sem compras no aplicativo. Apenas gameplay puro.
A versão do Nokia 3310 se tornou lendária. Foi embarcada em mais de 100 milhões de dispositivos e apresentou uma geração inteira aos jogos mobile. A tela LCD cinza, os pixels grossos, o bip satisfatório quando você comia um ponto — isso definiu os jogos portáteis por anos.
Construindo a Recriação
Renderização com Canvas
O jogo usa HTML5 Canvas para controle pixel-perfect. Cada frame:
- Limpa a tela com o fundo do tema (claro:
#fafafa, escuro:#171717) - Desenha uma grade sutil para orientação visual
- Renderiza a cobra como uma série de retângulos preenchidos
- Desenha a comida como um pequeno círculo colorido
A cabeça da cobra é ligeiramente maior que os segmentos do corpo, facilitando o acompanhamento da sua direção.
Arquitetura do Game Loop
O jogo roda em um loop baseado em setTimeout ao invés de requestAnimationFrame. Isso dá controle preciso sobre a velocidade — a cobra se move em intervalos fixos, assim como o original.
Game Loop:
1. Processa mudança de direção enfileirada
2. Calcula nova posição da cabeça
3. Verifica colisões (paredes, si mesmo)
4. Trata colisão com comida → crescer + acelerar
5. Atualiza posições da cobra
6. Renderiza frame
7. Agenda próximo tick
A velocidade começa em 150ms por movimento e diminui 5ms cada vez que você come, até um mínimo de 50ms. Isso cria a curva de dificuldade gradual que tornou o original tão viciante.
Controles
Desktop:
- Setas ou WASD para movimento
- Espaço para pausar/continuar
Mobile:
- Botões direcionais na tela
- Botões circulares em layout D-pad amigáveis ao toque
O sistema de controle previne giros de 180° (você não pode inverter a direção imediatamente), combinando com o comportamento do jogo original.
Gerenciamento de Estado
O jogo usa React refs para estado crítico de performance (posição da cobra, direção, comida) e React state para elementos de UI (pontuação, estado do jogo). Essa abordagem híbrida mantém o game loop rápido enquanto permite que o React trate re-renderizações para o display de pontuação e overlays.
As pontuações máximas persistem no localStorage, sobrevivendo a atualizações do navegador.
Decisões de Design
Design Adaptativo ao Tema
O jogo se adapta ao esquema de cores do seu sistema com uma paleta minimalista e moderna:
Modo claro:
- Fundo:
#fafafa(off-white) - Cobra:
#171717(quase preto) - Comida:
#3b82f6(azul)
Modo escuro:
- Fundo:
#171717(quase preto) - Cobra:
#fafafa(off-white) - Comida:
#60a5fa(azul claro)
A moldura do celular usa cantos arredondados e sombra para evocar o plástico dos celulares clássicos.
Tamanho da Grade
O Nokia 3310 original tinha um display de 84×48 pixels. Escolhi uma grade 20×20 com células de 12px, que:
- Se encaixa bem em telas modernas
- Fornece desafio suficiente sem ser frustrante
- Escala bem em dispositivos móveis
Sem Som
Intencionalmente deixei de fora os efeitos sonoros. O original tinha bips simples, mas áudio pode ser intrusivo em websites. O feedback visual é claro o suficiente — você vê a cobra crescer quando ela come.
O Que Aprendi
Canvas é poderoso. Para jogos com gráficos simples, Canvas fornece tudo que você precisa sem a complexidade do WebGL ou engines de jogos.
Refs superam state para game loops. React state dispara re-renderizações. Em um game loop rodando 10+ vezes por segundo, isso é muito lento. Refs dão valores mutáveis sem o custo de renderização.
Controles mobile precisam de design cuidadoso. Alvos de toque devem ser grandes o suficiente para acertar com confiança. O layout D-pad parece natural porque combina com controles físicos de jogos.
Ideias Futuras
- Adicionar recursos clássicos do Snake II (obstáculos, itens bônus)
- Implementar multiplayer usando WebSockets
- Adicionar efeitos sonoros com toggle de mudo
- Criar diferentes presets de dificuldade
- Adicionar um leaderboard usando um serviço backend
Por enquanto, aproveite essa viagem no tempo. Qual pontuação você consegue?
Outcomes
- •Design minimalista com suporte a modo claro e escuro
- •Game loop suave com dificuldade progressiva
- •Controles amigáveis para dispositivos móveis
- •Persistência de pontuação máxima usando localStorage
- •Design responsivo que funciona em todos os tamanhos de tela