A API Pointer Lock foi lançada recentemente no Chrome Canary e no Canal de Desenvolvedor. Vamos comemorar! Espera, o quê? Você não conhece a API Pointer Lock? Em resumo, a API Pointer Lock permite criar jogos de tiro em primeira pessoa para a Web.
A implementação do Chrome permite que uma página da Web em tela cheia peça sua permissão para capturar o ponteiro do mouse, para que você não possa movê-lo para fora da página. Isso permite que os desenvolvedores da Web criem jogos e aplicativos 3D sem se preocupar com o cursor do mouse se movendo para fora da página. Quando o ponteiro está bloqueado, os eventos de movimento do ponteiro têm atributos movementX e movementY definidos que informam quanto o mouse se moveu desde o último evento de movimento. Como de costume com APIs de última geração, esses atributos têm prefixo do fornecedor. Portanto, você precisa usar webkitMovementX e outros semelhantes.
Para ativar a API Pointer Lock nos builds atuais do Chrome, a maneira mais fácil é acessar about:flags e ativar a flag "Enable Pointer Lock". Também é possível ativar esse recurso ao iniciar o Chrome usando a flag de linha de comando --enable-pointer-lock.
Já existem algumas demonstrações legais que aproveitam esse recurso. Confira a demonstração do Quake 3 WebGL (em inglês) de Brandon Jones para saber como a API Pointer Lock torna os jogos de FPS do WebGL uma opção viável. Outra demonstração legal é o Visualizador de ruas do WebGL.
Para começar a usar a API Pointer Lock, confira um pequeno snippet retirado do 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>