يمكن الآن لتطبيقات الويب إيقاف تسريع الماوس عند تسجيل أحداث المؤشر.
إنّ الحركة المتسارعة هي ميزة مناسبة للاستخدام عند استخدام الماوس أو لوحة اللمس بهدف تحريك المؤشر على الشاشة. فهو يتيح حركة دقيقة عن طريق التحرك ببطء مع السماح أيضًا للمؤشر بعبور الشاشة بأكملها بحركة قصيرة سريعة. وعلى وجه التحديد، بالنسبة لنفس المسافة المادية التي تحرّك الماوس، فإن المؤشر على الشاشة يتحرك أبعد إذا تم قطع المسافة بشكل أسرع.
تفعِّل أنظمة التشغيل ميزة تسريع الماوس تلقائيًا. في بعض ألعاب منظور الطرف الأول، وهي ألعاب الرماية من منظور البطل عادةً (FPS)، يتم استخدام بيانات الإدخال بالماوس الأولية للتحكّم في دوران الكاميرا بدون ضبط تسارع. تؤدي الحركة المادية نفسها، سواء كانت بطيئة أو سريعة، إلى نفس الدوران. وينتج عن ذلك تجربة لعب أفضل ودقة أعلى وفقًا للاعبين المحترفين.
بدءًا من الإصدار Chrome 88، يمكن لتطبيقات الويب التبديل بين بيانات حركة الماوس المسرّعة وغير المسرّعة بفضل واجهة برمجة التطبيقات المحدّثة لقفل Pointer.
تستخدم منصات الألعاب المستنِدة إلى الويب، مثل Google Stadia وNvidia GeForce Now حاليًا، هذه الإمكانات الجديدة لإرضاء اللاعبين الذين يستخدمون ألعابًا من منظور البطل.
استخدام واجهة برمجة التطبيقات
طلب قفل المؤشر
قفل المؤشر هو المصطلح الرسمي الذي يُستخدَم عندما يخفي تطبيق سطح المكتب رمز المؤشر ويفسّر حركة الماوس لأداء مهمة أخرى، مثل الاطّلاع على محيطك في عالم ثلاثي الأبعاد.
توضّح لك السمتان movementX
وmovementY
من أحداث مستند mousemove
مقدار حركة مؤشر الماوس منذ آخر حدث نقل. ومع ذلك، لا يتم تحديث هذه المعلومات عندما يتحرك المؤشر خارج صفحة الويب.
document.addEventListener("mousemove", (event) => {
console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
});
يتيح لك التقاط مؤشر الماوس (أو طلب قفل المؤشر) عدم القلق بشأن تحرك المؤشر للخارج بعد الآن. يُعد هذا مفيدًا بشكل خاص لألعاب الويب الغامرة. عندما يكون المؤشر مقفلاً، تنتقل جميع أحداث الماوس إلى العنصر المستهدف لقفل المؤشر.
استخدِم requestPointerLock()
في العنصر المستهدَف لطلب قفل المؤشر،
واستمع إلى حدثَي pointerlockchange
وpointerlockerror
لتتبُّع التغييرات في قفل
المؤشر.
const myTargetElement = document.body;
// Call this function to request a pointer lock.
function requestPointerLock() {
myTargetElement.requestPointerLock();
}
document.addEventListener("pointerlockchange", () => {
if (document.pointerLockElement) {
console.log(`pointer is locked on ${document.pointerLockElement}`);
} else {
console.log("pointer is unlocked");
}
});
document.addEventListener("pointerlockerror", () => {
console.log("pointer lock error");
});
إيقاف ميزة "تسريع الماوس"
اتصل بالرقم requestPointerLock()
باستخدام { unadjustedMovement: true }
لإيقاف
التعديل على مستوى نظام التشغيل لتسريع الماوس والوصول إلى إدخال الماوس الأوّلي.
بهذه الطريقة، لن تتضمّن بيانات حركة الماوس من أحداث mousemove
تسريع الماوس عند قفل المؤشر.
استخدِم الوعد الجديد الذي تم إرجاعه من requestPointerLock()
لمعرفة ما إذا كان الطلب ناجحًا.
function requestPointerLockWithUnadjustedMovement() {
const promise = myTargetElement.requestPointerLock({
unadjustedMovement: true,
});
if (!promise) {
console.log("disabling mouse acceleration is not supported");
return;
}
return promise
.then(() => console.log("pointer is locked"))
.catch((error) => {
if (error.name === "NotSupportedError") {
// Some platforms may not support unadjusted movement.
// You can request again a regular pointer lock.
return myTargetElement.requestPointerLock();
}
});
}
من الممكن التبديل بين بيانات حركة الماوس المسرّعة وغير المتسارعة بدون رفع قفل المؤشر. ما عليك سوى طلب قفل المؤشر مرة أخرى مع الخيار المطلوب. وإذا لم ينجح هذا الطلب، فسيبقى القفل الأصلي كما هو وسيتم رفض الوعد الذي تم إرجاعه. لن يتم تشغيل أي أحداث لقفل المؤشر لطلب تغيير تعذّر تنفيذه.
دعم المتصفح
تتوفّر واجهة برمجة التطبيقات Pointer Lock API بشكل جيد في جميع المتصفّحات. ومع ذلك، فإنّ المتصفّحات المستندة إلى Chromium (مثل Chrome وEdge وما إلى ذلك) هي الوحيدة التي تتيح إيقاف تعديل تسريع الماوس على مستوى نظام التشغيل اعتبارًا من تشرين الأول (أكتوبر) 2020. راجع جدول توافق المتصفح الخاص بشبكة MDN للحصول على التحديثات.
دعم نظام التشغيل
يمكن إيقاف ميزة "تسريع الماوس" على مستوى نظام التشغيل على ChromeOS و macOS Catalina 10.15.1 وWindows. وسيتبعه نظام التشغيل Linux.
عيّنة
يمكنك استخدام Pointer Lock API من خلال تشغيل النموذج على Glitch. تأكّد من التحقق من رمز المصدر.
روابط مفيدة
- الشرح
- مواصفات PR
- مستودع GitHub
- إدخال ChromeStatus
- خطأ التتبُّع في Chrome
- نية الشحن
- مكانة Mozilla
- موضع WebKit
الشكر والتقدير
نتوجّه بالشكر إلى جيمس هولير وتوماس شتاينر وجو ميديلي وكايس باسك وفنسنت شيب على مراجعاتهم لهذه المقالة.