javascript - 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 .