event.keyCode报错：无法读取属性'keyCode'，求按I键加载画布界面方案

首先来说你遇到的报错原因：你在代码开头直接调用了loadScreen()，这时候并没有传入event对象，所以函数里的event是undefined，尝试访问它的keyCode属性自然就会抛出错误啦。

接下来给你两个关键的修复点，同时优化代码符合现代标准：

1. 处理初始调用的无参数情况 #

把初始调用的loadScreen()改成只执行默认初始化逻辑，或者调整函数，让它在没有event的时候不执行按键判断逻辑。比如：

function loadScreen(event) {
  // 如果是初始调用（没有event），直接执行基础绘制
  if (!event) {
    // 这里写初始界面的绘制代码
    draw.fillStyle = "#000";
    draw.fillRect(0, 0, canvas.width, canvas.height);
    return;
  }
  
  // 按键判断逻辑
  // 推荐用event.key替代已废弃的keyCode，更直观
  const key = event.key.toLowerCase(); // 不区分大小写
  if (key === 'i') {
    InventoryScreen();
  }
}

2. 替换已废弃的keyCode #

keyCode已经被标准废弃了，现在更推荐使用event.key（直接获取按键字符）或者event.code（获取按键的物理位置）。比如判断按下I键，用event.key === 'I'或者转成小写不区分大小写，这样代码可读性更高。

完整修复后的代码 #

var canvas = document.querySelector("canvas");
canvas.width = 640;
canvas.height = 640;
var draw = canvas.getContext("2d");

// 绑定键盘事件
document.addEventListener('keydown', loadScreen);

// 初始加载界面
loadScreen();

function loadScreen(event) {
  // 初始调用无event，绘制默认界面
  if (!event) {
    draw.fillStyle = "#222";
    draw.fillRect(0, 0, canvas.width, canvas.height);
    draw.fillStyle = "#fff";
    draw.font = "20px Arial";
    draw.fillText("按下I键打开背包界面", 20, 30);
    return;
  }

  // 判断是否按下I键（不区分大小写）
  if (event.key.toLowerCase() === 'i') {
    InventoryScreen();
  }
}

function InventoryScreen() {
  // 清空画布
  draw.fillStyle = "#111";
  draw.fillRect(0, 0, canvas.width, canvas.height);
  
  // 绘制背包界面内容，示例：
  draw.fillStyle = "#4CAF50";
  draw.fillRect(50, 50, 540, 540);
  draw.fillStyle = "#fff";
  draw.font = "24px Arial";
  draw.fillText("背包界面", 280, 80);
}

这样修改后，既解决了初始调用的报错问题，又用更现代的方式实现了按键触发逻辑，同时初始加载也能正常显示默认界面。

内容的提问来源于stack exchange，提问作者Riley.Oram