Die Pointer Lock API ist vor Kurzem in Chrome Canary und der Entwicklerversion verfügbar geworden. Moment, was? Sie haben noch nie von der Pointer Lock API gehört? Kurz gesagt: Mit der Pointer Lock API können Sie richtige First-Person-Shooter für das Web entwickeln.
Bei der Chrome-Implementierung kann eine Vollbild-Webseite Sie um Erlaubnis bitten, den Mauszeiger zu erfassen, damit Sie ihn nicht außerhalb der Seite bewegen können. So können Webentwickler 3D-Spiele und ‑Anwendungen erstellen, ohne sich Gedanken darüber machen zu müssen, dass sich der Mauszeiger außerhalb der Seite bewegt. Wenn der Cursor gesperrt ist, sind für die Cursorbewegungsereignisse die Attribute movementX und movementY definiert, die angeben, wie weit sich die Maus seit dem letzten Bewegungsereignis bewegt hat. Wie bei neuen APIs üblich, haben diese Attribute ein Anbieterpräfix. Sie müssen also webkitMovementX und ähnliches verwenden.
Wenn Sie die Pointer Lock API in aktuellen Chrome-Builds aktivieren möchten, gehen Sie am einfachsten zu about:flags und aktivieren Sie das Flag „Enable Pointer Lock“. Sie können die Funktion auch aktivieren, indem Sie Chrome mit dem Befehlszeilen-Flag --enable-pointer-lock starten.
Es gibt bereits einige coole Demos, die diese Funktion nutzen. In der Quake 3 WebGL-Demo von Brandon Jones sehen Sie, wie die Pointer Lock API WebGL-FPS-Spiele zu einer realen Option macht. Eine weitere coole Demo ist der WebGL Street Viewer.
Hier ist ein kleines Snippet aus MDN, das Ihnen den Einstieg in die Pointer Lock API erleichtern soll:
<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>