我的代码(简化为演示bug)由一个键盘类和一个键类组成，前者处理在特定位置绘制键，并根据一些逻辑设置它们的 colored颜色 ，后者处理绘制键并跟踪其他属性.
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>在这种情况下，逻辑很简单，因此似乎很容易将其委托给key类，但在我的实际项目中，它更复杂，让按键和键盘以这种方式通信最有意义.当代码段运行时，预期的行为是按下一个键时会改变 colored颜色 ，与所持键的数量无关.
这似乎适用于两个键，但是，如果持有两个以上的键，则该行为是错误的，并且与持有的其他键可能会改变 colored颜色 或不改变 colored颜色 不一致.这是一个潜在的错误.还是我忽略了什么？
如果这是一个错误，任何关于实现预期行为的替代策略的建议都将不胜感激.