在現代網頁游戲中，通過游戲手柄來控制游戲是一種常見的需求。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);

在 handleGamepadInput 函數中，我們可以根據按鍵狀態和軸的值來執行相應的游戲邏輯。

結論

Gamepad API 提供了一個強大的接口來與游戲手柄進行交互，使得開發者能夠為他們的網頁游戲和應用程序添加游戲手柄支持。通過上面的示例，你可以開始使用 Gamepad API 來創建更加交互性和真實感的游戲體驗。