控制键控功能有哪些不同的方法？

Question

我按照课堂教程制作了一个“类似青蛙的”游戏。为我提供了以下事件侦听器，以使用箭头键控制玩家移动：

document.addEventListener('keyup', function(e) {
    let allowedKeys = {
        37: 'left',
        38: 'up',
        39: 'right',
        40: 'down'
    };
    player.handleInput(allowedKeys[e.keyCode]);
});

我正在尝试编写一些代码来使左、上、右、下移动功能正常工作。在本教程中，他们使用 switch 语句。但是，我不想复制教程中的所有内容（我不会那样学习）。我在想我可以在全局范围内设置“allowKeys”并设置一个变量，但这似乎不起作用（或者我做错了......）有人可以提供任何建议吗？下面是调用handleInput()的地方......

class Player extends Entity{
    constructor() {
        super();
        this.sprite += 'char-boy.png';
        this.x = 2;
        this.y = 5;
    }
    update(dt){

    }
    handleInput(input){
        //<---------code goes here
    }
}

（这是在 cavnas 中渲染）

Answer 1

如果您使用 ES6 模块来创建和导入类，您需要将 allowedKeys 变量附加到窗口对象，以便您可以在 Player 类中访问它。像这样的：

window.allowedKeys = {
    37: 'left',
    38: 'up',
    39: 'right',
    40: 'down'
};

然后在播放器类中，您将能够取消引用窗口变量以提取值：

const allowedKeys = window.allowedKeys;
class Player extends Entity {...

然后您可以从类内部引用该变量。但这不是最好的方法。