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。