L'API Pointer Lock è stata recentemente rilasciata in Chrome Canary e nel canale Dev. Aspetta, cosa? Non hai mai sentito parlare dell'API Pointer Lock? In poche parole, l'API Pointer Lock consente di scrivere veri e propri sparatutto in prima persona per il web.
L'implementazione di Chrome consente a una pagina web a schermo intero di chiederti l'autorizzazione per acquisire il cursore del mouse in modo che non possa essere spostato all'esterno della pagina. In questo modo, gli sviluppatori web possono scrivere giochi e applicazioni 3D senza doversi preoccupare che il cursore del mouse esca dalla pagina. Quando il cursore è bloccato, gli eventi di movimento del cursore hanno gli attributi movementX e movementY definiti che indicano quanto si è spostato il mouse dall'ultimo evento di movimento. Come di consueto con le API all'avanguardia, questi attributi sono preceduti da un prefisso del fornitore, quindi devi utilizzare webkitMovementX e simili.
Per attivare l'API Pointer Lock nelle build di Chrome attuali, il modo più semplice è andare a about:flags e attivare il flag "Attiva blocco cursore". Puoi attivarla anche avviando Chrome utilizzando il flag della riga di comando --enable-pointer-lock.
Esistono già un paio di demo interessanti che sfruttano questa funzionalità. Dai un'occhiata alla demo di Quake 3 WebGL di Brandon Jones per scoprire come l'API Pointer Lock rende i giochi FPS WebGL una prospettiva concreta. Un'altra demo interessante è Webgl Street Viewer
Per iniziare a utilizzare l'API Pointer Lock, ecco un piccolo snippet preso da 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>