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
}

以下是实际代码：

＆＃13;

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

＆＃13;

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

＆＃13;

这个工作得很好，盒子正在移动！但是，它一次只能向一个方向移动！例如，不是左侧和右侧。我该如何解决这个问题？

Answer 1

按键只能一次发生一次。您无法获得多个键的按键事件。即使您按下尽可能接近的两个键，也会在另一个之前检测到一个，并且您将获得两个不同的事件。

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

从按键检测对角移动 - Javascript

1 个答案: