entire program pauses when loop is broken

Question

I have this code which makes a square move, but when i for example press the right arrow key then the left arrow key and release the right arrow key, the square pauses for a while and then just moves the left.

is there a way to get rid of this pause?

this is the code i have now:

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

and I also have a online example:

Online example

Any help is very appreciated!

Answer 1

Try this:

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);

There might be some delay when you clear and set a new interval. Here I set 2 interval that keep listening to keydown, which you will need to clear later when the game ends

Here's the sandbox

Answer 2

so below my suggestion if I understand well your problem:

document.addEventListener("keydown", event => {

    // the issue occurs here, you have to disable all current keydown event
    Break("Sup");Break("Sdown");Break("Sleft");Break("Sright");

    if(event.key==="ArrowUp") {Sup()}
    if(event.key==="ArrowDown") {Sdown()}
    if(event.key==="ArrowLeft") {Sleft()}
    if(event.key==="ArrowRight") {Sright()}
})

BTW i tested it & it works, i hope that it helps you.

Good luck!