Choisissez les clés par signification et disposition
Utilisez KeyboardEvent.key lorsque l’action doit dépendre du caractère produit par la disposition du clavier de la personne, et KeyboardEvent.code lorsque la position physique de la touche compte davantage. Cette distinction a un effet selon les dispositions. Proposez une correspondance cohérente et affichez-la dans les instructions au lieu de supposer que tout le monde utilise WASD.
N’interceptez pas les touches lorsqu’un champ texte ou un contrôle modifiable a le focus. Empêchez les comportements par défaut du navigateur, comme le défilement de la page, uniquement si la surface de jeu gère activement cette touche. Le jeu ne détournera ainsi ni la saisie normale ni la navigation avant que la personne entre dans la zone interactive.
Suivre les touches maintenues et leur relâchement
Pour les déplacements continus, activez l’état maintenu d’une touche sur keydown et effacez-le sur keyup. Le navigateur peut répéter keydown tant que la touche reste enfoncée. Une action ponctuelle comme sauter doit donc ignorer ces répétitions, sauf si elles sont voulues. Effacez les touches maintenues lorsque le jeu perd le focus ou que la fenêtre est floutée : l’événement keyup peut ne pas arriver au jeu si le focus est déjà parti ailleurs.
Testez deux touches en même temps, une pression longue, un appui bref et le comportement lorsque le focus quitte puis revient au jeu. Pour les actions ponctuelles, ignorez les keydown répétés sauf si la répétition est prévue. MDN documente KeyboardEvent.key, KeyboardEvent.code et les types d’événements ; choisissez la propriété adaptée à votre correspondance.
Questions sur commandes du clavier pour les jeux par navigateur
Faut-il utiliser KeyboardEvent.key ou KeyboardEvent.code pour une commande de jeu ?
Utilisez KeyboardEvent.key si le caractère ou la disposition du clavier doit déterminer l’action. Utilisez KeyboardEvent.code si la position physique de la touche est la commande voulue. Indiquez clairement votre choix et testez d’autres dispositions.
Pourquoi effacer les touches maintenues lorsque la page perd le focus ?
Après un changement de focus, le navigateur peut ne pas transmettre au jeu l’événement de relâchement keyup. Effacer l’état des entrées évite qu’un déplacement reste actif au retour de la personne.
Pour aller plus loin
Vous avez repéré une information dépassée ? Signaler une correction