Web游戏开发：如何使用 JavaScript 监听游戏手柄按键操作

最新推荐文章于 2025-03-28 10:25:41 发布

乐闻x

最新推荐文章于 2025-03-28 10:25:41 发布

阅读量1.6k

点赞数 25

分类专栏：游戏开发手册文章标签：前端 javascript 游戏

本文链接：https://blog.csdn.net/m0_37890289/article/details/144278558

版权

游戏开发手册专栏收录该内容

2 篇文章

订阅专栏

前言

在现代网页应用开发中，游戏手柄的支持日益受到重视，尤其是对于在线游戏和互动娱乐应用，使用游戏手柄可以显著提升用户体验。想象一下在浏览器中玩游戏，使用键盘和鼠标可能会有点繁琐，而游戏手柄则能提供更好的操控体验。幸运的是，JavaScript 提供了强大的 API，让我们可以轻松监听游戏手柄的按键操作。
JavaScript 提供了Gamepad API，允许开发者轻松地访问和处理游戏手柄的输入。本教程将详细介绍如何利用 JavaScript 监听游戏手柄的按键和摇杆操作，并通过实际代码示例演示如何实现这一功能。

游戏手柄 API 简介

浏览器提供了一个名为 Gamepad API 的接口，它允许我们访问连接到计算机的游戏手柄，并且实时获取手柄按键和摇杆的状态。常用的主要方法和属性包括：

navigator.getGamepads(): 获取所有连接的游戏手柄的快照。
gamepad.buttons: 获取手柄上的所有按键。
gamepad.axes: 获取手柄上的所有轴（如摇杆的X轴和Y轴）。

实现步骤

1. 检查浏览器支持

并不是所有浏览器都支持 Gamepad API，所以在使用之前需要先检查一下浏览器的兼容性：

if (navigator.getGamepads) {
    console.log("您的浏览器支持 Gamepad API");
} else {
    console.log("抱歉，您的浏览器不支持 Gamepad API");
}

2. 监听游戏手柄的连接和断开

当游戏手柄连接或断开时，我们可以使用 window 对象上的 gamepadconnected 和 gamepaddisconnected 事件来监听：

window.addEventListener("gamepadconnected", (event) => {
    console.log("游戏手柄已连接:", event.gamepad);
});

window.addEventListener("gamepaddisconnected", (event) => {
    console.log("游戏手柄已断开:", event.gamepad);
});

3. 获取手柄状态

要持续获取手柄状态，需要在每一帧中轮询手柄的状态。一般来说，我们会使用 requestAnimationFrame 来实现这个过程：

function updateGamepadStatus() {
    const gamepads = navigator.getGamepads ? navigator.getGamepads() : [];

    for (let i = 0; i < gamepads.length; i++) {
        const gamepad = gamepads[i];
        if (gamepad) {
            console.log("手柄状态:", gamepad);
            // 处理按键
            gamepad.buttons.forEach((button, index) => {
                if (button.pressed) {
                    console.log(`按钮 ${index} 被按下`);
                }
            });
            // 处理摇杆
            gamepad.axes.forEach((axis, index) => {
                console.log(`轴 ${index} 的值: ${axis}`);
            });
        }
    }

    requestAnimationFrame(updateGamepadStatus);
}

updateGamepadStatus();

4. 简单的应用示例

