Geste und Grenze zum Browser festlegen
Verwende Pointer Events, wenn sich Maus, Stift und Touch für die Spielmechanik über denselben Eingabepfad steuern lassen. Verfolge den aktiven Zeiger ab pointerdown über die Bewegung bis zum Loslassen und ignoriere andere Zeiger, sofern Mehrfingereingaben nicht ausdrücklich vorgesehen sind. Lege touch-action für die Spielfläche so fest, dass benötigtes Scrollen oder Zoomen per Pinch weiterhin im Browser möglich ist. Ein flächendeckendes touch-action: none kann den Browserzoom verhindern.
Zeige bei einer Ziehmechanik sofort an, dass ein Objekt aufgenommen wurde, und aktualisiere es anhand der Zeigerposition. Entscheide bei einer Tippmechanik, ob schon eine kleine Bewegung die Aktivierung abbricht, und teste diesen Grenzwert auf echten Touchgeräten. Beschränke die Gestenregeln auf die Spielfläche statt auf die ganze Seite.
Abbruch als normalen Ausgang behandeln
Der Browser kann einen Zeiger abbrechen, wenn er eine Geste übernimmt, sich der Gerätezustand ändert oder die Interaktion anderweitig endet. Setze bei pointercancel den gedrückten Zustand zurück, genauso wie nach einem regulären Loslassen. Sonst bewegt sich eine Figur möglicherweise weiter oder eine Schaltfläche wirkt dauerhaft gedrückt. Wenn das Spiel einen Zeiger erfasst, gib diese Erfassung beim Aufräumen frei.
Teste Tippen, langsames Ziehen, eine am Rand beginnende Geste und einen Scrollversuch im Browser. Prüfe, ob jede Aktion klar rückgemeldet wird und beim Verlassen der Spielfläche keine Steuerung hängen bleibt. Der MDN-Leitfaden zu Pointer Events erklärt das gemeinsame Zeigermodell und das Verhalten von touch-action.
Fragen zu Touch-Steuerung für Webspiele
Sollte ein Spiel alle Touchgesten des Browsers deaktivieren?
Nur wenn die Spielfläche diese Gesten wirklich selbst steuern muss. Ermögliche Scrollen oder Zoomen im Browser, wo es geht, und beschränke touch-action auf den Bereich, der die Regel benötigt.
Was soll nach pointercancel passieren?
Beende die laufende Spielaktion und setze den gedrückten oder gezogenen Zustand zurück. Abbruch ist ein erwartbarer Eingabeausgang; die Bereinigung sollte daher genauso sorgfältig erfolgen wie bei pointerup.
Weiterlesen
Etwas nicht mehr aktuell? Korrektur melden