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 sobre controles por toque para jogos web
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.
Leitura complementar
Viu alguma informação desatualizada? Informar uma correção