it-swarm.com.de

Keylistener in Javascript

Ich suche ein KeyListener für ein Spiel, das ich in JavaScript entwickle. Ich habe keine Ahnung, wie das in echtem Code funktionieren würde, aber es wäre ungefähr so:

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

etc...

Ich habe danach gesucht und Google hat Dinge entwickelt, die AJAX) betreffen und die ich noch nicht verstehe. Gibt es eine eingebaute Funktion in JavaScript, die dies tut?

20
user2423701

Hier ist ein Update für moderne Browser im Jahr 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>

Ursprüngliche Antwort von 2013

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

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

[~ # ~] Geige [~ # ~]

46
adeneo

Der Code ist

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

Dies gibt den ASCII-Code des Schlüssels zurück. Wenn Sie die Tastendarstellung benötigen, verwenden Sie event.key (dies gibt 'a', 'o', 'Alt' ... zurück)

13
user7273226

JSFIDDLE DEMO

Wenn das Ereignis nicht kontinuierlich sein soll (wenn der Benutzer die Taste jedes Mal loslassen muss), ändern Sie onkeydown in 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

Haben Sie die kleine Mausefalle Bibliothek überprüft?

Mousetrap ist eine einfache Bibliothek zum Umgang mit Tastaturkürzeln in JavaScript.

3
numediaweb

Ein etwas besser lesbarer Vergleich erfolgt durch Casting von event.key in Großbuchstaben (ich habe onkeyup verwendet - das Ereignis musste bei jedem Tastendruck einmal ausgelöst werden):

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

Jeder Schlüssel hat seinen eigenen Code. Geben Sie den Wert der Variablen "key" aus.

1
bruddha