Joguinho Joguinho Da Cobrinha

Como construir o clássico jogo da cobrinha do zero

A maioria das pessoas tenta aprender programando um clone do Snake sem planejar a grade primeiro. Isso funciona até você tentar fazer a cobra atravessar a si mesma e o jogo travar. O problema é que 90% dos tutoriais online pular essa etapa básica. Eu já passei por isso nos últimos seis meses tentando refazer o joguinho joguinho da cobrinha em JavaScript puro para um projeto interno. O jogo roda em uma grid bidimensional. Não em pixels livres. Cada célula tem coordenadas fixas (x, y) e a cobra ocupa múltiplas células. A cobra se move uma célula por vez. O alimento aparece em uma célula aleatória que não esteja ocupada pelo corpo. Comece declarando variáveis simples no topo do script:

var tileSize = 20;
var gridWidth = 25;
var gridHeight = 25; Isso cria um canvas de 500 por 500 pixels. Célula por célula. Sem complicação. O loop principal usa setInterval com 100ms. Isso dá 10 frames por segundo, que é a velocidade clássica. Se você colocar menos que 80ms, a cobra fica rápida demais para jogar de verdade. Mais que 150ms e o jogo perde o ritmo. 100ms é o ponto certo na minha experiência.

O movimento e a lógica de crescimento

A cobra é um array de objetos com propriedades x e y. A cabeça é o primeiro elemento. Em cada tick do loop, você adiciona uma nova posição na frente do array e remove o último elemento. Se a cobra comeu, não remove nada. O corpo cresce um bloco. Se comeu, cresce outro. O ponto onde a maioria esbarra é o wrap-around. Alguns jogos permitem que a cobra atravesse as bordas e apareça do outro lado. Outros colocam paredes. Para paredes, basta verificar se a nova posição da cabeça sai dos limites (x < 0, x >= gridWidth, etc) e encerrar o jogo se sim. Simples. Aqui vai algo que quase ninguém explica nos tutoriais: o problema do movimento oposto. Se a cobra está indo para a direita e você aperta seta para a esquerda instantaneamente, a cobra vira 180 graus e colide com o próprio pescoço. A solução é guardar a direção atual em uma variável e ignorar o input se ele for oposto à direção atual. Já bati a cabeça com isso várias vezes antes de perceber que era um bug de input buffering, não de lógica de colisão.

Gerar comida sem sobrepor a cobra

O algoritmo é: gerar coordenadas aleatórias dentro da grade e verificar se cada par (x, y) já existe no array do corpo. Se existir, gere outro par. Repita até encontrar uma posição livre. No meu caso, eu estava enfrentando um problema onde, com a cobra quase preenchendo toda a grade, o algoritmo de geração de comida podia ficar preso em loop infinito. A correção foi limitar as tentativas a 625 vezes (número total de células) e, se todas estivessem ocupadas, declarar vitória. Na prática, 625 iterações nunca acontecem — na maior parte das partidas, encontra-se um espaço vazio em menos de 5 tentativas.

Input handling básico

Ouça eventos de keydown. Mapeie as setas para mudanças de direção. Armazene a direção alvo e aplique no próximo tick, não instantaneamente. Isso evita que dois inputs rápidos sejam processados no mesmo frame e causem colisão consigo mesma. Coloquei esse detalhe há semanas e desde então o jogo não trava mais com inputs consecutivos. Versões prontas e gratuitas existem em diversos repositórios open-source. No GitHub, procure por "snake game javascript" — há centenas de clones funcionais. Uma versão bem feita e leve está em github.com/RameelRazzak/Snake-Game, que inclui pontuação, velocidade progressiva e design responsivo. Há também a opção clássica do Google: basta digitar "snake game" na barra de busca e o jogo embutido aparece. Se você usar setInterval para o loop, o jogo não sincroniza com o refresh rate do monitor. Em telas de 60Hz, a cobra pode parecer travar ocasionalmente porque o render e o update estão dessincronizados. A solução profissional seria usar requestAnimationFrame e um timer interno, mas isso dobra a complexidade inicial. Para um projeto rápido ou estudo, setInterval resolve.

Outro problema comum: salvar o high score no localStorage. Se o usuário limpa os dados do navegador, o recorde desaparece. Não há como evitar isso, então trate o score como opcional. Não construa mecânicas críticas em cima dele. Se o objetivo é algo mais robusto do que um exercício de programação, considere frameworks como Phaser ou Godot. Eles resolvem automaticamente sincronia de frame, colisão mais precisa e exportação para múltiplas plataformas. O preço é curva de aprendizado maior e um arquivo final mais pesado.