一个画布多人游戏，我无法按下超过4个按钮。

我正在尝试学习关于canvas和canvas游戏的知识，目前（或多或少地）在按照W3Schools的canvas游戏教程进行学习。

在教程的某个地方，我想到了制作两个玩家，它们都应该使用同一个键盘进行控制（不是在线多人游戏）。

所以我按照教程给出的逻辑，找到了WASD和箭头的键码。

我理解了我的代码的95％，这意味着我不仅仅是复制了所有的代码，还理解了它。 （我很快会回到这个问题上）

我的代码问题是，当我向系统添加另一个玩家时，我可以自由移动他们，只能同时控制一个玩家时，但当我尝试同时移动两个玩家时，它们无法自由移动，我一次只能按下4个按钮。

尝试使用WASD和箭头键来操作方块，并看看我在说什么。

正如我所说，有一部分我不完全理解，可能是这个错误的原因所在？我在代码片段中标出了它。

我的问题是：为什么我不能同时自由移动两个玩家？

整个代码如下，并且我标记了我不理解的部分：

对于最佳体验，请使用全屏功能

{
    function startGame() {
        myGameArea.start();
        myStick = new component(100, 100, 200, 200, "red");
        myStick2 = new component(100, 100, 600, 200, "green");
    }
    var myGameArea = {
        canvas : document.createElement("canvas"),
        start : function() {
            var bodyID = document.getElementById("body");
            this.canvas.width = bodyID.offsetWidth;
            this.canvas.height = (bodyID.offsetHeight);
            this.context = this.canvas.getContext("2d");
            document.body.insertBefore(this.canvas, document.body.childNodes[2]);
            this.interval = setInterval(updateGameArea, (1000 / 60));
            //我不理解的部分
            window.addEventListener('keydown', function (e) {
                myGameArea.keys = (myGameArea.keys || []);
                myGameArea.keys[e.keyCode] = true;
            });
            window.addEventListener('keyup', function (e) {
                myGameArea.keys[e.keyCode] = false; 
            });
            //结束
        },
        clear : function(){
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
    };
    function component(width, height, x, y, color, mLeft, mRight, mUpLeft, mUpRigth){
        this.width = width;
        this.height = height;
        this.x = x;
        this.y = y;
        this.speedX = 0;
        this.speedY = 0;
        this.update = function(){
            ctx = myGameArea.context;
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        };
        this.newPos = function(){
            this.x += this.speedX;
            this.y += this.speedY;
        };
        this.player1 = function(){
            this.speedX = 0;
            this.speedY = 0; 
            if (myGameArea.keys && myGameArea.keys[65]) {this.speedX = -2; } //向左
            if (myGameArea.keys && myGameArea.keys[68]) {this.speedX = 2; }  //向右
            if (myGameArea.keys && myGameArea.keys[87]) {this.speedY = -2; } //向上
            if (myGameArea.keys && myGameArea.keys[83]) {this.speedY = 2; }  //向下
        };
        this.player2 = function(){
            this.speedX = 0;
            this.speedY = 0; 
            if (myGameArea.keys && myGameArea.keys[37]) {this.speedX = -2; } //向左
            if (myGameArea.keys && myGameArea.keys[39]) {this.speedX = 2; }  //向右
            if (myGameArea.keys && myGameArea.keys[38]) {this.speedY = -2; } //向上
            if (myGameArea.keys && myGameArea.keys[40]) {this.speedY = 2; }  //向下
        };
    }
    function updateGameArea(){
        myGameArea.clear();
        myStick.player1();
        myStick.newPos();
        myStick2.player2();
        myStick2.newPos();
        myStick.update();
        myStick2.update();
    }
}

.nm{
    margin: 0;
    padding: 0;
}
canvas{
    display: block;
    background-color: lightgray;
}