Détecter les appuis sur les touches fléchées en JavaScript

Comment détecter l'appui sur l'une des touches fléchées ? J'en ai profité pour savoir:

function checkKey(e) {
 var event = window.event? window.event: e;
 console.log(event.keyCode)
}

Bien que cela fonctionnait pour toutes les autres touches, ce n'était pas le cas pour les touches fléchées (peut-être parce que le navigateur est censé faire défiler ces touches par défaut).

Solution du problème

event.key === "Flèche droite"...

Plus récent et beaucoup plus propre: utilisez event.key. Plus de codes numériques arbitraires ! Si vous transpilez ou savez que vos utilisateurs utilisent tous des navigateurs modernes, utilisez ceci !

node.addEventListener('keydown', function(event) {
 const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

Gestion détaillée :

switch (event.key) {
 case "ArrowLeft":
 // Left pressed
 break;
 case "ArrowRight":
 // Right pressed
 break;
 case "ArrowUp":
 // Up pressed
 break;
 case "ArrowDown":
 // Down pressed
 break;
}

Manipulation moderne des commutateurs :

const callback = {
 "ArrowLeft": leftHandler,
 "ArrowRight": rightHandler,
 "ArrowUp": upHandler,
 "ArrowDown": downHandler,
}[event.key]
callback?.()

REMARQUE: Les anciennes propriétés ( .keyCodeet .which) sont obsolètes.

"w", "a", "s", "d"pour l'orientation, utilisezevent.code

Pour prendre en charge les utilisateurs qui utilisent des dispositions de clavier autres que qwerty/anglais, vous devez plutôt utiliser event.code. Cela préservera l'emplacement de la clé physique, même si le caractère résultant change.

event.keyserait,sur Dvorak et zsur Azerty, rendant votre jeu injouable.

const {code} = event
if (code === "KeyW") // KeyA, KeyS, KeyD

De manière optimale, vous autorisez également le remappage des clés, ce qui profite au joueur quelle que soit sa situation.

PS event.codec'est pareil pour les flèches

keyDocumentation Mozilla

codeDocumentation Mozilla

Navigateurs pris en charge