从按键检测对角线移动- Javascript

Move diagonally from keypress detection - Javascript

本文关键字：移动 Javascript 对角线 检测      更新时间：2023-09-26

我想用方向键移动一个框，像这样(简化):

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">

这几乎可以正常工作，盒子在移动!然而，它一次只能朝一个方向移动!例如，不是既向左又向上。我该如何解决这个问题?

一次只能按一个键。你不能获得多于一个键的按键事件。即使你同时按下两个键，其中一个也会在另一个之前被检测到，你会得到两个独立的事件。

要处理多个键，您需要查看keydown和keyup事件，并跟踪按下了哪些键。然后在给定的间隔内，根据当前按下的键移动框。

相关文章：