# Projete a entrada por toque com uma intenção clara

> Planeje a interação por toque considerando os gestos do navegador, o feedback visual e o estado do ponteiro para que o jogo responda de forma previsível nos celulares.

- URL: https://oneshotgems.ai/pt-BR/topics/touch-controls-for-web-games
- Categoria: Para desenvolvedores de jogos
- Tipo: Guia
- Atualizado: 5 de outubro de 2026

A entrada por toque compartilha a tela com os gestos de rolagem e zoom do navegador. Defina quais áreas aceitam comandos do jogo, o que inicia um pressionamento e como a pessoa pode encerrá-lo ou cancelá-lo. Comece descrevendo um gesto do ponto de vista de quem joga e depois decida qual feedback visível confirma que o jogo o reconheceu.

## Defina o gesto e o limite do navegador

Use Pointer Events quando um único fluxo de entrada para mouse, caneta e toque funcionar para a mecânica. Acompanhe o ponteiro ativo desde pointerdown, passando pelo movimento, até a liberação; ignore os demais ponteiros, a menos que o multitoque faça parte da mecânica. Configure touch-action na área de jogo para preservar a rolagem ou o gesto de pinça para zoom do navegador quando forem necessários. Aplicar touch-action: none à área inteira pode impedir o zoom do navegador.

Em uma mecânica de arrastar, mostre imediatamente que o objeto foi agarrado e atualize-o conforme a posição do ponteiro. Em uma mecânica de toque, decida se um pequeno movimento cancela a ativação e teste esse limite em dispositivos reais. Restrinja a política de gestos à área de jogo em vez de aplicá-la à página inteira.

## Trate o cancelamento como um resultado normal

O navegador pode cancelar um ponteiro quando assume o controle de um gesto, quando o estado do dispositivo muda ou quando a interação é interrompida por outro motivo. Ao receber pointercancel, limpe o estado de pressionado, como faria após uma liberação normal; caso contrário, um personagem pode continuar se movendo ou um botão parecer ficar pressionado. Se o jogo capturar um ponteiro, libere essa captura durante a limpeza.

Teste um toque, um arrasto lento, um gesto iniciado na borda e uma tentativa de rolagem do navegador. Confira se cada ação tem um feedback claro e se sair da área não deixa nenhum controle preso. O guia de Pointer Events da MDN explica o modelo compartilhado de ponteiros e o comportamento de touch-action.

## Perguntas

**Um jogo deve desativar todos os gestos de toque do navegador?** Só quando a área de jogo realmente precisar controlar esses gestos. Preserve a rolagem ou o zoom do navegador sempre que possível e limite as regras de touch-action à área que precisa delas.

**O que deve acontecer depois de pointercancel?** Encerre a ação em andamento e limpe o estado de pressionado ou arrastando. O cancelamento é um resultado esperado da entrada, então a limpeza deve ser tão cuidadosa quanto o tratamento de pointerup.

## Siga sua curiosidade

- [Use eventos de ponteiro para entrada de jogo do navegador](https://oneshotgems.ai/pt-BR/topics/pointer-events-for-games): Modele mouse, caneta e toque por meio de eventos de ponteiro, preservando a captura, a identidade do dispositivo e o comportamento de compatibilidade em um loop de jogo.
- [Alvos de toque de tamanho para jogos de navegador](https://oneshotgems.ai/pt-BR/topics/game-touch-targets): Torne os controles do jogo mais fáceis de acertar, separando a arte visual dos limites interativos e verificando o tamanho, o espaçamento e a sobreposição em dispositivos de toque.

## Leitura complementar

- [MDN: eventos de ponteiro](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
- [MDN: touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action)

---
Página canônica: https://oneshotgems.ai/pt-BR/topics/touch-controls-for-web-games