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

Ilmari Heikkinen

Pointer Lock API 最近在 Chrome Canary 版和开发者版中正式推出,全都值得庆幸!等等,什么?您没听说过 Pointer Lock API?简而言之,Pointer Lock API 可让您为网络编写合适的第一人称射击游戏。

Chrome 实现会允许全屏网页请求您授予捕获鼠标指针的权限,这样您就无法将鼠标指针移出网页。这样,网络开发者可以编写 3D 游戏和应用,而无需担心鼠标光标会移动到页面之外。当指针锁定时,指针移动事件会定义 movementXmovementY 属性,以指示自上次移动事件后鼠标移动的幅度。与通常使用前沿 API 一样,这些属性带有供应商前缀,因此您需要使用 webkitMovementX 等。

若要在当前 Chrome build 中启用 Pointer Lock API,最简单的方法是前往 about:flags 并开启“启用 Pointer Lock”标记。您也可以使用 --enable-pointer-lock 命令行 flag 启动 Chrome,从而启用该功能。

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

如需开始使用 Pointer Lock API,以下是从 MDN 中截取的一小段代码:

<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>

您可以访问 html5-demos.com 查看更完整的示例。有关详情,请查看: