Pointer Lock API Menghadirkan game FPS ke browser

Ilmari Heikkinen

Pointer Lock API baru-baru ini tersedia di Chrome Canary dan saluran Dev, semuanya gembira! Tunggu, apa? Anda belum pernah mendengar tentang Pointer Lock API? Singkatnya, dengan Pointer Lock API, Anda dapat menulis tembak-menembak orang pertama yang tepat untuk web.

Implementasi Chrome memungkinkan halaman web layar penuh meminta izin Anda untuk merekam kursor mouse sehingga Anda tidak dapat memindahkannya ke luar halaman. Dengan demikian, developer web dapat menulis game dan aplikasi 3D tanpa perlu mengkhawatirkan kursor mouse yang bergerak ke luar halaman. Saat pointer dikunci, peristiwa pemindahan pointer memiliki atribut movementX dan movementY yang ditentukan yang memberi tahu seberapa banyak mouse bergerak sejak peristiwa gerakan terakhir. Seperti biasa dengan API edge terbaru, atribut ini diberi awalan vendor, sehingga Anda perlu menggunakan webkitMovementX dan yang serupa.

Untuk mengaktifkan Pointer Lock API di build Chrome saat ini, cara termudah adalah dengan membuka about:flags dan mengaktifkan tanda "Aktifkan Kunci Pointer". Anda juga dapat mengaktifkannya dengan memulai Chrome menggunakan tanda 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 menjanjikan. Demo keren lainnya adalah Webgl Street Viewer

Untuk mulai menggunakan Pointer Lock API, berikut cuplikan kecil yang disalin 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>

Anda dapat melihat contoh yang lebih lengkap di html5-demos.com. Untuk informasi lebih lanjut, lihat: