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

Question

我按照 class 的教程制作了 'frogger-like' 游戏。我已获得以下事件侦听器以使用箭头键控制玩家移动：

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 模块创建和导入 classes，您需要将 allowedKeys 变量附加到 window 对象，以便您可以在 Player class。像这样：

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

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

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

然后您可以从 class 中引用该变量。虽然这不是最好的方法。

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

What are different ways to control keyup functions?

javascript

keyboard

web-applications

canvas

2d-games