javascript - 循环中断时整个程序暂停

Question

我有这个进行方形移动的代码，但是当我例如按右箭头键然后按左箭头键并释放右箭头键时，正方形会暂停一段时间然后只是向左移动。
有没有办法摆脱这种暂停？
这是我现在拥有的代码:

let velocity = 10
let x = 375
let y = 225

setInterval(function(){
    document.getElementById("square").style.left = x + "px";
    document.getElementById("square").style.top = y + "px";
}, 1)

var direction = ""
function currentDirection(movingToDirection){
    if(movingToDirection != direction){
        return true
    }
    else {
        return false
    }
}

function Sup() {
    if(currentDirection("Sup")){
        direction = "Sup";
        var Sloopup = setInterval(function(){
            y -= velocity/10
        }, 1)

        window.Sloopup = Sloopup
    }
}

function Sdown() {
    if(currentDirection("Sdown")){
        direction = "Sdown";
        var Sloopdown = setInterval(function(){
            y += velocity/10
        }, 1)

        window.Sloopdown = Sloopdown
    }
}

function Sleft() {
    if(currentDirection("Sleft")){
        direction = "Sleft";
        var Sloopleft = setInterval(function(){
            x -= velocity/10
        }, 1)

        window.Sloopleft = Sloopleft
    }
}

function Sright() {
    if(currentDirection("Sright")){
        direction = "Sright";
        var Sloopright = setInterval(function(){
            x += velocity/10
        }, 1)

        window.Sloopright = Sloopright
    }
}

function Break(Function) {
    direction = ""
    if (Function = "Sup") {
        clearInterval(window.Sloopup)
    } if (Function = "Sdown") {
        clearInterval(window.Sloopdown)
    } if (Function = "Sleft") {
        clearInterval(window.Sloopleft)
    } if (Function = "Sright") {
        clearInterval(window.Sloopright)
    }
}

document.addEventListener("keydown", event => {
    if(event.key==="ArrowUp") {Sup()}
    if(event.key==="ArrowDown") {Sdown()}
    if(event.key==="ArrowLeft") {Sleft()}
    if(event.key==="ArrowRight") {Sright()}
})
document.addEventListener("keyup", event => {
    if(event.key==="ArrowUp") {Break("Sup")}
    if(event.key==="ArrowDown") {Break("Sdown")}
    if(event.key==="ArrowLeft") {Break("Sleft")}
    if(event.key==="ArrowRight") {Break("Sright")}
})

我还有一个在线示例:
Online example
非常感谢任何帮助!

Answer 1

尝试这个:

var Keys = {
  up: false,
  down: false,
  left: false,
  right: false
};

let y = 10;
let x = 10;

document.addEventListener("keydown", (event) => {
  if (event.key === "ArrowLeft") Keys.left = true;
  else if (event.key === "ArrowUp") Keys.up = true;
  else if (event.key === "ArrowRight") Keys.right = true;
  else if (event.key === "ArrowDown") Keys.down = true;
});

document.addEventListener("keyup", (event) => {
  if (event.key === "ArrowLeft") Keys.left = false;
  else if (event.key === "ArrowUp") Keys.up = false;
  else if (event.key === "ArrowRight") Keys.right = false;
  else if (event.key === "ArrowDown") Keys.down = false;
});

setInterval(() => {
  if (Keys.up) {
    y -= 1;
  } else if (Keys.down) {
    y += 1;
  }

  if (Keys.left) {
    x -= 1;
  } else if (Keys.right) {
    x += 1;
  }
}, 1);

setInterval(() => {
  document.getElementById("app").style.left = x + "px";
  document.getElementById("app").style.top = y + "px";
}, 1);

清除并设置新间隔时可能会有一些延迟。这里我设置了 2 个持续监听 keydown 的间隔，你需要在游戏结束后清除它
这是 sandbox