javascript - Javascript中的按键监听器

Question

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

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

ETC...

我搜索了它，谷歌提出了一些我还不了解的涉及 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;
   }
}

小提琴

Answer 2

代码是

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

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

Answer 3

JSFIDDLE 演示

如果您不希望事件是连续的（如果您希望用户每次都必须释放键），请更改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 是一个简单的库，用于处理 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' - （转换为大写））