Перемещение по диагонали от обнаружения при нажатии на кнопку - Javascript

Question

Я хочу, чтобы двигаться вокруг коробки с помощью клавиш со стрелками, как это (упрощенный):

if(Key Pressed = Left Arrow) { 
    move box to left 
} 
if(Key Pressed = Up Arrow) { 
    move box up 
} 
if(Key Pressed = Right Arrow) { 
    move box to right 
} 

Вот фактический код:

var left = parseInt(document.getElementById("swag").style.left); 
 
var topSwag = parseInt(document.getElementById("swag").style.top); 
 

 
window.addEventListener("keydown", steerAround, false); 
 

 
function steerAround(a) { 
 
    if (a.keyCode == "37") { 
 
     // left arrow key 
 
     left--; 
 
     document.getElementById("swag").style.left = left + "px"; 
 
     
 
    } 
 
    if (a.keyCode == "38") { 
 
     // up arrow key 
 
     topSwag--; 
 
     document.getElementById("swag").style.top = topSwag + "px"; 
 
    } 
 
    if (a.keyCode == "39") { 
 
     // right arrow key 
 
     left++; 
 
     document.getElementById("swag").style.left = left + "px"; 
 
    } 
 
}

<div id="swag" style="position:absolute; top:100px; left:100px; width:100px; height:100px; background-color:#99CCCC">

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

Answer 1

Прессы для ключей происходят только по одному. Вы не можете получить событие нажатия клавиши для нескольких клавиш. Даже если вы нажмете две клавиши как можно ближе, одна будет обнаружена перед другой, и вы получите два отдельных события.

Чтобы обработать несколько ключей, вам нужно посмотреть события keydown и keyup и следить за тем, какие клавиши нажаты. Затем в заданный интервал вы перемещаете поле в соответствии с нажатыми клавишами.