web-dev-qa-db-fra.com

Listener en Javascript

Je recherche un KeyListener pour un jeu que je développe en JavaScript. Je n'ai aucune idée de comment cela fonctionnerait dans du vrai code mais ce serait quelque chose comme ceci:

if(keyPress == upKey)
{
    playerSpriteX += 10;
}
else if(keyPress == downKey)
{
    playerSpriteY -= 10;
}

etc...

Je l'ai recherché et Google a trouvé des choses qui impliquaient AJAX que je ne comprends pas encore. Existe-t-il une fonction intégrée en JavaScript qui fait cela?

javascriptkeyboardkeykeylistener
20
user2423701

Voici une mise à jour pour les navigateurs modernes en 2019

let playerSpriteX = 0;

document.addEventListener('keyup', (e) => {
  if (e.code === "ArrowUp")        playerSpriteX += 10
  else if (e.code === "ArrowDown") playerSpriteX -= 10

  document.getElementById('test').innerHTML = 'playerSpriteX = ' + playerSpriteX;
});
Click on this window to focus it, and hit keys up and down
<br><br><br>
<div id="test">playerSpriteX = 0</div>

Réponse originale de 2013

window.onkeyup = function(e) {
   var key = e.keyCode ? e.keyCode : e.which;

   if (key == 38) {
       playerSpriteX += 10;
   }else if (key == 40) {
       playerSpriteX -= 10;
   }
}

[~ # ~] violon [~ # ~]

46
adeneo

Le code est

document.addEventListener('keydown', function(event){
    alert(event.keyCode);
} );

Cela renvoie le code ascii de la clé. Si vous avez besoin de la représentation de clé, utilisez event.key (Cela renverra 'a', 'o', 'Alt' ...)

13
user7273226

JSFIDDLE DEMO

Si vous ne voulez pas que l'événement soit continu (si vous voulez que l'utilisateur doive relâcher la clé à chaque fois), changez onkeydown en onkeyup

window.onkeydown = function (e) {
    var code = e.keyCode ? e.keyCode : e.which;
    if (code === 38) { //up key
        alert('up');
    } else if (code === 40) { //down key
        alert('down');
    }
};
8
Tom

Avez-vous vérifié la petite bibliothèque Mousetrap ?

Mousetrap est une bibliothèque simple pour gérer les raccourcis clavier en JavaScript.

3
numediaweb

Une comparaison un peu plus lisible se fait en castant event.key en majuscules (j'ai utilisé onkeyup - il fallait que l'événement se déclenche une fois à chaque pression de touche):

window.onkeyup = function(event) {
    let key = event.key.toUpperCase();
    if ( key == 'W' ) {
        // 'W' key is pressed
    } else if ( key == 'D' ) {
        // 'D' key is pressed
    }
}

Chaque clé a son propre code, extrayez-la en affichant la valeur de la variable "clé" (par exemple, pour la touche flèche vers le haut, elle sera "ARROWUP" - (convertie en majuscules))

1
bruddha