不同车道方向下Arrow Key按键映射翻转问题求助

原代码存在的问题 #

• 构造函数中拼写错误：this.foward = false 应为 this.right = false，导致右侧控制状态未正确初始化
• 直接覆盖document.onkeydown/document.onkeyup属性，多车辆实例场景下，只有最后创建的实例控制逻辑会生效
• 代码冗余，左右车道的按键映射逻辑重复，不利于维护

修复后的代码实现 #

class Controls {
    constructor(type, laneIndex) {
        this.laneIndex = laneIndex;
        // 正确初始化所有控制状态
        this.forward = false;
        this.left = false;
        this.right = false;
        this.reverse = false;

        // 根据类型绑定控制逻辑
        if (type === "KEYS") {
            this.#addKeyboardListeners();
        } else if (type === "DUMMY") {
            this.forward = true;
        }
    }

    #addKeyboardListeners() {
        // 定义按键映射规则：根据车道索引选择对应的键位-状态映射
        const keyMap = this.laneIndex <= 3 
            ? {
                ArrowLeft: 'left',
                ArrowRight: 'right',
                ArrowUp: 'forward',
                ArrowDown: 'reverse'
            }
            : {
                ArrowLeft: 'right',
                ArrowRight: 'left',
                ArrowUp: 'reverse',
                ArrowDown: 'forward'
            };

        // 按键按下处理函数
        const handleKeyDown = (event) => {
            const stateKey = keyMap[event.key];
            if (stateKey) {
                this[stateKey] = true;
            }
        };

        // 按键抬起处理函数
        const handleKeyUp = (event) => {
            const stateKey = keyMap[event.key];
            if (stateKey) {
                this[stateKey] = false;
            }
        };

        // 使用addEventListener绑定，避免覆盖已有事件
        document.addEventListener('keydown', handleKeyDown);
        document.addEventListener('keyup', handleKeyUp);

        // 可选：实例销毁时移除监听，避免内存泄漏
        this.destroy = () => {
            document.removeEventListener('keydown', handleKeyDown);
            document.removeEventListener('keyup', handleKeyUp);
        };
    }
}

关键优化点 #

1. 状态初始化修正：补全this.right的初始化，修正拼写错误
2. 事件绑定方式改进：使用addEventListener替代直接赋值，支持多车辆实例同时生效
3. 映射逻辑简化：通过对象映射表统一管理键位与控制状态的对应关系，减少重复代码
4. 内存泄漏防护：添加destroy方法，在实例不需要时移除事件监听

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