В Javascript, как я могу узнать, нажимает ли пользователь две клавиши одновременно?

Question

Как в Javascript узнать, нажимает ли пользователь две клавиши одновременно?

Например, я нарисовал круг в середине экрана. Я хочу переместить его вверх, пока пользователь удерживает нажатой стрелку вверх и вправо, пока пользователь удерживает нажатой стрелку вправо. Эта часть работает легко. Если пользователь держит стрелки вверх и вправо, я хочу переместить круг по диагонали, вверх и вправо.

Похоже, что это невозможно с базовой обработкой событий Javascript, но наверняка кто-то нашел способ обойти / hack / улучшение.

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. Вы можете просто немного поиграть на левой стрелке и еще немного по стрелке вверх. При включении переключите соответствующий бит назад.

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);

Answer 3

Может быть, вы можете сделать это, отслеживая события нажатия клавиш и нажатия клавиш для каждой клавиши, и вы узнаете, удерживаются ли две клавиши одновременно.

Пример псевдокода:

var keydown = {};

function onkeydown(event) {
   keydown[event.key] = true;
}

function onkeyup(event) {
   keydown[event.key] = false;
}

// in some function at some other places

if (keydown['up'] && keydown['right']) {
  move_diagonal('up', 'right');
}
elseif (keydown['up'] && keydown['left']) {
  move_diagonal('up', 'left');
}
elseif .. blah blah

Answer 4

События клавиатуры Javascript запускаются при нажатии и нажатии клавиши, но не содержат дополнительной информации о маске клавиатуры, чтобы определить, одновременно ли нажимаются другие клавиши.