Criar um tabuleiro jogo da velha funcional parece simples, mas tem detalhes que todo mundo erra na primeira vez.
A maioria das pessoas que tenta montar um jogo da velha na web cai nos mesmos problemas. O layout quebra em telas pequenas, a detecção de vitória não funciona direito, e o código vira uma bagunça de conditional statements. Já passei por isso diversas vezes, então vou explicar do jeito que funciona na prática.
Como montar o tabuleiro jogo da velha do jeito certo
O primeiro passo é pensar na estrutura de dados. Não use uma lista simples de nove posições sem organização. Use um array bidimensional ou um array unidimensional de tamanho 9 onde cada índice corresponde a uma célula. A convenção padrão é: 0 1 2
3 4 5
6 7 8
Isso facilita muito a lógica de verificação de vitória. As combinações vencedoras são fixas: linhas (0-1-2, 3-4-5, 6-7-8), colunas (0-3-6, 1-4-7, 2-5-8) e diagonais (0-4-8, 2-4-6). São exatamente oito combinações. Depois de ter essa lista mapeada, a verificação vira um loop simples. Um problema que eu encontrei recentemente envolve responsividade. A solução mais barata é usar CSS Grid com três colunas iguais e um container com aspect-ratio de 1/1. Isso mantém o tabuleiro sempre quadrado sem depender de JavaScript para recalcular dimensões. O único problema é que em navegadores muito antigos o aspect-ratio não funciona, mas isso já é preocupação do passado.
Aqui vai um insight que poucos mencionam: a ordem em que você verifica as condições de vitória importa para performance, mesmo que minimamente. Verificar a linha central e as diagonais por últimas faz diferença em jogos recursivos onde você precisa calcular múltiplos movimentos à frente. Se estiver fazendo uma IA minimax, comece pelas verificações mais provaveis de ocorrerem cedo no jogo.
👉 Clique no botão abaixo para saber mais sobre o assunto!
O erro mais comum e como evitar
Pessoas costumam colocar a verificação de vitória dentro do loop que processa o clique do usuário. Isso funciona até você precisar replay. Quando o jogador clica em "jogar novamente" e a variável de estado não é resetada corretamente, o tabuleiro mostra velha mas o jogo continua detectando vitórias anteriores. A solução é separar completamente o estado do jogo da interface. Tenha uma função `resetBoard()` que limpa tanto o array de dados quanto o DOM, e chame-a explicitamente antes de cada nova partida. Outro detalhe prático: se você está usando JavaScript vanilla, evite adicionar e remover event listeners a cada jogada. Adicione um único event listener no container do tabuleiro e use event delegation para capturar cliques nas células. Isso reduz a carga na memória e evita memory leaks em implementações mais longas.
Detecção de empate: o ponto cego
A maioria dos tutoriais mostra como detectar vitória, mas quase ninguém menciona que a detecção de empate requer verificação de tabuleiro cheio, não apenas de que não há mais movimentos possíveis. Um tabuleiro pode ter todas as células preenchidas sem que nenhum jogador tenha feito linha — isso é empate. A verificação correta é: se não há combinação vencedora e o array não tem valores nulos ou vazios, o resultado é empate. Existe também o caso de borda onde o jogador clica duas vezes na mesma célula antes da jogada ser processada. Se você não bloquear células já preenchidas antes de atualizar o estado, o jogo entra em comportamento indefinido. A solução é checking de validade antes de qualquer operação de escrita no estado.
Quando usar uma biblioteca vs fazer do zero
Se o objetivo é apenas um tabuleiro jogo da velha para um projeto simples ou portfólio, fazer do zero leva cerca de 30 minutos em HTML, CSS e JavaScript puro. Não vale a penaar uma biblioteca como React ou Vue para algo tão pequeno, a menos que o projeto maior já use esse framework. Por outro lado, se você precisa de funcionalidades avançadas como análise de jogadas, IA com diferentes níveis de dificuldade, ou interface multiplayer em tempo real, aí sim faz sentido estruturar o projeto com um framework. A diferença é que a complexidade adicional compensa apenas a partir de um certo ponto de feature richness.
Limitações do jogo da velha para aprendizado
É importante ser honesto sobre o que o jogo da velha consegue e não consegue ensinar. Ele é excelente para entender lógica booleana e estruturas de dados simples. Porém, a árvore de decisão completa do jogo da velha é pequena demais (apenas 255.168 jogos possíveis, muitos dos quais simétricos) para testar algoritmos de busca mais sofisticados de forma significativa. Se o objetivo é estudar IA, pule direto para jogo da velho 3D ou gatinho (giant tic-tac-toe), onde o minimax se torna realmente desafiador. O código completo pode ser encontrado em repositórios públicos como o do GitHub, mas recomendo escrever do zero pelo menos uma vez. A parte que mais causa dor de cabeça na implementação real é a sincronização entre estado e DOM quando o jogo roda em velocidade normal — aí você aprende o que realmente importa.
