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

Question

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

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

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

6

javascript events keyboard

задан Doug Neiner 7 January 2010 в 04:31

4 ответа

Javascript имеет onkeydown, и onkeyup события. Для левой стрелки вы можете просто выполнить небольшую скрипку в режиме onkeydown, а для верхней стрелки - еще одну скрипку. На клавиатуре, скрипт вернул соответствующий бит.

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

4

ответ дан 8 December 2019 в 16:03

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

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

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

2

ответ дан 8 December 2019 в 16:03

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

1

ответ дан 8 December 2019 в 16:03

Другие вопросы по тегам:

javascript events keyboard

Похожие вопросы:

score 8 · Accepted Answer

Вот что нужно сделать концептуально (думаю, это называется псевдокодом):

Начать с чего-то подобного:

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

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

Затем на каждом событии keydown проверять, не нажата ли клавиша влево, вверх и т.д., и поворачивать ее переменную от 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';
  }
}

Браузер будет (должен) запускать отдельное событие keyydown/keyup для каждой клавиши, даже если она нажата "одновременно".

Рабочий пример

Crescent Fresh представляет собой полный пример на JSBin. Обязательно посетите редактируемую версию , а также поиграйте с кодом.