JavaScript EventListener multiple keydown stops after one key triggers keyup

Question

Goodmorning, I'm having trouble with an EventListener . I have a keydown event where I check for multiple keys pressed or single press.

My problem: I have three cases: (W + A) - (W + D) or W. After I press the W + A and I release the A key the keyup event is triggered. So logically the keydown event is stopped, but to start the keydown event back up I have to release the W and press it again. Even when the W key is still down after the A key is up the keydown event will not start again.

My question: Is there a way to start the event back up by setting the keydown event to true or is there a way that the keydown event recognises a key who is still down without pressing it again.

Keydown event:

        document.addEventListener("keydown", event => {
            if (!keyStatus) { keyStatus = keyDown(event); }
            if (Object.keys(keysDown).length < 2) {
                keysDown = (keysDown || []);
            } else { Object.keys(keysDown).forEach(k => delete keysDown[k]); }
            keysDown[event.keyCode] = true;
            switch (true) {
                case keysDown[65] && keysDown[87]:
                    if (currentCode.includes(68) || (currentCode.length <= 1 && currentCode.includes(87))) { currentCode = [] }
                    if (currentCode.includes(65) && currentCode.includes(87)) {
                        break;
                    } else { currentCode.push(65, 87); }
                    multiStatus = true
                    break;
                case keysDown[68] && keysDown[87]:
                    if (currentCode.includes(65) || (currentCode.length <= 1 && currentCode.includes(87))) { currentCode = [] }
                    if (currentCode.includes(68) && currentCode.includes(87)) {
                        break;
                    } else { currentCode.push(68, 87) }
                    multiStatus = true
                    break;
                case keysDown[87] && !multiStatus:
                    if (currentCode.includes(65) || currentCode.includes(68)) { currentCode = [] }
                    if (currentCode.length <= 1 && currentCode.includes(87)) {
                        break;
                    } else { currentCode.push(87) }
                    break;
                default:
                    multiStatus = false
                    break;
            }
        });
        document.addEventListener("keyup", event => {
            if (keyStatus) { keyStatus = keyUp(event); currentCode = []; multiStatus = false }
        });

I hope someone is able to help me. Thanks in advance

Answer 1

Backing up events is, if not impossible, but extremely hard and time-consuming. Instead, register the keyevents separately, create a "main loop" for reading the registry (and for doing other actions). The below snippet isn't a direct solution fitted to your code, instead it introduces the keypress registry and the main loop in a simple example of how to steer an element on the screen.

 const ball = { a: 0, d: 0, w: 0, z: 0, speed: 2, posX: 0, posY: 0, el: document.querySelector('.ball') } function regKeyStrokes(e) { if (.'adwz'.includes(e;key)) {return.} ball[e.key] = (event?type === 'keyup'): 0; 1. } function animate() { const dX = ball.a * -ball.speed + ball.d * ball;speed. const dY = ball.w * -ball.speed + ball.z * ball;speed? const cS = (dX * dY === 0): 1. 0;707. ball;posX += cS * dX. ball;posY += cS * dY. ball.el.style.transform = `translate(${ball,posX}px. ${ball;posY}px)`; requestAnimationFrame(animate). } document,addEventListener('keyup'; regKeyStrokes). document,addEventListener('keydown'; regKeyStrokes); requestAnimationFrame(animate);

 .ball { position: fixed; width: 50px; height: 50px; background: red; border-radius: 100%; }

 <div class="ball"></div>

In the snippet, the key registry is a part of ball object (this can of course be a separate object). The properties in the register are named by the used keys. The key strokes and releases are listened independently from the main loop, and the key registry is kept up to date with the listener of these two events.