p5.js 当同时按下 2 个以上的键时，keyIsDown() 行为不一致

Question

我的代码（减少以演示错误）由一个键盘 class 组成，它处理特定位置的绘图键并根据一些逻辑设置它们的颜色，以及一个键 class 处理绘制键并跟踪其他属性。

class key {
    constructor (w, h, code, color) {
        this.w = w;
        this.h = h;
        this.code = code;
        this.color = color;
        this.isDown = false;
    }
    
    draw(x, y) {
        strokeWeight(2);
        stroke("#c8c8c8");
        fill(this.color);
        rect(x, y, this.w, this.h, 7);
    }
    
    update() {
        this.isDown = keyIsDown(this.code);
    }
}

class Keyboard {
    constructor(keySize) {
        this.keySize = keySize;
        this.keycodes = [81, 87, 69, 82, 84, 89, 85, 73, 79, 80, 65, 83, 68, 70, 71, 72, 74, 75, 76, 90, 88, 67, 86, 66, 78, 77, 32, 18];
        
        this.altWidth = keySize * 1.3;
        this.spaceWidth = keySize * 7;
        
        this.keys = new Array(28);
        for (let i = 0; i < 26; i++) {
            this.keys[i] = new key(keySize, keySize, this.keycodes[i], "#505050");
        }
        this.keys[26] = new key(this.spaceWidth, this.keySize, this.keycodes[26], "#505050");
        this.keys[27] = new key(this.altWidth, this.keySize, this.keycodes[27], "#505050");
    }
    
    draw(x, y) {
        let rowOffsets = [0, 2 * this.keySize / 7, this.keySize, this.keySize * 1.6];
        
        /* draws row 1 of letter keys */
        for (let i = 0; i < 10; i++) {
            this.keys[i].draw(x + rowOffsets[0] + i * (this.keySize + this.keySize / 7), y);
        }
        /* draws row 2 of letter keys */
        for (let i = 0; i < 9; i++) {
            this.keys[i + 10].draw(x + rowOffsets[1] + i * (this.keySize + this.keySize / 7), y + this.keySize + this.keySize / 7);
        }
        /* draws row 3 of letter keys */
        for (let i = 0; i < 7; i++) {
            this.keys[i + 19].draw(x + rowOffsets[2] + i * (this.keySize + this.keySize / 7), y + 2 * (this.keySize + this.keySize / 7));
        }
        
        /* draws space bar */
        this.keys[26].draw(x + rowOffsets[3] + this.altWidth + this.keySize / 7, y + 3 * (this.keySize + this.keySize / 7));
        
        /* draws left alt */
        this.keys[27].draw(x + rowOffsets[3], y + 3 * (this.keySize + this.keySize / 7));
    }
    
    update() {
        for (let i = 0; i < 26; i++) {
            this.keys[i].update();
            if (this.keys[i].isDown) {
                this.keys[i].color = "#a05050";
            } else {
                this.keys[i].color = "#505050";
            }
        }
    }
}


let canvasWidth = 720;
let canvasHeight = 480;
let keySize = 50;
let k = new Keyboard(keySize);

function setup() {
    frameRate(60);
    createCanvas(canvasWidth, canvasHeight);
}

function draw() {
    background("#302030");
    k.update();
    k.draw(50, 50);
}

<!DOCTYPE html>
<html lang="en">

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
      <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
    </body>

</html>

在这种情况下，逻辑很简单，因此简单地将其委托给密钥似乎很诱人 class，但在我的实际项目中，它更复杂，并且拥有密钥和键盘以这种方式通信。当代码片段为运行时，预期的行为是按键在按下时改变颜色，与按下的按键数量无关。

这似乎适用于 2 个键，但是，如果持有 2 个以上的键，则该行为有错误并且与其他键不一致，这些键可能会改变颜色。这是 p5.js 的潜在错误，还是我忽略了什么？

如果这是一个错误，我们将不胜感激任何关于实现所需行为的替代策略的建议。

Answer 1

我怀疑这种行为是键盘限制，它限制了键盘可以识别的键数。我在具有相同目的和行为的 another site 上进行了测试。

我的键盘可以识别 5 个以上的键。

此外，我认为没有办法使这个工作。

How do I remove the limit on PC keyboard button presses?

p5.js 当同时按下 2 个以上的键时，keyIsDown() 行为不一致

p5.js keyIsDown() behaving inconsistently when more than 2 keys are pressed at once

javascript

p5.js