تم مؤخرًا طرح 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>