Pointer Lock API 最近在 Chrome Canary 版和开发者版中正式推出,全都值得庆幸!等等,什么?您没听说过 Pointer Lock API?简而言之,Pointer Lock API 可让您为网络编写合适的第一人称射击游戏。
Chrome 实现会允许全屏网页请求您授予捕获鼠标指针的权限,这样您就无法将鼠标指针移出网页。这样,网络开发者可以编写 3D 游戏和应用,而无需担心鼠标光标会移动到页面之外。当指针锁定时,指针移动事件会定义 movementX
和 movementY
属性,以指示自上次移动事件后鼠标移动的幅度。与通常使用前沿 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 查看更完整的示例。有关详情,请查看:
- Vincent Scheib 的博文(规范编辑器)
- MDN 文档
- W3C 规范