JavaScript上箭头按键检测函数运行异常问题求解

你的代码存在4个核心错误，逐一修正后即可正常运行：

• 按键判断逻辑完全错误：event.key == (keyCode == '38') 这段代码中，括号内的keyCode == '38'会先返回布尔值true/false，你相当于拿按键值和布尔值做相等判断，永远不会触发条件。另外你没有定义keyCode变量，且上箭头对应的event.key值是标准字符串"ArrowUp"，旧版keyCode属性已经被废弃，不建议使用。
• Canvas API调用错误：原生Canvas 2D上下文不存在ctx.clear()方法，清空画布需要调用clearRect()指定清空范围。
• 绘制逻辑不合理：你把样式设置、清空画布、绘制角色的逻辑全部放在按键触发的判断分支里，页面首次加载时不会绘制角色，第一次按键前画布是空白的。
• 变量未初始化：你直接使用width/height作为角色坐标但没有给初始值，运算时会得到NaN导致绘制失败。

修正后可直接运行的代码 #

<canvas id="game" width="400" height="300" style="border: 1px solid #eee;"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
// 初始化角色坐标，放在画布居中位置
let playerX = (canvas.width - 25) / 2;
let playerY = (canvas.height - 50) / 2;
const playerW = 25;
const playerH = 50;
const moveStep = 25;

// 统一封装绘制函数，初始加载、移动后都可以调用
function render() {
  // 清空整个画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'red';
  ctx.fillRect(playerX, playerY, playerW, playerH);
}

// 首次加载先绘制角色
render();

document.onkeydown = e => {
  // 匹配上箭头按键
  if (e.key === 'ArrowUp') {
    playerY -= moveStep;
    // 增加边界判断，避免角色跑出画布顶部
    if (playerY < 0) playerY = 0;
    render();
  }
}
</script>

给新手的补充提示 #

• 后续开发其他方向键时，直接在keydown监听里加对应判断即可，四个方向对应的event.key值分别是ArrowUp/ArrowDown/ArrowLeft/ArrowRight，不确定按键对应值时，可以在监听里加一句console.log(e.key)，按一下对应按键就能在控制台看到值。
• 不要把绘制逻辑零散写在各个事件回调里，统一封装成渲染函数调用，能避免很多画面残留、初始不显示的问题。
• 变量命名尽量语义化，比如用playerX/playerY表示角色坐标，不要直接用width/height这类容易和画布宽高混淆的名字，减少低级错误。

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