Javascript 如何使用canvas处理多个按键

使用类似于：

window.addEventListener("keydown", handleFn, true);

if keydown == Q
    paddle.left = true;

...

//game loop
if paddle.left == true
    paddle.x -= 1;
    paddle.left = false;

对于多人游戏，我如何能够同时处理多个按键？多人将使用一个键盘，因此像Q键和P键一样，会同时按下，以移动屏幕上的不同对象

我还没有任何

keyup

句柄，不知道这是否能解决这个问题

到目前为止，我的逻辑是：

window.addEventListener("keydown", handleFn, true);

if keydown == Q
    paddle.left = true;

...

//game loop
if paddle.left == true
    paddle.x -= 1;
    paddle.left = false;

---

玩家也可以按住按钮。

我通常是这样做的。首先，需要一个数组来保存keystate

var keys=[];

然后设置事件侦听器

// key events
document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
    keys[e.keyCode] = false;
});

下面所做的是将数组中的一项设置为true或false，对应于该键代码

然后，您只需要使用一些条件来查看按下了什么以及应该做什么

    // check the keys and do the movement.
    if (keys[38]) {
        if (velY > -speed) {
            velY--;
        }
    }

    if (keys[40]) {
        if (velY < speed) {
            velY++;
        }
    }
    if (keys[39]) {
        if (velX < speed) {
            velX++;
        }
    }
    if (keys[37]) {
        if (velX > -speed) {
            velX--;
        }
    }

//检查按键并进行移动。
如果（键[38]）{
如果（速度>速度）{
弗利——；
}
}
如果（键[40]）{
如果（速度<速度）{
vc++；
}
}
如果（键[39]）{
如果（velX<速度）{
velX++；
}
}
如果（键[37]）{
如果（velX>-速度）{
绒毛--；
}
}

下面是一个演示，您可以在其中四处走动，并用多个按键进行操作。使用wasd和箭头键

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 300;

var player1 = {
    x: 50,
    y: 150,
    velY: 0,
    velX: 0,
    color: "blue"
},
player2 = {
    x: 250,
    y: 150,
    velY: 0,
    velX: 0,
    color: "red"
};

var x = 150,
    y = 150,
    velY = 0,
    velX = 0,
    speed = 2,
    friction = 0.98,
    keys = [];

function update() {

    if (keys[38]) {
        if (player1.velY > -speed) {
            player1.velY--;
        }
    }

    if (keys[40]) {
        if (player1.velY < speed) {
            player1.velY++;
        }
    }
    if (keys[39]) {
        if (player1.velX < speed) {
            player1.velX++;
        }
    }
    if (keys[37]) {
        if (player1.velX > -speed) {
            player1.velX--;
        }
    }

    if (keys[87]) {
        if (player2.velY > -speed) {
            player2.velY--;
        }
    }

    if (keys[83]) {
        if (player2.velY < speed) {
            player2.velY++;
        }
    }
    if (keys[68]) {
        if (player2.velX < speed) {
            player2.velX++;
        }
    }
    if (keys[65]) {
        if (player2.velX > -speed) {
            player2.velX--;
        }
    }
    ctx.clearRect(0, 0, 300, 300);
    updatePlayer(player1);
    updatePlayer(player2);
    setTimeout(update, 10);
}

function updatePlayer(player) {
    player.velY *= friction;
    player.y += player.velY;
    player.velX *= friction;
    player.x += player.velX;

    if (player.x >= 295) {
        player.x = 295;
    } else if (player.x <= 5) {
        player.x = 5;
    }

    if (player.y > 295) {
        player.y = 295;
    } else if (player.y <= 5) {
        player.y = 5;
    }

    ctx.fillStyle = player.color;
    ctx.beginPath();
    ctx.arc(player.x, player.y, 5, 0, Math.PI * 2);
    ctx.fill();
}

update();

document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
    keys[e.keyCode] = false;
});

var canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”）；
canvas.width=canvas.height=300；
变量player1={
x:50，
y:150，
结果:0,，
velX:0，
颜色：“蓝色”
},
播放器2={
x:250，
y:150，
结果:0,，
velX:0，
颜色：“红色”
};
var x=150，
y=150，
Vy=0，
velX=0，
速度=2，
摩擦力=0.98，
键=[]；
函数更新（）{
如果（键[38]）{
如果（player1.velY>-速度）{
player1.1--；
}
}
如果（键[40]）{
如果（播放机1.5<速度）{
player1.velY++；
}
}
如果（键[39]）{
如果（播放器1.velX<速度）{
player1.velX++；
}
}
如果（键[37]）{
如果（player1.velX>-速度）{
player1.velX；
}
}
如果（键[87]）{
如果（player2.5>-速度）{
玩家2.5；
}
}
如果（键[83]）{
如果（播放机2.0<速度）{
player2.velY++；
}
}
如果（键[68]）{
如果（播放器2.velX<速度）{
player2.velX++；
}
}
如果（键[65]）{
如果（player2.velX>-速度）{
player2.velX；
}
}
ctx.clearRect（0,0300300）；
更新层（player1）；
更新层（player2）；
设置超时（更新，10）；
}
函数更新层（播放器）{
player.fly*=摩擦力；
player.y+=player.ly；
player.velX*=摩擦力；
player.x+=player.velX；
如果（player.x>=295）{
player.x=295；
}else if（player.x 295）{
player.y=295；
}否则，如果（player.y您可以尝试以下模式：

(function game(){
    // canvas setup ...

    // set up a "hash" of keycodes associated with whether or not they  
    // are pressed, and what should happen when they are pressed.
    var keys = {
        37:{down:false, action:function(){player1.velX--;}},
        38:{down:false, action:function(){player1.velY--;}},
        39:{down:false, action:function(){player1.velX++;}},
        40:{down:false, action:function(){player1.velY++;}},

        65:{down:false, action:function(){player2.velX--;}},
        68:{down:false, action:function(){player2.velX++;}},
        83:{down:false, action:function(){player2.velY++;}},
        87:{down:false, action:function(){player2.velY--;}},
    };

    document.body.addEventListener("keydown", function (e) {
        if(keys[e.keyCode]) keys[e.keyCode].down = true;
    });
    document.body.addEventListener("keyup", function (e) {
        if(keys[e.keyCode]) keys[e.keyCode].down = false;
    });

    (function update() {
        ctx.clearRect(...);

        for(var key in keys)
            if(keys[key].down)
                keys[key].action();

        // redraw players. 

        requestAnimationFrame(update);
    })();
})();

此设置的好处在于，它将操作直接与键相关联，允许您轻松添加更多键操作，并允许在运行时轻松添加/删除按键，甚至在任何给定时间更改特定键的操作，从而提供了极大的灵活性。
我将使用对象哈希表这为我节省了很多时间来修复代码中的一个bug，谢谢。