تم مؤخرًا طرح Pointer Lock API في Chrome Canary وقناة المطوّرين، ما يشكّل أخبارًا سارة للجميع. لحظة، ماذا؟ هل لم يسبق لك سماع واجهة برمجة التطبيقات Pointer Lock API؟ بعبارة أخرى، تتيح واجهة برمجة التطبيقات Pointer Lock API كتابة ألعاب تصويب من منظور شخص أول مناسبة للويب.
يتيح تطبيق Chrome لصفحة الويب التي تظهر بملء الشاشة طلب إذنك لالتقاط مؤشر الماوس كي لا تتمكّن من نقله خارج الصفحة. يتيح ذلك لمطوّري الويب كتابة ألعاب وتطبيقات ثلاثية الأبعاد بدون القلق بشأن انتقال مؤشر الماوس خارج الصفحة. عندما يكون المؤشر مقفلاً، يتم تحديد السمتَين movementX وmovementY لأحداث تحريك المؤشر، ما يشير إلى مقدار تحرك الماوس منذ آخر حدث تحريك. كما هو الحال مع واجهات برمجة التطبيقات الحديثة، يتمّ استخدام بادئة المورّد مع هذه السمات، لذا عليك استخدام webkitMovementX وما شابه ذلك.
لتفعيل واجهة برمجة التطبيقات Pointer Lock API في إصدارات Chrome الحالية، يمكنك الانتقال إلى about:flags وتفعيل العلامة "تفعيل قفل المؤشر". يمكنك أيضًا تفعيل هذه الميزة من خلال بدء Chrome باستخدام علامة سطر الأوامر --enable-pointer-lock.
هناك حاليًا بعض العروض التوضيحية الرائعة التي تستفيد من هذه الميزة. يمكنك الاطّلاع على العرض التجريبي للعبة Quake 3 WebGL الذي أعدّه "براندون جونز" لمعرفة كيف تجعل Pointer Lock API ألعاب WebGL التي تعتمد على عدد اللقطات في الثانية بديلاً عمليًا. هناك عرض توضيحي آخر رائع هو 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>