Как сделать выполнение двух событий одновременно при зажатии?

Question

[Ingernirated]

Есть три функции, 2 из которых забиты на keydown, которые добавляют ширину и высоту, но они одновременно не могут работать, так же после нажатия другой кнопки, не отпуская первую, первая функция останавливается
Как реализовать, одновременное срабатывание двух кнопок и двух функций не зависимо от того, в какой очередности всё происходит.
Например

function size(e) {
if(e.keyCode == 20) {
      doc.elem.width++;
}
if(e.keyCode == 21) {
      doc.elem.height++;
}
// А как сделать третью, где 
doc.elem.width++;
doc.elem.height+;
// сработают одновременно, вариант с 
if(e.keyCode == 20 && e.keyCode ==21) {
....
}
// не работает и так же в нем 2-ая кнопка перебивает первую и выполняется уже другая, остановив первую
}
document.body.addEventListener("keydown", size);

Answer 1

[Ди Ма]

var events = {};
var w = 0, h = 0;

// когда кнопка зажата
document.addEventListener('keydown', function (e) {
	events[e.keyCode] = true; // добавляем код кнопки в объект
	action(); // вызываем функцию "действия"
});

document.addEventListener('keyup', function (e) {
	// удаляем код кнопки из объекта только когда клавиша отпущена
	events[e.keyCode] = false; 
	console.log(w, h);
});

// а тут теперь можно писать инструкции для любых комбинаций
function action () {
	if (events[38]) w++;
	if (events[39]) h++;
	if (events[38] && events[39]) console.log('обе кнопки');
}

Comments

[Ingernirated]

спасибо, весьма интересный вариант
только при отжимании одной из кнопок, если зажаты обе, останавливается функция, даже, если мы всё так же хотя бы одну держим зажатой, как быть?

[Ди Ма]

Ingernirated: Не останавливается! Проверил еще раз. Все работает

[Ди Ма]

Ingernirated: И вообще, "останавливается"- не правильное слово. Ведь события keydown при зажатой клавише генерируются постоянно новые, а значит при каждом событии функция action вызывается по новой.

[Ingernirated]

Ди Ма: попробуйте нажать одну кнопку, после вторую(уже две зажаты) и вторую отпустить.
в этом случае у меня всё останавливается (

[Ingernirated]

Ди Ма: https://jsfiddle.net/4qn2Lnht/
вот пример, кнопки W,S,A,D
Можно как-то сгладить и сделать этот процесс не таким топорным, что обязательно будет остановка и движение не такое грубоватое?

[Ди Ма]

Ingernirated:
вот с такими условиями

function action () {
	if (events[38] && !events[39]) console.log('первая');
	if (events[39] && !events[38]) console.log('вторая');
	if (events[38] && events[39]) console.log('обе кнопки');
}

вот такой лог.


Зажимаю первую, потом вторую, потом отпускаю первую, потом снова обе, итд..

Про W,S,A,D, сейчас попробую написать)

[Ingernirated]

Ди Ма: я же пример скинул в том сообщении, если зажать первую, после вторую и отпустить вторую, зажатая первая ничего уже не делает

[Ди Ма]

Ingernirated: Написал) Есть вк?

[Ingernirated]

Ди Ма:
https://jsfiddle.net/4qn2Lnht/2/
вот пример, кнопки W,S,A,D
Если зажать S, после S+D, а после отпустить D, но зажатая S, он останавливается

[Ди Ма]

Ingernirated: https://jsfiddle.net/4qn2Lnht/3/
Вот! Теперь уж точно работает, и плавно, без обрывов

[Ingernirated]

Ди Ма:
круто, спасибо, будем осваивать )