web-dev-qa-db-ja.com

JavaScriptを使用して複数のキーが同時に押されたかどうかを検出する方法は？

JavaScriptゲームエンジンを開発しようとしていますが、この問題に遭遇しました。

  • 私が押すと SPACE キャラクターがジャンプします。
  • 私が押すと → キャラクターは右に移動します。

問題は、右を押してからスペースを押すと、キャラクターがジャンプしてから動きが止まることです。

keydown関数を使用してキーを押します。一度に複数のキーが押されているかどうかを確認するにはどうすればよいですか？

javascriptkeydown
151
Cristy

keydownイベントを使用して、押されたキーを追跡する必要があります。andkeyupイベントは、キーがリリースされたときを追跡します。

この例を参照してください： http://jsfiddle.net/vor0nwe/mkHsU/

（更新：jsfiddle.netが失敗する場合に備えて、ここでコードを再現しています:) HTML：

<ul id="log">
    <li>List of keys:</li>
</ul>

...およびJavascript（jQueryを使用）：

var log = $('#log')[0],
    pressedKeys = [];

$(document.body).keydown(function (evt) {
    var li = pressedKeys[evt.keyCode];
    if (!li) {
        li = log.appendChild(document.createElement('li'));
        pressedKeys[evt.keyCode] = li;
    }
    $(li).text('Down: ' + evt.keyCode);
    $(li).removeClass('key-up');
});

$(document.body).keyup(function (evt) {
    var li = pressedKeys[evt.keyCode];
    if (!li) {
       li = log.appendChild(document.createElement('li'));
    }
    $(li).text('Up: ' + evt.keyCode);
    $(li).addClass('key-up');
});

その例では、どのキーが押されているかを追跡するために配列を使用しています。実際のアプリケーションでは、関連付けられたキーがリリースされると、各要素をdeleteしたい場合があります。

この例ではjQueryを使用して作業を簡単にしていますが、「生の」Javascriptで作業する場合も概念は同様に機能することに注意してください。

29
Martijn
document.onkeydown = keydown; 

function keydown (evt) { 

    if (!evt) evt = event; 

    if (evt.ctrlKey && evt.altKey && evt.keyCode === 115) {

        alert("CTRL+ALT+F4"); 

    } else if (evt.shiftKey && evt.keyCode === 9) { 

        alert("Shift+TAB");

    } 

}
13
Eduardo La Hoz Miranda

私はこの方法を使用しました（Shift + Ctrlが押されている場所を確認する必要がありました）：

// create some object to save all pressed keys
var keys = {
    shift: false,
    ctrl: false
};

$(document.body).keydown(function(event) {
// save status of the button 'pressed' == 'true'
    if (event.keyCode == 16) {
        keys["shift"] = true;
    } else if (event.keyCode == 17) {
        keys["ctrl"] = true;
    }
    if (keys["shift"] && keys["ctrl"]) {
        $("#convert").trigger("click"); // or do anything else
    }
});

$(document.body).keyup(function(event) {
    // reset status of the button 'released' == 'false'
    if (event.keyCode == 16) {
        keys["shift"] = false;
    } else if (event.keyCode == 17) {
        keys["ctrl"] = false;
    }
});
6
Array

完全なサンプルコードが必要なユーザー向け。右+左追加

var keyPressed = {};
document.addEventListener('keydown', function(e) {

   keyPressed[e.key + e.location] = true;

    if(keyPressed.Shift1 == true && keyPressed.Control1 == true){
        // Left shift+CONTROL pressed!
        keyPressed = {}; // reset key map
    }
    if(keyPressed.Shift2 == true && keyPressed.Control2 == true){
        // Right shift+CONTROL pressed!
        keyPressed = {};
    }

}, false);

document.addEventListener('keyup', function(e) {
   keyPressed[e.key + e.location] = false;

   keyPressed = {};
}, false);
2
Reza Ramezanpour

キーダウンで複数の機能を呼び出すこともできます。各機能は特定のキーをチェックし、適切に応答します。

document.keydown = function (key) {

    checkKey("x");
    checkKey("y");
};
2
AnonymousGuest

押されたキーの1つがAlt/Ctrl/Shiftの場合、次の方法を使用できます。

document.body.addEventListener('keydown', keysDown(actions) );

function actions() {
   // do stuff here
}

// simultaneous pressing Alt + R
function keysDown (cb) {
  return function (zEvent) {
    if (zEvent.altKey &&  zEvent.code === "KeyR" ) {
      return cb()
    }
  }
}
1
Michael Lester

keypressにEventkeydownハンドラーを追加してみます。例えば：

window.onkeydown = function() {
    // evaluate key and call respective handler
    window.onkeypress = function() {
       // evaluate key and call respective handler
    }
}

window.onkeyup = function() {
    window.onkeypress = void(0) ;
}

これはパターンを説明するためのものです。ここでは詳しく説明しません（特に、ブラウザー固有のレベル2+ Event登録には関係ありません）。

これが役立つかどうかを投稿してください。

0
FK82
    $(document).ready(function () {
        // using ascii 17 for ctrl, 18 for alt and 83 for "S"
        // ctr+alt+S
        var map = { 17: false, 18: false, 83: false };
        $(document).keyup(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = true;
                if (map[17] && map[18] && map[83]) {
                    // Write your own code here, what  you want to do
                    map[17] = false;
                    map[18] = false;
                    map[83] = false;
                }
            }
            else {
                // if u press any other key apart from that "map" will reset.
                map[17] = false;
                map[18] = false;
                map[83] = false;
            }
        });

    });
0
Prosun Chakraborty
case 65: //A
jp = 1;
setTimeout("jp = 0;", 100);

if(pj > 0) {
ABFunction();
pj = 0;
}
break;

case 66: //B
pj = 1;
setTimeout("pj = 0;", 100);

if(jp > 0) {
ABFunction();
jp = 0;
}
break;

最善の方法ではありません、私は知っています。

0
Anonymous