使用ArrowKeys控制元素移动时ArrowUp按键失效问题求助

我正在研究用键盘箭头键控制屏幕元素移动，采用if语句实现逻辑。浏览器中其他箭头键均能正常控制元素移动，但ArrowUp按键对应的元素上移功能失效，代码逻辑与其他按键一致却无法排查出原因。按下按键后元素会在DOM中创建并执行移动操作，代码示例如下：

const output = document.querySelector('.output');
const game = {x:0, y:0, speed:10, ele:null}

document.addEventListener('keydown', (event) => {
console.log(event.key);

if(!game.ele) {
  game.ele = maker();
}


if(event.key == 'ArrowRight') {
  game.x+= game.speed;
  updatePosition();
}

if(event.key == 'ArrowLeft') {
  game.x-= game.speed;
  updatePosition();
}

if(event.key == 'ArrowDown') {
  game.y+= game.speed;
 updatePosition();
}

if(event.key == 'ArrowUP') {
  game.y-= game.speed;
  updatePosition();
}

}) 


function updatePosition() {
  game.ele.style.left = game.x + 'px';
  game.ele.style.top = game.y + 'px';

}

排查思路 #

• 修正大小写错误：代码中判断上箭头的条件是ArrowUP，但event.key的正确值是ArrowUp（小写u），字符串大小写不匹配导致逻辑未触发。这是最直接的问题，修改后即可正常工作。
• 确认按键输出值：继续通过console.log(event.key)查看按下上箭头时的实际输出，确保判断条件的字符串与实际值完全一致。
• 定位逻辑触发点：在ArrowUp的判断分支内添加日志（比如console.log('Up键触发')），确认该分支是否被执行，区分是判断不生效还是位置更新环节出问题。
• 排除默认行为干扰：在事件处理函数开头添加event.preventDefault()，避免浏览器默认的页面滚动行为干扰视觉判断，确认元素是否真的未移动。
• 检查变量状态：在执行game.y-= game.speed后打印game.y的值，验证变量是否正确更新，同时检查updatePosition函数是否正确修改了元素的top样式。

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