واجهة برمجة تطبيقات Pointer Lock API توفّر ألعاب عدد اللقطات في الثانية في المتصفّح

أهلاً بك في واجهة Pointer Lock API التي وصلت مؤخرًا إلى Chrome Canary وقناة مطوّري البرامج. مهلاً، ماذا؟ ألم تسمع بواجهة Pointer Lock API؟ باختصار، تتيح واجهة برمجة تطبيقات Pointer Lock إمكانية كتابة ألعاب رماية من منظور البطل مناسبة على الويب.

تسمح آلية تنفيذ Chrome لصفحة الويب بملء الشاشة بطلب إذنك لالتقاط مؤشر الماوس بحيث لا يمكنك نقله خارج الصفحة. وتتيح هذه الميزة لمطوّري الويب كتابة ألعاب وتطبيقات ثلاثية الأبعاد بدون قلق من تنقّل مؤشر الماوس خارج الصفحة. عندما يكون المؤشر مقفلاً، تتضمّن أحداث نقل المؤشر سمتَي movementX وmovementY محدّدتَين، وهما يحدّدان مقدار تحريك الماوس منذ آخر حدث نقل. كالعادة في واجهات برمجة التطبيقات المتطورة، تكون هذه السمات مسبوقة بالمورّدين، لذا عليك استخدام webkitMovementX وما شابه ذلك.

لتفعيل واجهة برمجة التطبيقات Pointer Lock API في إصدارات Chrome الحالية، تكون أسهل طريقة هي الانتقال إلى about:flags وتفعيل العلامة "تفعيل Pointer Lock". يمكنك أيضًا تفعيله من خلال بدء تشغيل Chrome باستخدام علامة سطر الأوامر --enable-pointer-lock.

هناك بالفعل بعض العروض التوضيحية الرائعة التي تستفيد من هذه الميزة. اطلِع على العرض التوضيحي لـ Quake 3 WebGL من "براندون جونز" لمعرفة كيف تساهم واجهة برمجة التطبيقات 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. لمزيد من المعلومات، يُرجى إلقاء نظرة على: