Pointer Lock API baru-baru ini hadir di Chrome Canary dan saluran Dev. Selamat! Tunggu, apa? Anda belum pernah mendengar Pointer Lock API? Singkatnya, Pointer Lock API memungkinkan Anda menulis game first-person shooter yang tepat untuk web.
Implementasi Chrome memungkinkan halaman web layar penuh meminta izin Anda untuk mengambil kursor mouse sehingga Anda tidak dapat memindahkannya ke luar halaman. Hal ini memungkinkan developer web menulis game dan aplikasi 3D tanpa perlu khawatir kursor mouse bergerak ke luar halaman. Saat pointer dikunci, peristiwa gerakan pointer memiliki atribut movementX dan movementY yang ditentukan yang menunjukkan seberapa banyak mouse bergerak sejak peristiwa gerakan terakhir. Seperti biasa dengan API terbaru, atribut ini memiliki awalan vendor, sehingga Anda perlu menggunakan webkitMovementX dan sejenisnya.
Untuk mengaktifkan Pointer Lock API di build Chrome saat ini, cara termudah adalah dengan membuka about:flags dan mengaktifkan tanda "Enable Pointer Lock". Anda juga dapat mengaktifkannya dengan memulai Chrome menggunakan flag command line --enable-pointer-lock.
Sudah ada beberapa demo keren yang memanfaatkan fitur ini. Lihat demo WebGL Quake 3 oleh Brandon Jones untuk melihat bagaimana Pointer Lock API menjadikan game FPS WebGL sebagai prospek yang layak. Demo keren lainnya adalah Webgl Street Viewer
Untuk memulai Pointer Lock API, berikut adalah cuplikan kecil yang diambil dari 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>