JavaScript中的按键检测

Question

我正在尝试对游戏进行按键检测，这里的代码有些起作用，但是问题是它不允许我一次按下我的游戏所需的多个按键。它仅允许随时按下一个键并将球移向该方向。有没有办法一次允许多次按键？var key = 0;var pos = false;var posX = 0;var posY = 0;var jumpSpeed = 4;var ball = new Image();ball.src = 'Ball.png';var canvas = document.getElementById('bg');var ctx = canvas.getContext('2d');document.onkeydown = function (e) {        pos = true;        key = window.event ? e.keyCode : e.which;}document.onkeyup = function (e) {        pos = false;}setInterval(function () {    if (pos == false) return;    else if (key == 65) posX -= 2;    else if (key == 87) posY -= jumpSpeed;    else if (key == 68) posX += 2;}, 1);setInterval(function () {    ctx.drawImage(ball, posX, posY);}, 1);

Answer 1

通常，您的代码只能处理一个键，因为变量key只能有一个键代码。每当您为其分配新值时，先前的值都会被覆盖。

一种解决方案是使用以下Set关键代码：

var keys = new Set;

document.onkeydown = function (e) {

    keys.add(window.event ? e.keyCode : e.which);

}

document.onkeyup = function (e) {

    keys.delete(window.event ? e.keyCode : e.which);

}

setInterval(function () {

    if (keys.has(65)) posX -= 2;

    if (keys.has(87)) posY -= jumpSpeed;

    if (keys.has(68)) posX += 2;

}, 1);

注意：请务必阅读mdn上的弃用说明，并停止使用keyCode或which。改为使用code。