Javascript中的Keylistener

Question

我正在寻找一个KeyListener用于我正在用JavaScript开发的游戏。我不知道这在实际代码中是如何工作的，但它会是这样的：

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

等等...

我搜索了一下，Google提出了涉及AJAX的内容，我还不明白。 JavaScript中是否有内置函数可以执行此操作？

Answer 1

这是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>

---

2013年的原始答案

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

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

FIDDLE

Answer 2

代码是

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

这将返回密钥的ascii代码。如果您需要键表示，请使用event.key（这将返回'a'，'o'，'Alt'...）

Answer 3

JSFIDDLE DEMO

如果您不希望事件是连续的（如果您希望用户每次都必须释放该键），请将onkeydown更改为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');
    }
};

Answer 4

你检查了小的Mousetrap图书馆吗？

Mousetrap是一个用于处理JavaScript中键盘快捷键的简单库。

Answer 5

通过将event.key强制转换为大写来完成比较可读性（我使用onkeyup - 需要事件在每次按键时触发一次）：

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

每个键都有自己的代码，通过输出“key”变量的值来获取它（例如，对于向上箭头键，它将是'ARROWUP' - （转换为大写））