Assis à la table, vous utilisez la souris et le clavier tout en étant assis sur le canapé - très probablement le pavé tactile d'un ordinateur portable ou l'écran tactile d'une tablette. Vous pouvez même utiliser Leap Motion et contrôler votre ordinateur avec des gestes. Comme vous l'avez déjà compris, il existe de nombreuses façons de surfer sur Internet et de gérer votre ordinateur. Un gamepad peut être l'un d'entre eux.
Dans cet article, je vais partager avec vous comment:
- connecter la manette de jeu au navigateur
- écouter les événements de la manette de jeu
- contrôler la concentration sur les éléments de la page à l'aide d'une manette de jeu
- faire des commentaires sous forme de vibrations
Connectez votre manette de jeu via USB ou Bluetooth et commençons.
API de la manette de jeu
Une manette de jeu API a été ajoutée à la norme HTML 5. L'API permet l'utilisation de manettes de jeu dans un navigateur. En combinaison avec un élément, cette API peut être utilisée pour créer des jeux qui prennent en charge une manette de jeu. Par conséquent, les utilisateurs peuvent jouer à des jeux en utilisant la manette de jeu directement dans le navigateur, ce qui est très cool. Mais l'API peut être utilisée non seulement pour les jeux. Personne ne vous empêche de créer un périphérique d'entrée sous la forme d'une manette de jeu à des fins complètement différentes.
L'API Gamepad est bien prise en charge , mais toujours au stade de brouillon. Peut-être que quelque chose va changer, être supprimé ou ajouté à l'avenir.
Nous connectons une manette de jeu
Lorsque la manette de jeu se connecte à l'ordinateur via USB ou Bluetooth, nous pouvons utiliser deux événements afin de gérer les connexions et les déconnexions:
window.addEventListener('gamepadconnected', function(event) {
La manette de jeu ne commencera à fonctionner qu'après avoir appuyé sur le bouton (environ Traduire tout ou Démarrer). Le fait est qu'il s'agit de la sécurité / confidentialité du navigateur. Par conséquent, il est nécessaire de réfléchir à l'interface informant l'utilisateur de la nécessité d'appuyer sur un bouton pour commencer le travail.
Les événements de la manette de jeu sont les suivants dans la console:
Disposition de la manette de jeu: boutons et axes
Comme vous pouvez le voir, le journal des événements a un tas de boutons (0 - 16) et d'axes (axes 0 - 3). Mais comment savez-vous comment les boutons se cachent derrière le numéro? Les manettes de jeu ont des dispositions différentes selon la marque. Par conséquent, vous devez rechercher des informations sur Internet. Dans ce cas, nous connectons la manette de jeu Xbox One et elle a cette disposition:
Écoutez la frappe
Lors du développement d'interfaces, vous pouvez utiliser .addEventListener() pour ajouter un événement sur une frappe de touche. Dans ce cas, cela ne peut pas être fait, car les boutons du contrôleur ne créent pas d'événements. Et comme vous pouvez le voir dans le journal ci-dessus, vous devez vérifier manuellement le champ pressed :
const xBoxButtonB = gamepad.buttons[1] if (xBoxButtonB.pressed) { doSomethingOnButtonPress(); }
Comme nous voulons faire la vérification tout le temps, nous devons tout boucler. Par exemple, en utilisant requestAnimationFrame :
const rAF = window.mozRequestAnimationFrame || window.requestAnimationFrame; window.addEventListener('gamepadconnected', function() { updateLoop(); }); function updateLoop() {
Navigation entre les éléments
Pour utiliser la manette de jeu pour naviguer sur la page Web, vous devez simuler le clavier. Mais vous devez d'abord obtenir tous les éléments de la page qui peuvent être ciblés.
En utilisant le sélecteur suivant, vous pouvez obtenir tous ces éléments:
const focusableElements = document.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' );
Déplacer le focus par programme
Pour nous concentrer sur l'élément, nous allons parcourir la NodeList et nous concentrer sur l'élément actuel en utilisant la méthode NodeList element.focus() .
Cet exemple montre comment passer du focus d'un élément à l'autre:
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() }
Faites attention à l'utilisation de la fonction setTimeout . Il est utilisé pour limiter requestAnimationFrame à 100 millisecondes. Sans cela, un simple clic sur une touche peut générer plusieurs événements de manette de jeu, car il n'y a pas d'onClick familier, et il est physiquement impossible d'appuyer et de relâcher une touche en une milliseconde.
Cliquez sur les éléments
Vous pouvez click() sur des éléments en utilisant la méthode click() :
clickItem(index) { focusableElements[index].click(); }
Ajouter des commentaires à l'aide de vibrations
Les manettes de jeu modernes peuvent vibrer. Ces vibrations sont utilisées pour le retour d'informations à l'utilisateur, généralement dans les jeux. Mais vous pouvez également essayer de faire des commentaires à partir des éléments Web sur la page.
Les manettes de jeu sont souvent équipées de deux moteurs électriques, puissants et faibles:
Nous pouvons contrôler ces moteurs à partir d'un navigateur à l'aide de vibrationActuator .
Pour créer des vibrations, nous pouvons utiliser la méthode playEffect() :
gamepad.vibrationActuator.playEffect('dual-rumble', { startDelay: 0,
Lorsque vous utilisez des moteurs pour les vibrations, n'oubliez pas qu'un gros moteur a besoin de plus de temps pour accélérer. Par conséquent, pour des réponses à court terme, il est préférable d'utiliser un petit moteur.
Conclusion
Dans cet exemple, nous avons examiné les fonctions de base de l'API Gamepad et comment elle peut être utilisée pour naviguer sur Internet.
Le code GitHub et la démo peuvent être vus ici .
Liens utiles
html5gamepad.com - outil de vérification de la manette de jeu
API Gamepad sur MDN