为了更直观地展示游戏手柄按键的状态，我们可以创建一个简单的网页应用，显示哪些按键被按下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>游戏手柄监听示例</title>
    <style>
        .button {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin: 10px;
            background-color: lightgray;
            text-align: center;
            line-height: 50px;
            border-radius: 5px;
        }
        .pressed {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="buttons-container"></div>
    <script>
        const buttonsContainer = document.getElementById('buttons-container');

        function createButtonElements(num) {
            for (let i = 0; i < num; i++) {
                const button = document.createElement('div');
                button.className = 'button';
                button.textContent = i;
                buttonsContainer.appendChild(button);
            }
        }

        function updateGamepadStatus() {
            const gamepads = navigator.getGamepads ? navigator.getGamepads() : [];

            for (let i = 0; i < gamepads.length; i++) {
                const gamepad = gamepads[i];
                if (gamepad) {
                    gamepad.buttons.forEach((button, index) => {
                        const buttonElement = buttonsContainer.children[index];
                        if (button.pressed) {
                            buttonElement.classList.add('pressed');
                        } else {
                            buttonElement.classList.remove('pressed');
                        }
                    });
                }
            }

            requestAnimationFrame(updateGamepadStatus);
        }

        window.addEventListener("gamepadconnected", (event) => {
            createButtonElements(event.gamepad.buttons.length);
            updateGamepadStatus();
        });
    </script>
</body>
</html>

在这个示例中，页面上会显示出对应于手柄按键的按钮，当按下手柄按键时，相应的按钮会变红。

进阶优化

上面的示例已经可以基本满足监听游戏手柄按键状态的需求，但在实际应用中，我们可能希望有更加结构化和可扩展的代码。下面我们将进一步优化这个示例，使其更具模块化和可维护性。

1. 创建 GamepadManager 类

我们首先创建一个 GamepadManager 类，用来管理游戏手柄的连接、断开和状态更新：

class GamepadManager {
    constructor() {
        this.gamepads = [];
        this.updateCallback = null;
        
        window.addEventListener("gamepadconnected", (event) => this.onGamepadConnected(event));
        window.addEventListener("gamepaddisconnected", (event) => this.onGamepadDisconnected(event));
        
        this.updateGamepadStatus();
    }

    onGamepadConnected(event) {
        this.gamepads[event.gamepad.index] = event.gamepad;
        console.log("游戏手柄已连接:", event.gamepad);
    }

    onGamepadDisconnected(event) {
        this.gamepads[event.gamepad.index] = null;
        console.log("游戏手柄已断开:", event.gamepad);
    }

    updateGamepadStatus() {
        const gamepads = navigator.getGamepads ? navigator.getGamepads() : [];

        for (let i = 0; i < gamepads.length; i++) {
            if (gamepads[i]) {
                this.gamepads[i] = gamepads[i];
            }
        }

        if (this.updateCallback) {
            this.updateCallback(this.gamepads);
        }

        requestAnimationFrame(() => this.updateGamepadStatus());
    }

    onUpdate(callback) {
        this.updateCallback = callback;
    }
}

2. 使用 GamepadManager 类

接下来，我们在页面中使用 GamepadManager 类来管理游戏手柄，并更新页面上的按钮状态：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>游戏手柄监听示例</title>
    <style>
        .button {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin: 10px;
            background-color: lightgray;
            text-align: center;
            line-height: 50px;
            border-radius: 5px;
        }
        .pressed {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="buttons-container"></div>
    <script>
        class GamepadManager {
            constructor() {
                this.gamepads = [];
                this.updateCallback = null;

                window.addEventListener("gamepadconnected", (event) => this.onGamepadConnected(event));
                window.addEventListener("gamepaddisconnected", (event) => this.onGamepadDisconnected(event));

                this.updateGamepadStatus();
            }

            onGamepadConnected(event) {
                this.gamepads[event.gamepad.index] = event.gamepad;
                console.log("游戏手柄已连接:", event.gamepad);
                if (this.updateCallback) {
                    this.updateCallback(this.gamepads);
                }
            }

            onGamepadDisconnected(event) {
                this.gamepads[event.gamepad.index] = null;
                console.log("游戏手柄已断开:", event.gamepad);
            }

            updateGamepadStatus() {
                const gamepads = navigator.getGamepads ? navigator.getGamepads() : [];

                for (let i = 0; i < gamepads.length; i++) {
                    if (gamepads[i]) {
                        this.gamepads[i] = gamepads[i];
                    }
                }

                if (this.updateCallback) {
                    this.updateCallback(this.gamepads);
                }

                requestAnimationFrame(() => this.updateGamepadStatus());
            }

            onUpdate(callback) {
                this.updateCallback = callback;
            }
        }

        const buttonsContainer = document.getElementById('buttons-container');

        function createButtonElements(num) {
            buttonsContainer.innerHTML = ''; // 清空现有的按钮
            for (let i = 0; i < num; i++) {
                const button = document.createElement('div');
                button.className = 'button';
                button.textContent = i;
                buttonsContainer.appendChild(button);
            }
        }

        const gamepadManager = new GamepadManager();

        gamepadManager.onUpdate((gamepads) => {
            gamepads.forEach((gamepad) => {
                if (gamepad) {
                    createButtonElements(gamepad.buttons.length);
                    gamepad.buttons.forEach((button, index) => {
                        const buttonElement = buttonsContainer.children[index];
                        if (button.pressed) {
                            buttonElement.classList.add('pressed');
                        } else {
                            buttonElement.classList.remove('pressed');
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>

3. 添加摇杆支持

除了按键，游戏手柄上的摇杆也是常用的输入设备。我们可以在 GamepadManager 类中添加对摇杆的支持：

class GamepadManager {
    // ... 之前的代码

    updateGamepadStatus() {
        const gamepads = navigator.getGamepads ? navigator.getGamepads() : [];

        for (let i = 0; i < gamepads.length; i++) {
            if (gamepads[i]) {
                this.gamepads[i] = gamepads[i];
            }
        }

        if (this.updateCallback) {
            this.updateCallback(this.gamepads);
        }

        requestAnimationFrame(() => this.updateGamepadStatus());
    }

    // ... 之前的代码
}

function updateGamepadStatusDisplay(gamepads) {
    gamepads.forEach((gamepad) => {
        if (gamepad) {
            createButtonElements(gamepad.buttons.length);
            gamepad.buttons.forEach((button, index) => {
                const buttonElement = buttonsContainer.children[index];
                if (button.pressed) {
                    buttonElement.classList.add('pressed');
                } else {
                    buttonElement.classList.remove('pressed');
                }
            });

            // 处理摇杆
            gamepad.axes.forEach((axis, index) => {
                console.log(`轴 ${index} 的值: ${axis}`);
            });
        }
    });
}

gamepadManager.onUpdate(updateGamepadStatusDisplay);

在 updateGamepadStatusDisplay 函数中，我们添加了对摇杆状态的处理，可以在控制台中看到摇杆的值。

总结

通过使用 JavaScript 的 Gamepad API，我们可以方便地实现对游戏手柄按键和摇杆的监听操作。本文从基本原理入手，逐步讲解了如何检测手柄的连接状态、获取手柄的按键和轴数据，并展示了一个完整的代码示例进行实践。希望通过本教程，开发者能够更好地理解和应用 Gamepad API，为用户提供更加丰富和直观的交互体验。