JavaScript中的KeyListener

Question

我正在开发一款JavaScript游戏，需要一个KeyListener。我不知道在实际代码中如何操作，但大致会像这样：

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

我搜索了一下，Google 出现了一些涉及 AJAX 的内容，但我还不理解。JavaScript 中是否有内置的函数可以实现这个功能？

- user2423701

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

- adeneo

---

"keyCode"已被弃用，请考虑使用"code"代替。https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode - Sam Barnum

Answer 2

这段代码是：

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

这将返回按键的 ASCII 码。如果你需要按键的表示形式，请使用 event.key（它将返回 'a'、'o'、'Alt'...）

- user7273226

---

这是 keyCode，而不是 keycode。 - Jamie Birch

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');
    }
};

- Tom

Answer 4

你有没有查看过小型的Mousetrap库？

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

- numediaweb

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” - 转换为大写）。

- ego