Wenn Sie am Tisch sitzen, verwenden Sie Maus und Tastatur auf der Couch - am wahrscheinlichsten das Touchpad eines Laptops oder den Touchscreen eines Tablets. Sie können sogar Leap Motion verwenden und Ihren Computer mit Gesten steuern. Wie Sie bereits verstanden haben, gibt es viele Möglichkeiten, im Internet zu surfen und Ihren Computer zu verwalten. Ein Gamepad kann eines davon sein.
In diesem Artikel werde ich mit Ihnen teilen, wie:
- Verbinden Sie das Gamepad mit dem Browser
- Hören Sie sich Gamepad-Ereignisse an
- Kontrollieren Sie den Fokus auf Seitenelemente mit einem Gamepad
- Feedback in Form von Vibration geben
Schließen Sie Ihr Gamepad über USB oder Bluetooth an und legen Sie los.
Gamepad API
Dem HTML 5-Standard wurde ein API-Gamepad hinzugefügt, das die Verwendung von Gamepads in einem Browser ermöglicht. In Kombination mit einem Element kann diese API verwendet werden, um Spiele zu erstellen, die ein Gamepad unterstützen. Daher können Benutzer Spiele mit dem Gamepad direkt im Browser spielen, was sehr cool ist. Die API kann aber nicht nur für Spiele verwendet werden. Niemand hindert Sie daran, ein Eingabegerät in Form eines Gamepads für ganz andere Zwecke zu erstellen.
Die Gamepad-API wird gut unterstützt , befindet sich jedoch noch im Entwurfsstadium. Möglicherweise wird sich in Zukunft etwas ändern, gelöscht oder hinzugefügt.
Wir verbinden ein Gamepad
Wenn das Gamepad über USB oder Bluetooth eine Verbindung zum Computer herstellt, können zwei Ereignisse verwendet werden, um Verbindungen herzustellen und zu trennen:
window.addEventListener('gamepadconnected', function(event) {
Das Gamepad funktioniert erst, nachdem Sie die Taste gedrückt haben (ca. Translate Any oder Start). Tatsache ist, dass dies die Sicherheit / Privatsphäre des Browsers ist. Daher ist es notwendig, über die Benutzeroberfläche nachzudenken, um den Benutzer über die Notwendigkeit zu informieren, eine Taste zu drücken, um mit der Arbeit zu beginnen.
Die Gamepad-Ereignisse in der Konsole lauten wie folgt:
Gamepad-Layout: Schaltflächen und Achsen
Wie Sie sehen, enthält das Ereignisprotokoll eine Reihe von Schaltflächen (0 - 16) und Achsen (Achsen 0 - 3). Aber woher weißt du, wie sich die Knöpfe hinter der Nummer verstecken? Gamepads haben je nach Marke unterschiedliche Layouts. Deshalb sollten Sie im Internet nach Informationen suchen. In diesem Fall verbinden wir das Xbox One-Gamepad und es hat folgendes Layout:
Hören Sie den Tastenanschlag
Bei der Entwicklung von Schnittstellen können Sie .addEventListener() , um ein Ereignis .addEventListener() Tastendruck hinzuzufügen. In diesem Fall ist dies nicht möglich, da die Schaltflächen auf der Steuerung keine Ereignisse erzeugen. Und wie Sie dem obigen Protokoll entnehmen können, müssen Sie das pressed Feld manuell prüfen:
const xBoxButtonB = gamepad.buttons[1] if (xBoxButtonB.pressed) { doSomethingOnButtonPress(); }
Da wir die Überprüfung ständig durchführen möchten, müssen wir alles in eine Schleife packen. Beispiel mit requestAnimationFrame :
const rAF = window.mozRequestAnimationFrame || window.requestAnimationFrame; window.addEventListener('gamepadconnected', function() { updateLoop(); }); function updateLoop() {
Navigation zwischen Elementen
Um das Gamepad zum Navigieren auf der Webseite zu verwenden, müssen Sie die Tastatur simulieren. Aber zuerst müssen Sie alle Elemente auf der Seite abrufen, die fokussiert werden können.
Mit dem folgenden Selektor können Sie alle diese Elemente abrufen:
const focusableElements = document.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' );
Fokus programmatisch verschieben
Um sich auf das Element zu konzentrieren, durchlaufen wir die NodeList und konzentrieren uns mit der Methode element.focus() auf das aktuelle Element.
Dieses Beispiel zeigt, wie Sie den Fokus von Element zu Element springen können:
let current; function updateLoop() { const gamepad = navigator.getGamepads()[0] const gamepadBumperL = gamepad.buttons[4] const gamepadBumperR = gamepad.buttons[5] if (gamepadBumperL.pressed) { prevItem(current) } if (gamepadBumperR.pressed) { nextItem(current) } setTimeout(() => rAF(updateLoop), 100) } function prevItem(index) { current = (index - 1) % focusableElements.length focusableElements[current].focus() } function nextItem(index) { current = (index + 1) % focusableElements.length focusableElements[current].focus() }
setTimeout auf die Verwendung der Funktion setTimeout . Es wird verwendet, um requestAnimationFrame auf 100 Millisekunden zu beschränken. Ohne dies kann ein einziger Klick auf eine Taste mehrere Gamepad-Ereignisse erzeugen, da es kein uns bekanntes onClick gibt und es physisch unmöglich ist, eine Taste in einer Millisekunde zu drücken und loszulassen.
Klicken Sie auf die Elemente
Sie können mit der click() -Methode auf Elemente click() :
clickItem(index) { focusableElements[index].click(); }
Fügen Sie Feedback mithilfe von Vibration hinzu
Moderne Gamepads können vibrieren. Diese Vibrationen werden für die Rückmeldung an den Benutzer verwendet, normalerweise in Spielen. Sie können aber auch versuchen, Feedback von Webelementen auf der Seite zu geben.
Gamepads sind häufig mit zwei starken und schwachen Elektromotoren ausgestattet:
Wir können diese Motoren über einen Browser mit vibrationActuator steuern.
Um eine Vibration zu erzeugen, können wir die Methode playEffect() verwenden:
gamepad.vibrationActuator.playEffect('dual-rumble', { startDelay: 0,
Wenn Sie Motoren für Vibrationen verwenden, beachten Sie, dass ein großer Motor mehr Zeit zum Beschleunigen benötigt. Daher ist es für kurzfristige Reaktionen besser, einen kleinen Motor zu verwenden.
Fazit
In diesem Beispiel haben wir die Grundfunktionen der Gamepad-API und deren Verwendung zur Navigation im Internet untersucht.
GitHub- Code und Demo finden Sie hier .
Nützliche Links
html5gamepad.com - Gamepad-Checker-Tool
Gamepad API auf MDN