Why when I press two keys simultaneously and stop pressing one, the other stops working?

Question

I am working with keyboard events in Javascript. My goal is to be able to move images on a canvas with the keyboard arrows, but there is a problem: when I press two keys simultaneously and then release one of them, the key I left pressed does not work, it crashes and therefore the image It does not move. I'm already using the keyup and keydown events and I managed to find a way to detect when two keys are pressed at the same time, however I can't solve this problem. Can anyone help me? Thank you.

this is what i tried

function keyPressed(event) {
  keysPressed[event.key] = true;
  
  switch(event.key) {
    case 'ArrowLeft':
      playerPetSelected.speedX = -5;
      break;
    case 'ArrowRight':
      playerPetSelected.speedX = 5;
      break;
    case 'ArrowDown':
      playerPetSelected.speedY = 5;
      break;
    case 'ArrowUp':
      playerPetSelected.speedY = -5;
      break;
  }
  
  if (keysPressed['ArrowLeft'] && event.key == 'ArrowDown') {
    playerPetSelected.speedX = -3.5;
    playerPetSelected.speedY = 3.5;
  }
  if (keysPressed['ArrowDown'] && event.key == 'ArrowLeft') {
    playerPetSelected.speedY = 3.5;
    playerPetSelected.speedX = -3.5;
  }
  if (keysPressed['ArrowLeft'] && event.key == 'ArrowUp') {
    playerPetSelected.speedX = -3.5;
    playerPetSelected.speedY = -3.5;
  }
  if (keysPressed['ArrowUp'] && event.key == 'ArrowLeft') {
    playerPetSelected.speedY = -3.5;
    playerPetSelected.speedX = -3.5;
  }
  if (keysPressed['ArrowUp'] && event.key == 'ArrowRight') {
    playerPetSelected.speedY = -3.5;
    playerPetSelected.speedX = 3.5;
  }
  if (keysPressed['ArrowRight'] && event.key == 'ArrowUp') {
    playerPetSelected.speedX = 3.5;
    playerPetSelected.speedY = -3.5;
  }
  if (keysPressed['ArrowDown'] && event.key == 'ArrowRight') {
    playerPetSelected.speedY = 3.5;
    playerPetSelected.speedX = 3.5;
  }
  if (keysPressed['ArrowRight'] && event.key == 'ArrowDown') {
    playerPetSelected.speedX = 3.5;
    playerPetSelected.speedY = 3.5;
  }
}
  
function stopMovement(event) {
  keysPressed[event.key] = false;
  playerPetSelected.speedX = 0;
  playerPetSelected.speedY = 0;
}

The parts where I modify the 'playerPetSelected' object are so that the images can be moved on the canvas.

I was hoping I wouldn't have this problem anymore because here I was able to find a way to detect when two keys are pressed at the same time, but it only helped me to manipulate the speed of movement on the canvas when two keys are pressed simultaneously.

Answer 1

Here is how I would do it... Using an object for the speed in x/y. Look how the conditions are easier to read. That handles all possible arrow combinations.

 window.addEventListener("keydown", keyPressed) window.addEventListener("keyup", keyUnpressed) let keysPressed = {} function keyPressed(event) { keysPressed[event.key] = true getActiveKeys() } function keyUnpressed(event) { keysPressed[event.key] = false getActiveKeys() } function getActiveKeys() { const activeKeys = Object.keys(keysPressed).map((key) => keysPressed[key]? key: null).filter((key) => key) const speed = { x: 0, y: 0 } if(keysPressed["ArrowUp"]){ speed.y = 5 } if(keysPressed["ArrowDown"]){ speed.y = -5 } if(keysPressed["ArrowLeft"]){ speed.x = -5 } if(keysPressed["ArrowRight"]){ speed.x = 5 } // Gas and break conditions if(keysPressed["ArrowUp"] && keysPressed["ArrowDown"]){ speed.y = 0 } if(keysPressed["ArrowLeft"] && keysPressed["ArrowRight"]){ speed.x = 0 } // Diagonal condition if(speed.x && speed.y){ speed.x *= 0.7 speed.y *= 0.7 } document.querySelector("#activeKeys").innerText = JSON.stringify(activeKeys) document.querySelector("#xSpeed").innerText = speed.x document.querySelector("#ySpeed").innerText = speed.y }

 <div>Keys pressed: <span id="activeKeys">[]</span></div> <div>Speed X: <span id="xSpeed">0</span></div> <div>Speed Y: <span id="ySpeed">0</span></div>

Run that snippet in full page mode, else the page will scroll. Or look at CodePen