entire program pauses when loop is broken

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!

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

as well as we separate content from style same concept applies in different layers of the engine you need to separate the logic from the engine as well. The idea is separation so you can implement/debug much easier. Example code below:

const velocity = {x:0, y:0}
const position = {x:375, y:225}
const keys = { ArrowLeft:false, ArrowRight:false, ArrowUp:false, ArrowDown:false }

function UpdatePlayerInput()
{
   velocity.x = ((+keys.ArrowRight) - (+keys.ArrowLeft)) * 10;
   velocity.y = ((+keys.ArrowDown) - (+keys.ArrowUp)) * 10;
}

function PyhsicsUpdate(){
   position.x += velocity.x / 10;
   position.y += velocity.y / 10;
}

function RenderUpdate() {
    if (document.getElementById("square").style.left !== position.x + "px")
        document.getElementById("square").style.left = position.x + "px";
    
    if (document.getElementById("square").style.top !== position.y + "px")
        document.getElementById("square").style.top = position.y + "px";
}

setInterval(PyhsicsUpdate, 1)
setInterval(RenderUpdate, 10)


document.addEventListener("keydown", event => {
    keys[event.key] = true;
    UpdatePlayerInput();
})
document.addEventListener("keyup", event => {
    keys[event.key] = false;
    UpdatePlayerInput();
})