已废弃的keyCode应替换为哪种方案？HTML双人足球游戏开发求助

keyCode已被Web标准废弃，推荐使用**e.key或e.code**这两个标准属性处理键盘事件，它们更直观且兼容性更可靠。

方案1：使用e.key #

e.key返回按键对应的字符或功能名称（比如字母键返回小写/大写字符，方向键返回ArrowUp/ArrowDown等），适合直接关联按键的输入含义。

修改后的代码如下：

document.onkeyup = function(e){
    if(e.key === 'w'){
        wDown = false;
    }
    if(e.key === 'a'){
        aDown = false;
    }
    if(e.key === 'd'){
        dDown = false;
    }
    if(e.key === 's'){
        sDown = false;
    }
    if(e.key === 'ArrowUp'){
        upDown = false;
    }
    if(e.key === 'ArrowLeft'){
        leftDown = false;
    }
    if(e.key === 'ArrowDown'){
        downDown = false;
    }
    if(e.key === 'ArrowRight'){
        rightDown = false;
    }
}

document.onkeydown = function(e){
    if(e.key === 'w'){
        wDown = true;
    }
    if(e.key === 'a'){
        aDown = true;
    }
    if(e.key === 'd'){
        dDown = true;
    }
    if(e.key === 's'){
        sDown = true;
    }
    if(e.key === 'ArrowUp'){
        upDown = true;
    }
    if(e.key === 'ArrowLeft'){
        leftDown = true;
    }
    if(e.key === 'ArrowDown'){
        downDown = true;
    }
    if(e.key === 'ArrowRight'){
        rightDown = true;
    }
}

方案2：使用e.code #

e.code返回按键的物理位置标识（比如W键对应KeyW，上箭头对应ArrowUp），适合固定物理按键位置的场景（比如游戏中不管键盘布局，按左上角W键就触发动作）。

对应代码修改示例：

document.onkeyup = function(e){
    if(e.code === 'KeyW'){
        wDown = false;
    }
    if(e.code === 'KeyA'){
        aDown = false;
    }
    if(e.code === 'KeyD'){
        dDown = false;
    }
    if(e.code === 'KeyS'){
        sDown = false;
    }
    if(e.code === 'ArrowUp'){
        upDown = false;
    }
    // 其余判断同理替换
}

注意事项 #

• 若需区分大小写，可结合e.shiftKey判断，比如e.key === 'W'且e.shiftKey为true时触发对应逻辑
• 两种属性目前均被主流浏览器（Chrome、Firefox、Edge等）支持，无需担心兼容性问题

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