web-dev-qa-db-ja.com

Javascriptのキーリスナー

JavaScriptで開発しているゲームのKeyListenerを探しています。これが実際のコードでどのように機能するかはわかりませんが、次のようになります。

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

等...

検索してみたところ、GoogleはAJAXを理解していません。これを行うJavaScriptの組み込み関数はありますか？

javascriptkeyboardkeykeylistener
20
user2423701

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 [〜＃〜]

46
adeneo

コードは

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

これは、キーのASCIIコードを返します。キー表現が必要な場合は、event.keyを使用します（これにより、「a」、「o」、「Alt」が返されます...）

13
user7273226

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

小さな Mousetrap ライブラリを確認しましたか？

Mousetrapは、JavaScriptでキーボードショートカットを処理するためのシンプルなライブラリです。

3
numediaweb

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」-（大文字にキャスト））

1
bruddha