如何同时使用两个 onkeydown 事件？

Question

I'm trying to build a pong game, and I want the boards to be able to move simultaneously (one with the 's' and 'w' and the other with the up and down arrows).

            function movePlayer1(event) {
                if (player1.y > 7.5 && player1.y < 390) {
                    switch (event.keyCode) {
                        case 83: player1.y += player1.v;
                            break;
                        case 87: player1.y -= player1.v;
                            break;
                    }
                }
                else if (player1.y <= 7.5) {
                    switch (event.keyCode) {
                        case 83: player1.y += player1.v;
                            break;
                    }
                }
                else if (player1.y >= 390) {
                    switch (event.keyCode) {
                        case 87: player1.y -= player1.v;
                            break;
                    }
                }
            }
            document.addEventListener("keydown", movePlayer1, false);

            function movePlayer2() {
                if (player2.y > 7.5 && player2.y < 390) {
                    switch (event.keyCode) {
                        case 40: player2.y += player2.v;
                            break;
                        case 38: player2.y -= player2.v;
                            break;
                    }
                }
                else if (player2.y <= 7.5) {
                    switch (event.keyCode) {
                        case 40: player2.y += player2.v;
                            break;
                    }
                }
                else if (player2.y >= 390) {
                    switch (event.keyCode) {
                        case 38: player2.y -= player2.v;
                            break;
                    }
                }
            }
            document.addEventListener("keydown", movePlayer2, false);

I've tried putting them in one function instead but it didn't help.

Answer 1

There are two things make you code behave not as you expect.

Autorepeating works only for last pressed key. Say if you press "A" and hold it autorepeating will generate keydown events for "A". But if you press "B" and hold both autorepeating will generate sequential keydown automatically for "B" only. On the other side I believe for MacOS it will not autorepeat at all so better not rely on this.

But actually "keyup" are triggered correctly even if mutliple keys were pressed and are hold.

So you can refactor your code: instead of relying on keyup/keydown only you need some timer and each player model will be

{
  directionIsUp: true | false,
  isMoving: true | false
}

So on keydown you are setting appropriate direction and make isMoving to be true . And on keyup you are making isMoving to be false.

And timer will re-render your battlefield accordingly to those models - either moving player or keeping it at the same place.