KeyboardEvent 的 code 属性最可靠，因其返回物理按键标识（如"KeyW"），与布局、语言、Shift/CapsLock无关；key 属性则依赖当前输出字符，易变。
KeyboardEvent 的 code 属性是实现游戏键位自定义映射最可靠的基础——它返回物理按键的标识（如 "KeyW"、"ArrowUp"），与键盘布局和当前语言无关，避免了 key 属性因 CapsLock、Shift 或输入法导致的值变化问题。
为什么优先用 code 而不是 key
code 描述的是“按下了哪个位置的键”，比如美式键盘左下角的 Ctrl 键始终返回 "ControlLeft"；而 key 描述的是“这个按键此刻输出了什么字符”，按下同一个键，开启 CapsLock 时可能返回 "W"，关闭时返回 "w"，切换到法语键盘甚至可能返回 "&"。游戏控制需要稳定识别物理操作，不能依赖输出内容。
建立可配置的键位映射表
定义一个对象，把游戏动作名（如 "moveUp"）映射到一组 code 值，支持多键绑定（例如 WASD 和方向键都控制移动）：
const keyMap = {
moveUp: ["ArrowUp", "KeyW"],
moveDown: ["ArrowDown", "KeyS"],
moveLeft: ["ArrowLeft", "KeyA"],
moveRight: ["ArrowRight", "KeyD"],
jump: ["Space", "Digit1"],
shoot: ["MouseLeft"] // 可扩展支持鼠标
};
</font>
<p>注意：<code>MouseLeft</code> 不是标准 KeyboardEvent.code，此处仅为示意；真实项目中需结合 <code>MouseEvent</code> 单独处理鼠标。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill8272" title="anything-to-html">anything-to-html</a>
<p>将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<H3>监听并匹配按键事件</H3>
<p>在 <code>keydown</code> 和 <code>keyup</code> 中读取 <code>e.code</code>，查表触发对应动作。推荐使用 <code>Set</code> 或预构建反向索引提升性能：</p>
<ul>
<li>用 <code>new Set(keyMap.moveUp)</code> 快速判断是否属于该动作的键</li>
<li>避免每次遍历整个映射表；可预先生成 <code>codeToActions = { "ArrowUp": ["moveUp"], "KeyW": ["moveUp"], ... }</code></li>
<li>监听时加 <code>{ passive: false }</code> 并调用 <code>e.preventDefault()</code> 防止滚动或文本输入干扰（尤其在 Canvas 全屏游戏里）</li>
</ul>
<H3>保存与恢复用户自定义设置</H3>
<p>允许玩家在设置界面重新分配键位：监听一次按键（<code>keydown</code>），取其 <code>e.code</code>，存入 localStorage：</p>
<font color="#666">
<pre class="brush:php;toolbar:false;">
function bindAction(action, e) {
if (e.type === "keydown" && e.code) {
localStorage.setItem(`game_key_${action}`, e.code);
keyMap[action] = [e.code]; // 简化为单键，也可支持多键队列
}
}
页面加载时读取 localStorage 覆盖默认映射，实现个性化持久化。注意校验 e.code 是否合法（如排除 "Unidentified"）。
