L'API Pointer Lock est récemment arrivée dans Chrome Canary et la version en développement. Attends, quoi ? Vous n'avez jamais entendu parler de l'API Pointer Lock ? En résumé, l'API Pointer Lock permet d'écrire des jeux de tir à la première personne appropriés pour le Web.
L'implémentation de Chrome permet à une page Web en plein écran de vous demander l'autorisation de capturer le pointeur de la souris afin que vous ne puissiez pas le déplacer en dehors de la page. Cela permet aux développeurs Web d'écrire des jeux et des applications 3D sans avoir à se soucier du déplacement du curseur de la souris en dehors de la page. Lorsque le pointeur est verrouillé, les événements de déplacement du pointeur ont des attributs movementX et movementY définis qui indiquent la distance parcourue par la souris depuis le dernier événement de déplacement. Comme d'habitude avec les API de pointe, ces attributs sont précédés d'un préfixe de fournisseur. Vous devez donc utiliser webkitMovementX et autres.
Pour activer l'API Pointer Lock dans les versions actuelles de Chrome, le moyen le plus simple consiste à accéder à about:flags et à activer l'indicateur "Enable Pointer Lock" (Activer le verrouillage du pointeur). Vous pouvez également l'activer en démarrant Chrome à l'aide de l'indicateur de ligne de commande --enable-pointer-lock.
Plusieurs démonstrations intéressantes utilisent déjà cette fonctionnalité. Découvrez la démonstration Quake 3 WebGL de Brandon Jones pour voir comment l'API Pointer Lock rend les jeux de tir à la première personne WebGL une perspective viable. Une autre démonstration intéressante est le Webgl Street Viewer.
Pour commencer à utiliser l'API Pointer Lock, voici un petit extrait tiré 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>