在Javascript中,如何判断用户是否同时按下两个键？

Question

在Javascript中,如何判断用户是否同时按下两个键？

例如,我在屏幕中间画了一个圆圈.当用户按住向上箭头时,我想将其向上移动,而当用户按住向右箭头时,我想向右移动它.那部分很容易.如果用户同时持有向上和向右箭头,我想对角线,向上和向右移动圆圈.

基本的Javascript事件处理看起来不太可能,但肯定有人已经找到了解决/黑客/改进的方法.

Answer 1

这是你在概念上需要做的事情(我猜这叫做伪代码):

从这样的事情开始:

var PIXEL_DELTA  = 10; // Distance to move in pixels

var leftPressed  = 0,
    upPressed    = 0,
    downPressed  = 0,
    rightPressed = 0;

然后在每一个keydown事件,如果按下的键测试left,up等从把它的变量0来PIXEL_DELTA.

在每个keyup事件上,运行相同的测试并将正确的变量转回0.

然后,在您的移动代码(真实代码)中:(此代码改编自Crescent Fresh的绝佳示例):

function move() {
  var dot = document.getElementById('dot'),
      deltaX = rightPressed - leftPressed,
      deltaY = downPressed - upPressed;

  if(deltaX) {
    dot.style.left = (parseInt(dot.style.left, 10) || 0) + deltaX + 'px';
  }

  if (deltaY) {
    dot.style.top = (parseInt(dot.style.top, 10) || 0) + deltaY + 'px';
  }
}

浏览器将(应该)为每个键激活一个单独的keydown/ keyup事件,即使它们被"同时"按下.

工作实例

Crescent Fresh 在JSBin上放了一个完整的例子.请务必访问可编辑的版本以使用代码.

Answer 2

Javascript 有 onkeydown 和 onkeyup 事件。您可以简单地在 keydown 上拨弄一下左箭头，再拨弄一下向上箭头。在键盘上，拨回相应的位。

var leftPressed,
    upPressed,
    rightPressed,
    downPressed;

var milli = 100;

window.addEventListener('onkeydown', function(e) {
    switch(e.keycode) {
        case 37: //left
            leftPressed = true;
        case 38: //up
            upPressed = true;
        case 39: //right
           rightPressed = true;
        case 40: //down
            downPressed = true;
        default:
            break;
    }
});

window.addEventListener('onkeyup', function(e) {
    switch(e.keycode) {
        case 37: //left
            leftPressed = false;
        case 38: //up
            upPressed = false;
        case 39: //right
           rightPressed = false;
        case 40: //down
            downPressed = false;
        default:
            break;
    }

});

function moveCircle() {
    if(leftPressed && !rightPressed) {
        // move left
    }
    if(rightPressed && !leftPressed) {
        // move right
    }
    if(upPressed && !downPressed) {
        // move up
    }
    if(downPressed && !upPressed) {
        // move down
    }
}

setInterval(moveCircle, milli);