Como fazer um jogo da velha simples para dois jogadores no celular
Achei que isso fosse simples no começo. Qualquer um sabe as regras do jogo da velha. Mas quando você tenta transformar isso em um app que funciona razoavelmente bem no celular, começam a aparecer uns problemas chatos que ninguém menciona. Vou explicar como eu fiz o meu e onde dei cabo do olho.
jogo da velha para 2 no mesmo celular
Primeiro, o básico. Você precisa de três coisas: a grade trinta e por trinta, a lógica de verificação de vitória, e um sistema de turnos que alterna entre o X e o O. No celular, o problema imediato é o tamanho do toque. Se você fizer as células muito pequenas, os dedos vão errar. Eu comecei com células de oitenta por oitenta pixels e ainda assim tinha gente clicando na borda e o toque sendo registrado na célula errada. Mudei para cem por cem e resolvi boa parte disso.
Uma coisa que muita gente não pensa: o jogador 1 vai jogar do lado esquerdo e o jogador 2 do direito. Ou um fica em cima e outro embaixo. A orientação do aparelho interfere nisso. Se o celular estiver na horizontal, o tabuleiro fica mais largo. Na vertical, mais alto. Eu configurei o tabuleiro para se adaptar automaticamente, usando flexbox com unidades relativas. Sem isso, em telas pequenas de quinze centímetros de diagonal, as células ficavam minúsculas e o jogo era jogável mas frustrante. Em termos de tecnologia, eu usei HTML, CSS e JavaScript puro. Sem framework. O motivo é simples: para um jogo desse tamanho, um framework só adiciona peso desnecessário. O arquivo final ficou com cerca de sessenta e cinco quilobytes carregando tudo. Levanta-se a questão se vale a pena algo mais robusto, mas honestamente não vale.
A verificação de vitória é o ponto onde mais acontece erro. A abordagem ingênua é verificar todas as oito combinações possíveis após cada jogada. Funciona. Mas eu testei com sessenta jogadas seguidas e a cada verificação havia uma pequena travada perceptível em dispositivos mais antigos. A solução foi verificar apenas as linhas, colunas e diagonais que passam pela última célula jogada. Isso reduz as verificações de oito para no máximo quatro por turno. Em prática, a diferença é de alguns milissegundos, mas em um celular de entrada faz o jogo parecer mais fluido. Um problema específico que eu enfrentei e que demorei para resolver foi o seguinte: em Android, quando você clica rápido demais, o evento de toque às vezes disparava duas vezes na mesma célula. O resultado era o X e o O aparecendo no mesmo quadrado. A causa era que o evento touchstart e click estavam ambos atribuídos ao mesmo handler. A solução foi remover o listener de click e usar apenas touchstart com preventDefault. Assim, o toque físico no schermo é a única gatilho. Depois de resolver isso, esse bug simplesmente sumiu.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Outro detalhe prático que parece óbvio mas não é: a memória do navegador. Se você deixar o app rodando com várias partidas e não limpar o estado corretamente, o objeto que guarda o tabuleiro pode acumular dados residuais. Eu resolvi criando uma função de reset que recria o array do tabuleiro do zero a cada nova partida, em vez de apenas preencher os valores com vazio. Isso evita referências antigas que podem causar comportamentos estranhos depois de dez ou vinte partidas seguidas. Quanto à interface, eu optei por um design minimalista. Fundo escuro, células com bordas sutis, e os símbolos X e O em cores contrastantes — azul para o X e laranja para o O. Nada de animações exageradas. Apenas uma transição suave de meio segundo quando uma célula é preenchida. Animateções longas ou complexas só atrapalham a jogabilidade e aumentam o consumo de bateria, o que em telas OLED é uma consideration real.
Para quem quer baixar e testar, eu hospedei o código no GitHub de forma aberta. O link está na descrição do projeto. É um repositório simples, com três arquivos: index.html, style.css e script.js. Não tem build, não tem npm install, não tem configuração. É só abrir o index.html no navegador do celular ou subir em qualquer servidor estático, como o GitHub Pages ou o Vercel. Se você prefere algo mais completo, com placar, histórico de partidas e opção de escolher o tamanho do tabuleiro — como quatro por quatro ou cinco por cinco — aí sim entra a questão de complexidade. O jogo da velha clássico perde sentido se o tabuleiro for maior que três por três, porque com cinco por cinco o primeiro jogador tem vantagem decisiva e as partidas ficam Longas sem um padrão claro de empate. Eu deixei essa opção como experimental, mas recomendo não usá-la para jogos competitivos.
Há também o aspecto da responsividade que exige atenção. Testei em um Samsung Galaxy A14 com tela de sessenta Hertz e em um iPhone SE de segunda geração. No Galaxy, o tabuleiro se ajustou bem. No iPhone SE, que tem uma tela menor e densidade de pixels diferente, as células ficaram ligeiramente deslocadas se você girar o aparelho durante uma partida. O workaround que eu encontrei foi adicionar um event listener para orientationchange que recalcula o tamanho das células e reposiciona o tabuleiro. Não é elegante, mas funciona. Um ponto que passa despercebido: a acessibilidade. Se você só pensa em toque, esquece que parte do público usa leitores de tela. Eu adicionei aria-label em cada célula descrevendo sua posição e estado — por exemplo, "linha um coluna dois vazio" ou "linha dois coluna três occupado por X". Isso leva dois minutos extras de implementação e torna o jogo acessível para pessoas com deficiência visual, sem custo significativo.
Se o seu objetivo é apenas jogar com um amigo no mesmo aparelho sem complicação, o caminho mais direto é usar uma destas opções: ou o projeto open source que citei, ou simplesmente procurar por "tic tac toe" na Play Store ou App Store e baixar qualquer um dos vários apps gratuitos existentes. A maioria funciona bem, mas muitos têm anúncios intrusivos que aparecem exatamente quando você está prestes a fazer uma jogada importante. Isso estraga a experiência. O meu projeto não tem anúncios e não coleta dados. É apenas um tabuleiro que responde ao toque e anuncia o vencedor. Se você quer algo assim, o código está disponível. Se quer algo mais polido, com gráficos bonitos e modo contra a máquina, aí o cenário muda completamente e entram engines de IA com algoritmo minimax, o que é um assunto para outra conversa.
Resumindo de forma útil: o jogo da velha para dois jogadores no mesmo celular é tecnicamente simples, mas os detalhes de implementação — tamanho de toque, prevenção de eventos duplos, verificação eficiente de vitória e responsividade — são o que separa um protótipo que funciona de um app que realmente é agradável de usar. Eu gastei mais tempo ajustando o feedback tátil e a latência dos toques do que escrevendo a lógica do jogo em si.
