İşaretçi Kilidi API'si kısa süre önce Chrome Canary ve Geliştirici kanalına eklendi. Bekle, ne? İşaretçi Kilidi API'sini duydunuz mu? Özetlemek gerekirse İşaretçi Kilidi API'si, web için uygun birinci şahıs nişancılar yazmayı mümkün kılar.
Chrome uygulaması, tam ekran bir web sayfasının fare işaretçisini yakalamak için izninizi istemesine olanak tanır. Böylece, fare işaretçisini sayfanın dışına taşıyamazsınız. Bu sayede web geliştiricileri, fare imlecinin sayfanın dışına çıkması konusunda endişelenmeden 3D oyunlar ve uygulamalar yazabilir. İşaretçi kilitliyken işaretçi hareketi etkinliklerinde, farenin son hareket etkinliğinden bu yana ne kadar hareket ettiğini belirten movementX ve movementY özellikleri tanımlanır. Yeni API'lerde olduğu gibi, bu özellikler tedarikçi firma ön eklerine sahiptir. Bu nedenle webkitMovementX ve benzeri değerleri kullanmanız gerekir.
Mevcut Chrome sürümlerinde İşaretçi Kilidi API'yi etkinleştirmenin en kolay yolu about:flags adresine gidip "İşaretçi Kilidi'ni etkinleştir" işaretini açmaktır. --enable-pointer-lock komut satırı işaretini kullanarak Chrome'u başlatarak da bu özelliği etkinleştirebilirsiniz.
Bu özellikten yararlanan birkaç harika demo mevcut. İşaretçi Kilidi API'sinin WebGL FPS oyunlarını nasıl uygulanabilir bir seçenek haline getirdiğini görmek için Brandon Jones'un Quake 3 WebGL demosuna göz atın. WebGL Street Viewer da ilginç bir demodur.
İşaretçi Kilidi API'yi kullanmaya başlamak için MDN'den alınan küçük bir snippet'i burada bulabilirsiniz:
<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>