Concevoir une saisie tactile avec une intention claire

Définir le geste et la limite du navigateur

Utilisez Pointer Events lorsqu’une même voie de saisie pour la souris, le stylet et le tactile convient à la mécanique. Suivez le pointeur actif de pointerdown jusqu’au déplacement et au relâchement, et ignorez les autres pointeurs sauf si le multitouch est intentionnel. Définissez touch-action sur la surface de jeu afin de préserver le défilement ou le pincement pour zoomer du navigateur dont les joueurs ont encore besoin. Appliquer touch-action: none à toute la surface peut empêcher le zoom du navigateur.

Pour une mécanique de glisser-déposer, affichez immédiatement l’état de saisie et mettez l’objet à jour selon la position du pointeur. Pour un appui, décidez si un léger mouvement annule l’activation et testez ce seuil sur de vrais appareils tactiles. Limitez la politique de gestes à la surface de jeu au lieu de l’appliquer à toute la page.

Traiter l’annulation comme un résultat normal

Le navigateur peut annuler un pointeur lorsqu’il prend en charge un geste, lorsque l’état de l’appareil change ou lorsque l’interaction s’interrompt autrement. À pointercancel, effacez l’état d’appui comme après un relâchement normal ; sinon, un personnage peut continuer à avancer ou un bouton sembler rester enfoncé. Si le jeu capture un pointeur, libérez cette capture lors du nettoyage.

Testez un appui, un glissement lent, un geste commencé au bord et une tentative de défilement du navigateur. Vérifiez que chaque action reçoit un retour clair et que quitter la surface ne laisse aucune commande bloquée. Le guide Pointer Events de MDN explique le modèle commun des pointeurs et le comportement de touch-action.

Questions sur ⁨commandes tactiles pour jeux web⁩