Como fazer um jogo da minhoca que come frutas do jeito certo
Vou direto ao ponto porque já vi muita gente perder tempo tentando adaptar frameworks inteiros pra um jogo que pode rodar num canvas de 400x400 pixels. O jogo da minhoca que come frutas é basicamente uma snake clássica. Você controla um bicho que se move numa grade, come frutas e cresce. O objetivo é bater seu recorde sem bater na própria cauda ou nas paredes. Simples.
A base técnica do jogo da minhoca que come frutas
Você vai precisar de um HTML com um elemento canvas, um arquivo JavaScript e um pouco de CSS pra centralizar tudo na tela. Aqui está o esqueleto que funciona: <canvas id="game" width="400" height="400"></canvas>
O canvas é onde tudo acontece. O JavaScript vai desenhar a minhoca quadradinho por quadradinho, detectar colisão com frutas e processar as teclas que o jogador aperta. Nada complicadinho.
O loop principal do jogo
O coração do jogo da minhoca que come frutas é um setInterval que dispara a cada 150 milissegundos. Esse timer controla a velocidade da minhoca. Se quiser deixar mais rápido conforme a fruta é comida, você reduz o intervalo progressivamente. Dentro de cada tick do loop, três coisas acontecem na ordem: você atualiza a posição da minhoca com base na direção atual, verifica colisões, e desenha tudo na tela. A ordem importa. Se você desenhar antes de atualizar a posição, a minhoca vai aparecer uma casa pra trás visualmente e isso quebra a ilusão de movimento suave.
Representando a minhoca
A minhoca é um array de coordenadas. Cada elemento é um objeto com {x, y}. A cabeça é o último item do array. Quando a minhoca se move, você adiciona uma nova cabeça na direção atual e remove a cauda. Isso dá a impressão de movimento sem precisar mover todo o corpo pixel a pixel. Por exemplo, se a minhoca está indo pra direita e a cabeça tá em (10, 5), a nova cabeça será (11, 5). Você empurra isso no array e retira o último elemento.
Geração de frutas
Quando a minhoca come uma fruta, ela não deve aparecer em cima de nenhum segmento do corpo. A lógica errada é simplesmente gerar coordenadas aleatórias e torcer. O jeito certo é manter um array de posições ocupadas e gerar até encontrar uma posição livre. Em jogos mais longos, quando a minhoca ocupa 80% do tabuleiro, esse processo pode travar um pouco se não for implementado com uma lista de posições livres pré-calculada. Eu tive esse problema numa versão pra Android que estava fazendo. O jogo travava em 3 segundos quando a minhoca ficava muito grande porque o gerador de frutas ficava num loop infinito tentando encontrar espaço livre. A solução foi manter um array booleano do tamanho do tabuleiro e atualizá-lo a cada movimento. Foi de 3 segundos de freeze pra 0 milliseconds. Mudança radical com poucas linhas de código.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Detecção de colisão
Existem dois tipos de colisão que você precisa verificar. A primeira é com as paredes. Se o tabuleiro tem 400 pixels e cada quadrado da minhoca tem 20 pixels, você tem 20 colunas e 20 linhas. Se a cabeça chegar a x menor que 0 ou maior que 19, o jogo acabou. A segunda é com o próprio corpo. Basta verificar se a nova posição da cabeça já existe em algum outro elemento do array do corpo. Um detalhe que muita gente esquece: se a minhoca tem sentido horário ou anti-horário forçado, você pode impedir que o jogador gire 180 graus instantaneamente. Se ela está indo pra direita e o jogador aperta esquerda, nada acontece. Sem essa validação, a minhoca pode bater no próprio pescoço no primeiro frame e o jogador vai reclamar que o jogo é injusto.
Controles
Você escuta o evento keydown no documento e mapeia as setas ou WASD. Cada tecla define a direção da minhoca. A validação de direção oposta que mencionei acima entra aqui também. Armazene a direção atual como uma string ou número e só atualize se não for o oposto da direção atual. Se quiser adicionar suporte a toque pra jogar no celular, você captura o ponto inicial do toque, o ponto final, calcula a diferença e decide a direção baseada em qual eixo teve mais movimento. Toque à esquerda significa ir pra esquerda, toque pra baixo significa ir pra baixo. Isso é padrão em jogos mobile desde 2012.
Pontuação e persistência
Cada fruta comida vale 10 pontos. Você armazena a pontuação numa variável simples e exibe no canto da tela. Se quiser salvar o recorde, use localStorage. É rápido, funciona sem servidor e resolve o problema pra a maioria dos projetos caseiros. Só não esqueça de capturar o erro caso o usuário tenha os cookies desativados ou esteja em modo anônimo em alguns navegadores mais restritivos.
Performance e otimizações
Um jogo da minhoca que come frutas não precisa de otimização complexa, mas tem um detalhe importante: o redesenho completo do canvas a cada frame. Se você tem 200 segmentos na minhoca e redesenha tudo a cada 150ms, está desenhando 200 quadrados 6,6 vezes por segundo. Isso dá cerca de 1.300 desenhos por segundo. Num dispositivo moderno isso não é nada, mas em um celular de entrada antigo pode causar queda de FPS perceptível. A solução é usar requestAnimationFrame em vez de setInterval e limitar a taxa de atualização. Uma abordagem comum é disparar a lógica do jogo apenas quando o delta de tempo ultrapassa o intervalo desejado. Isso mantém o jogo responsivo e evita cálculos desnecessários.
Estrutura de arquivos
Organize assim: index.html, style.css e game.js. Mantém tudo separado e fácil de manter. Se quiser distribuir o jogo, você pode zipar esses três arquivos e subir em qualquer hospedagem estática. Funciona no GitHub Pages, Netlify, Vercel. Qualquer um desses serviços entrega o jogo em segundos sem configuração de servidor. Se quiser transformar em app nativo depois, Use Capacitor ou Cordova. Eles empacotam o HTML/JS/CSS num container Android ou iOS. O jogo roda como WebView e funciona como app nativo. Não é a melhor experiência de performance possível, mas é rápido pra prototipar e testar.
Erros comuns
O erro mais frequente que vejo é tentar usar imagens PNG pra cada segmento da minhoca. Isso vai funcionar no começo, mas quando o jogo cresce e a minhoca tem 150 pedaços, o browser vai carreg 150 imagens pra renderizar a cada frame. Use cores sólidas no canvas. É mais rápido, é mais simples, e ninguém vai notar a diferença numa telinha de 400x400. Outro erro é não normalizar a velocidade. Se você usa setInterval com valores diferentes dependendo do dispositivo ou do estado da aba, o jogo pode ficar mais rápido ou mais lento dependendo de quantas abas o navegador está gerenciando. A abordagem com requestAnimationFrame e cálculo de delta time resolve isso de forma consistente.
Download e distribuição
O código completo pode ser baixado em repositórios públicos como o GitHub. Procure por repositórios com o nome snake game em JavaScript. Existem centenas de implementações gratuitas. A maioria são bons pontos de partida. Baixe, abra no VS Code, rode com live server e brinque com o código até entender cada linha. É assim que se aprende. Se quiser algo pronto pra rodar agora, existem sites como itch.io com dezenas de versões do jogo da minhoca que come frutas. Alguns têm modos extras como frutas especiais, obstáculos, power-ups. Vale a pena dar uma olhada pra ver diferentes abordagens de implementação.
