Question

我目前正在从事键盘识别项目，并创建一个简单的游戏以证明我对此的理解。当我按四个键：W，S，A，D时，它将打印出对应于它们的方向。（例如W =向上）。下面的演示：

var msg = new SpeechSynthesisUtterance();
var synth = window.speechSynthesis;

function uniKeyCode(event) {
    var key = event.which || event.keyCode;
    // console.log(key)
    if (key == 32 || key == 13) {
        document.getElementById("actionCenter").innerHTML = "fire"
        msg = new SpeechSynthesisUtterance("fire");

        //settings
        msg.rate = 1.2; //speech speed - range: 0 to 10
        //look into console to see all available voices/languages
        msg.voice = synth.getVoices()[0];

        //speaking trigger
        synth.cancel(); //cut previous voice short
        synth.speak(msg);
    }

    if (key == 87 || key == 38) {
        document.getElementById("actionCenter").innerHTML = "jump"
        msg = new SpeechSynthesisUtterance("jump");

        msg.rate = 1.2;
        msg.voice = synth.getVoices()[0];

        synth.cancel();
        synth.speak(msg);
    }

    if (key == 83 || key == 40) {
        document.getElementById("actionCenter").innerHTML = "roll"
        msg = new SpeechSynthesisUtterance("roll");

        msg.rate = 1.2;
        msg.voice = synth.getVoices()[0];

        synth.cancel();
        synth.speak(msg);
    }

    if (key == 65 || key == 37) {
        document.getElementById("actionCenter").innerHTML = "roll left"
        msg = new SpeechSynthesisUtterance("roll left");

        msg.rate = 1.2;
        msg.voice = synth.getVoices()[0];

        synth.cancel();
        synth.speak(msg);
    }

    if (key == 68 || key == 39) {
        document.getElementById("actionCenter").innerHTML = "roll right"
        msg = new SpeechSynthesisUtterance("roll right");

        msg.rate = 1.2;
        msg.voice = synth.getVoices()[0];

        synth.cancel();
        synth.speak(msg);
    }
}

.center {
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Assignment 11a2</title>
</head>

<body onkeydown="uniKeyCode(event)">
    <p class="center">Actions
        <br>
        <span id="actionCenter"></span></p>
    <script src="11a2.js"></script>
</body>

</html>

现在我正在尝试同时按下多个键（例如W + A =向左跳转）时采取措施。我尝试过：

if (key == 87 && key == 65) {
   document.getElementById ("actionCenter").innerHTML = "Jump Left"
}

但是显然，它没有用。该代码就像这三行不存在一样运行。有什么问题吗？

Answer 1

没有值可以同时为RouterModule.forRoot(routes, { enableTracing: true })和87；这就是您的65永远不会触发的原因。如果您“同时”按下两个键，它仍会触发两个单独的if事件。

为了检测到keydown和87同时被按下，您可以执行两种不同的方法：

跟踪上一次按下每个键的时间。如果例如按下65，不久前按下87，触发您的代码。
在65上，请注意键已按下。请注意，在keydown上，键已向上。当keyup和87都下降时做出反应。

Answer 2

每按下一个键，就会触发一个新事件并调用您的监听器函数。

要检查是否同时按下了多个键，可以将键值存储在全局数组中并进行比较。

因此，对于每个keydown事件，您都必须将键值推送到全局数组中，对于每个keyup事件，请从数组中删除该键值。

Answer 3

这是 Bradens 答案的实现。

var keys = {}
function handleKeyPress(evt) {
  let { keyCode, type } = evt || Event; // to deal with IE
  let isKeyDown = (type == 'keydown');
  keys[keyCode] = isKeyDown;

  // test: enter & shift key pressed down 
  if(isKeyDown && keys[13] && keys[16]){
    console.log('enter + shift pressed')
  }
};

window.addEventListener("keyup", handleKeyPress);
window.addEventListener("keydown", handleKeyPress);

Answer 4

最简单的方法是使用JQuery的keypress事件，并将值传递给开关，以了解所按下的多个键：

    $(document).keypress(function(evt){
        var x = evt.which || evt.keyCode; 
        console.log(x);
    switch(evt.keyCode){
        case 119:
            //alert("Key press  \"W\"");
            //Go to North coordinates
        break;
        case 115:
            //alert("Key press \"S\"");
            //Go to South soordinates
        break;                
        case 97:
            //alert("Go to \"East\"");
        break;           
        case 100:
            //alert("Se presionó la flecha \"West\"");
            // ... 
        break; 
        case 113:
            ...
        break;
        case 101:
            ...
        break;       
        case 122:
            ...
        break;
        case 99:
            ...
        break;                
        case 13:
            ...
        break;}

您可以使用其ascii代码设置任何所需的键

或者，如果您只想使用JS，请尝试：

document.getElementById("container").addEventListener("keypress", myFunction);

function myFunction(evt) {
    var x = evt.which || evt.keyCode; 
    console.log(x);
    //Switch here
    //...
}

也许您需要一些标记，以便知道（或不）按下了夹心键。

如何使用JavaScript检测html中是否同时按下了多个键

4 个答案: