使用JavaScript实现Pointer Lock-CSDN博客

本文链接：https://blog.csdn.net/weixin_44488811/article/details/139798539

Pointer Lock API是HTML5提供的一种API，可以锁定鼠标指针在浏览器窗口中，使其在游戏或其他交互应用程序中表现更自然。本文将向您展示如何使用JavaScript实现Pointer Lock。

什么是Pointer Lock？

Pointer Lock API允许游戏开发人员锁定光标在游戏中，这对于第一人称视角的游戏尤其有用。它允许游戏更好地控制鼠标移动，防止鼠标移动超出浏览器窗口，从而提供更流畅的体验。

如何实现Pointer Lock？

步骤一：检查浏览器支持

在实现之前，我们需要首先检查浏览器是否支持Pointer Lock API。

if ('pointerLockElement' in document ||
    'mozPointerLockElement' in document ||
    'webkitPointerLockElement' in document) {
    // 浏览器支持Pointer Lock API
} else {
    console.log('浏览器不支持Pointer Lock API');
}

步骤二：请求Pointer Lock

要请求Pointer Lock，我们需要在用户与页面交互时（例如按下一个按钮或在游戏启动时）请求Pointer Lock。

let element = document.body; // 替换为您希望锁定光标的元素

element.requestPointerLock = element.requestPointerLock ||
    element.mozRequestPointerLock ||
    element.webkitRequestPointerLock;

element.onclick = function() {
    element.requestPointerLock();
}

步骤三：响应Pointer Lock的变化

一旦用户进入Pointer Lock，浏览器将触发相应的事件。我们可以监听这些事件来更新游戏状态或处理鼠标移动。

document.addEventListener('pointerlockchange', lockChangeAlert, false);
document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);

function lockChangeAlert() {
    if (document.pointerLockElement === element ||
        document.mozPointerLockElement === element ||
        document.webkitPointerLockElement === element) {
        console.log('Pointer Lock enabled');
        // Pointer Lock已启用，可以执行游戏逻辑
    } else {
        console.log('Pointer Lock disabled');
        // Pointer Lock已禁用，可以执行其他逻辑
    }
}

示例

下面是一个简单的示例，演示了如何使用JavaScript实现Pointer Lock：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pointer Lock Example</title>
</head>
<body>
    <div id="game-container">
        <button id="start-game">Start Game</button>
        <p>Click the button to start the game and lock the pointer.</p>
    </div>

    <script>
        let gameContainer = document.getElementById('game-container');
        let startGameButton = document.getElementById('start-game');

        gameContainer.onclick = function() {
            gameContainer.requestPointerLock();
        }

        document.addEventListener('pointerlockchange', lockChangeAlert, false);
        document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
        document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);

        function lockChangeAlert() {
            if (document.pointerLockElement === gameContainer ||
                document.mozPointerLockElement === gameContainer ||
                document.webkitPointerLockElement === gameContainer) {
                console.log('Pointer Lock enabled');
                // 在此处启动游戏逻辑
            } else {
                console.log('Pointer Lock disabled');
                // 在此处处理禁用Pointer Lock时的逻辑
            }
        }
    </script>
</body>
</html>