游戏开发代码中keys[keyDownEvent.key]的.key属性含义与功能问询

一、代码是否会给keys对象添加新属性？ #

是的，这也是你打印结果不符合预期的核心原因。你初始化的keys对象属性是arrowUp、arrowDown这类小写开头的驼峰名，但键盘事件对象的.key属性返回的是按键的标准大写开头名称（比如上箭头对应ArrowUp），所以执行keys[keyDownEvent.key] = true时，会给keys新增ArrowUp、ArrowDown这些未初始化过的属性，原来的arrowUp等属性根本不会被修改。

二、.key属性的作用与功能 #

keyDownEvent（键盘事件对象）的.key属性，用来返回当前按下/松开的按键对应的标准字符串标识：

• 方向键上/下/左/右对应ArrowUp/ArrowDown/ArrowLeft/ArrowRight
• 字母键返回小写字母（比如按A键返回a）
• 特殊按键比如空格返回 、回车键返回Enter、ESC键返回Escape

它的核心作用是让你精准识别用户操作的是哪个按键，从而对应执行响应逻辑。

三、为什么打印keys[keyDownEvent.key]没清晰结果？ #

因为你初始化的属性和事件中修改的属性不是同一个：比如按下上箭头时，你打印的是新增的keys.ArrowUp，但你以为修改的是初始化的keys.arrowUp，两者是完全独立的对象属性，自然看不到预期的关联结果。

四、代码修正方案 #

把keys对象的初始属性名改成和.key返回值一致的标准名称，就能正确跟踪按键状态：

// Create keys object and initialise keys press as false
let keys = {
    ArrowUp: false,
    ArrowDown: false,
    ArrowLeft: false,
    ArrowRight: false
}
// Create event listeners
document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);

function keyDown(keyDownEvent) {
    keys[keyDownEvent.key] = true;
}

function keyUp(keyUpEvent) {
    keys[keyUpEvent.key] = false;
}

五、这段代码的实际用途 #

它是游戏开发中常见的按键状态跟踪逻辑：通过记录每个按键的按下（true）/松开（false）状态，你可以在游戏主循环里随时检查这些状态，实现“按住方向键持续移动角色”这类交互，而不是按一次按键只触发一次动作。

内容的提问来源于stack exchange，提问作者generateGeorgina