La API de bloqueo del puntero llegó recientemente a Chrome Canary y al canal para desarrolladores. ¡Felicidades! Espera, ¿qué? ¿No has oído hablar de la API de Pointer Lock? En pocas palabras, la API de Pointer Lock permite escribir juegos de disparos en primera persona adecuados para la Web.
La implementación de Chrome permite que una página web de pantalla completa te solicite permiso para capturar el puntero del mouse para que no puedas moverlo fuera de la página. Esto permite que los desarrolladores web escriban aplicaciones y juegos en 3D sin tener que preocuparse de que el cursor del mouse se mueva fuera de la página. Cuando el puntero está bloqueado, los eventos de movimiento del puntero tienen definidos los atributos movementX y movementY que indican cuánto se movió el mouse desde el último evento de movimiento. Como de costumbre con las APIs de vanguardia, estos atributos tienen un prefijo del proveedor, por lo que debes usar webkitMovementX y otros elementos similares.
Para habilitar la API de bloqueo del puntero en las compilaciones actuales de Chrome, la forma más sencilla es ir a about:flags y activar la marca "Habilitar bloqueo del puntero". También puedes iniciar Chrome con la marca de línea de comandos --enable-pointer-lock para activarlo.
Ya hay algunas demos interesantes que aprovechan esta función. Consulta la demostración de Quake 3 WebGL de Brandon Jones para ver cómo la API de Pointer Lock hace que los juegos de FPS de WebGL sean una perspectiva viable. Otra demostración interesante es el Webgl Street Viewer.
Para comenzar a usar la API de Pointer Lock, aquí tienes un pequeño fragmento tomado de 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>