Blog

Como fiz um jogo da velha que se joga com as mãos

Rastreamento de mãos no navegador, a pinça que não escapa e o truque de aproximar a mão para diminuir o tabuleiro.

Luis Guilherme · 2026-09-23

A ideia era simples: pegar uma peça no ar, levar até a casa e soltar. Sem mouse, sem controle, só a mão na frente da webcam.

A câmera fica no seu aparelho

O rastreamento usa o MediaPipe, que roda dentro do navegador. Do vídeo saem apenas 21 pontos de cada mão. A imagem nunca é enviada para lugar nenhum, nem nas partidas online: ali os dois navegadores trocam só as jogadas e os pontos das mãos.

A pinça que não escapa

A primeira versão era frustrante: você fechava os dedos e a peça "fugia". O motivo é que o cursor seguia a ponta do indicador, e ao fechar a pinça o indicador se mexe.

Três ajustes resolveram:

  1. Ponto médio: enquanto a pinça está fechada, o cursor fica entre o polegar e o indicador.
  2. Histerese: para fechar, os dedos precisam chegar bem perto; para abrir, precisam se afastar mais. Isso evita o pisca-pisca.
  3. Ímã nas casas: soltar a peça alguns pixels fora da casa ainda conta. A distância é medida até a borda da casa, não até o centro.

Aproximar a mão diminui o tabuleiro

O tamanho da mão na imagem diz se ela está perto ou longe. Nos primeiros quadros o jogo calibra o tamanho normal da sua mão; depois, mão mais perto deixa a cena menor e mão mais longe deixa maior. Parece pequeno, mas dá a sensação de que o tabuleiro está no mesmo espaço que você.

O que eu testei de verdade

Testes automáticos cobrem as regras, o prazo de cada jogada e o bot. No navegador, joguei partidas inteiras com mouse e conferi que a peça cai na casa certa mesmo com o tabuleiro reduzido. O gesto com câmera depende de luz, distância e aparelho, e isso só se prova com gente jogando.

Quer o motor para criar o seu? Ele está na página de Códigos.