Pointer Lock API بازی های FPS را به مرورگر می آورد

Ilmari Heikkinen
X Homepage

Pointer Lock API اخیراً در Chrome Canary و کانال Dev فرود آمد، همه خوشحال باشید! صبر کن چی؟ درباره Pointer Lock API چیزی نشنیده اید؟ خوب، به طور خلاصه، Pointer Lock API امکان نوشتن تیراندازی اول شخص مناسب برای وب را فراهم می کند.

پیاده‌سازی Chrome به یک صفحه وب تمام صفحه اجازه می‌دهد تا از نشانگر ماوس اجازه بگیرد تا نتوانید آن را به خارج از صفحه منتقل کنید. این به توسعه دهندگان وب اجازه می دهد تا بازی ها و برنامه های سه بعدی را بدون نگرانی در مورد حرکت مکان نما ماوس در خارج از صفحه بنویسند. هنگامی که نشانگر قفل است، رویدادهای حرکت اشاره گر دارای ویژگی های movementX و movementY هستند که نشان می دهد ماوس از آخرین رویداد حرکت چقدر حرکت کرده است. طبق معمول API های bleeding edge، این ویژگی ها دارای پیشوند فروشنده هستند، بنابراین باید از webkitMovementX و موارد مشابه استفاده کنید.

برای فعال کردن Pointer Lock API در ساخت‌های کنونی کروم، ساده‌ترین راه این است که به about:flags بروید و پرچم «Enable Pointer Lock» را روشن کنید. همچنین می‌توانید با راه‌اندازی Chrome با استفاده از پرچم خط فرمان --enable-pointer-lock آن را روشن کنید.

در حال حاضر چند دمو جالب وجود دارد که از این ویژگی بهره می برند. نسخه ی نمایشی Quake 3 WebGL توسط Brandon Jones را بررسی کنید تا ببینید چگونه Pointer Lock API بازی های WebGL FPS را به یک چشم انداز مناسب تبدیل می کند. یکی دیگر از دموهای جالب Webgl Street Viewer است

برای شروع با Pointer Lock API، در اینجا یک قطعه کوچک از 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>

می توانید یک مثال کاملتر را در html5-demos.com مشاهده کنید. برای اطلاعات بیشتر، نگاهی به: