PS4浏览器Keydown事件无key/keycode值，如何实现蛇形游戏操控？

问题背景 #

我正在开发一款蛇形游戏，目标是支持尽可能多的设备。把游戏网页加载到PS4浏览器后，游戏能正常运行，但没法操控蛇移动。

尝试的调试代码 #

为了适配PS4控制器事件，我写了这段代码来获取按键事件值：

window.addEventListener('keydown', (e) => {
 window.alert(`key: ${e.key}, keycode: ${e.keycode}`)
// 用alert而不是console.log是因为PS4浏览器没有控制台
})

但按下控制器按键（包括外接键盘）时，弹窗只显示：key: code: undefined

实用解决方案 #

1. 修复键盘事件的低级错误 #

你代码里的keycode是小写，而标准API是驼峰写法的keyCode，这是导致显示undefined的直接原因。修改调试代码为：

window.addEventListener('keydown', (e) => {
  window.alert(`key: ${e.key}, keyCode: ${e.keyCode}, code: ${e.code}`)
})

PS4浏览器对外接键盘的标准键盘事件支持有限，但修正这个写法后，至少能正确获取到按键值，再基于这些值适配蛇的移动逻辑。

2. 用Gamepad API适配PS4控制器 #

PS4控制器属于游戏手柄，PS4浏览器对键盘事件的映射不完善，必须使用Web Gamepad API来处理：

• 监听控制器连接：

  window.addEventListener("gamepadconnected", (e) => {
    startGamepadPolling();
  });
  

• 轮询手柄按键状态（Gamepad API需要主动轮询，而非事件触发）：

  function startGamepadPolling() {
    const pollLoop = () => {
      const gamepads = navigator.getGamepads();
      const ps4Controller = gamepads[0]; // 默认取第一个连接的控制器
      if (ps4Controller) {
        // PS4手柄十字键对应按钮索引：上12、下13、左14、右15
        if (ps4Controller.buttons[12].pressed) {
          changeSnakeDirection('up'); // 替换成你游戏里的方向切换函数
        } else if (ps4Controller.buttons[13].pressed) {
          changeSnakeDirection('down');
        } else if (ps4Controller.buttons[14].pressed) {
          changeSnakeDirection('left');
        } else if (ps4Controller.buttons[15].pressed) {
          changeSnakeDirection('right');
        }
        // 也可以适配左摇杆：axes[0]对应左右，axes[1]对应上下，值范围-1到1
        if (ps4Controller.axes[0] < -0.5) changeSnakeDirection('left');
        if (ps4Controller.axes[0] > 0.5) changeSnakeDirection('right');
        if (ps4Controller.axes[1] < -0.5) changeSnakeDirection('up');
        if (ps4Controller.axes[1] > 0.5) changeSnakeDirection('down');
      }
      requestAnimationFrame(pollLoop);
    };
    pollLoop();
  }
  

• 处理控制器断开：

  window.addEventListener("gamepaddisconnected", () => {
    // 可添加提示或暂停游戏逻辑
  });
  

3. 适配细节 #

• PS4手柄的按钮索引可能因浏览器版本略有差异，可以通过遍历ps4Controller.buttons数组打印状态来确认
• 用requestAnimationFrame做轮询，保证和游戏帧率同步，避免操控延迟
• 同时保留键盘事件的适配逻辑，让外接键盘和手柄都能正常操控

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