此页面由 Cloud Translation API 翻译。

Pointer Lock API 在浏览器中引入 FPS 游戏

Ilmari Heikkinen

Pointer Lock API 近期已发布到 Chrome Canary 和开发者渠道，大家可以欢呼了！等等，什么？您还没有听说过 Pointer Lock API？简而言之，借助 Pointer Lock API，您可以为 Web 编写适当的第一人称射击游戏。

在 Chrome 实现中，全屏网页可以请求您授予捕获鼠标指针的权限，以便您无法将其移出网页。这样，Web 开发者就可以编写 3D 游戏和应用，而无需担心鼠标光标会移出网页。当指针处于锁定状态时，指针移动事件会定义 movementX 和 movementY 属性，用于指示鼠标自上次移动事件以来移动了多少。与新兴 API 一样，这些属性带有供应商前缀，因此您需要使用 webkitMovementX 等。

如需在当前的 Chrome build 中启用 Pointer Lock API，最简单的方法是前往 about:flags 并开启“Enable Pointer Lock”（启用指针锁定）标志。您还可以使用 --enable-pointer-lock 命令行标志启动 Chrome 来开启此功能。

已经有几个利用此功能的很酷的演示。查看 Brandon Jones 的 Quake 3 WebGL 演示，了解 Pointer Lock API 如何让 WebGL FPS 游戏成为可行的前景。另一个很酷的演示是 Webgl Street Viewer

下面是从 MDN 中摘录的一段小代码，可供您开始使用 Pointer Lock API：

<button onclick="document.body.webkitRequestFullScreen();">No, you lock it up!</button>
<script>
navigator.pointer = navigator.pointer || navigator.webkitPointer;

var onError = function() {
    console.log("Mouse lock was not successful.");
};

document.addEventListener('webkitfullscreenchange', function(e) {
    if (document.webkitIsFullScreen) {
    navigator.pointer.lock(document.body, function() {
        // Locked and ready to play.
    }, onError);
    }
}, false);

document.body.addEventListener('webkitpointerlocklost', function(e) {
    console.log('Pointer lock lost!');
}, false);

document.body.addEventListener('mousemove', function(e) {
    if (navigator.pointer.isLocked) { // got a locked pointer
    var movementX = e.movementX || e.webkitMovementX;
    var movementY = e.movementY || e.webkitMovementY;
    }
}, false);
</script>

Pointer Lock API 在浏览器中引入 FPS 游戏

相关链接