Gamepad API 控制游戏的 JavaScript 指南

在现代网页游戏中，通过游戏手柄来控制游戏是一种常见的需求。HTML5 提供了一个名为 Gamepad API 的接口，使得从浏览器中读取游戏手柄输入变得相对简单。

什么是 Gamepad API？

Gamepad API 是 HTML5 的一部分，允许开发者通过 JavaScript 获取和响应连接到计算机的游戏手柄的输入。这使得开发者可以创建支持多种输入方式的游戏和应用程序，例如 Xbox 手柄、PlayStation 手柄等。

使用 Gamepad API 的基础

首先，我们需要检测用户是否连接了一个游戏手柄。以下是如何检测手柄的简单示例：

window.addEventListener("gamepadconnected", function(e) {const gamepad = e.gamepad;console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",gamepad.index, gamepad.id,gamepad.buttons.length, gamepad.axes.length);
});

上述代码中，当游戏手柄连接时，会触发 gamepadconnected 事件，并显示手柄的一些基本信息。

读取手柄输入

一旦手柄已连接，我们可以轮询手柄状态来获取输入信息：

function updateGamepad() {const gamepads = navigator.getGamepads();for (let gamepad of gamepads) {if (gamepad) {// 读取按钮for (let i = 0; i < gamepad.buttons.length; i++) {let button = gamepad.buttons[i];if (button.pressed) {console.log(`Button ${i} pressed`);}}// 读取轴for (let i = 0; i < gamepad.axes.length; i++) {let axis = gamepad.axes[i];console.log(`Axis ${i}: ${axis}`);}}}requestAnimationFrame(updateGamepad);
}// 启动轮询
requestAnimationFrame(updateGamepad);

这段代码会持续地读取手柄的按钮和轴的状态，并输出到控制台。

响应手柄输入

最后，我们可以根据手柄的输入来执行相应的操作，比如控制游戏角色的移动或者执行动作：

function handleGamepadInput(gamepad) {if (gamepad.buttons[0].pressed) {// 执行动作}let xAxis = gamepad.axes[0];let yAxis = gamepad.axes[1];// 根据轴的值来控制角色移动
}function updateGamepad() {const gamepads = navigator.getGamepads();for (let gamepad of gamepads) {if (gamepad) {handleGamepadInput(gamepad);}}requestAnimationFrame(updateGamepad);
}requestAnimationFrame(updateGamepad);