كيف تمنع عناصر التحكم في لوحة المفاتيح من تعطيل لغز الانزلاق القائم على الفأرة
إذا كنت تبني لغز انزلاق مستندًا إلى المتصفح كوسيلة مساعدة لمغامرة على الطاولة، فاجعل سحب الفأرة وحركات لوحة المفاتيح تعمل على حالة اللغز نفسها، مع حصر اختصارات لوحة المفاتيح في نطاق اللغز فقط. الفحوصات الأساسية هي التركيز (focus)، ومعالجة الأحداث، وإتمام السحب: لا ينبغي لضغطة مفتاح في حقل نصي أن تحرك قطعة، ولا ينبغي للسحب أن ينقطع أو يُفقد عند تجاوز المؤشر لحدود القطعة.
ابدأ بتحديد ما يُحرّك اللغز بشكل غير متوقع
عندما يتفاعل اللغز مع مفتاح سهم أثناء عملية باستخدام الفأرة، غالبًا ما يكون السبب مستمع لوحة مفاتيح واسع النطاق للغاية. يمكن لمعالج مرتبط بـ document أو window استقبال مفاتيح الأسهم حتى عندما يكتب اللاعب في حقل تلميح، أو يستخدم قائمة، أو يتفاعل مع عنصر تحكم آخر. وقد يؤدي أيضًا إلى تشغيل سلوك المتصفح التلقائي، مثل التمرير، في نفس الوقت الذي يغير فيه اللغز.
أعد إنتاج المشكلة باستخدام قائمة تحقق قصيرة: انقر على قطعة واسحبها؛ اسحب عبر حدود اللغز؛ اضغط على مفتاح سهم أثناء تركيز اللغز؛ ثم اضغط على مفتاح أثناء تركيز حقل إدخال تلميح أو زر أو قائمة. لاحظ ما إذا كانت اللوحة تتغير، أو الصفحة تتمرر، أو التركيز ينتقل، أو السحب يتوقف. تميز هذه الملاحظات بين مشكلة معالج اللغز وبين تتبع المؤشر أو سلوك المتصفح الافتراضي.
عيّن حد تركيز صريح للغز
عامل اللوحة كعنصر تحكم له نقطة دخول واضحة للوحة المفاتيح. استخدم حاوية لوحة قابلة للتركيز، وعالج مفاتيح اللغز فقط عندما تكون تلك اللوحة نشطة، أو عندما يكون التركيز على قطعة تابعة للوحة. احتفظ بعناصر التحكم غير ذات الصلة، مثل أزرار التلميحات وحقول النصوص، خارج نطاق معالجة المفاتيح هذا. اجعل موضع التركيز مرئيًا حتى يتمكن اللاعب من معرفة متى ستستجيب اللوحة.
تحقق من هدف الحدث (event target) قبل تفسير المفتاح. إذا كان التركيز في حقل إدخال، أو مساحة نص، أو عنصر قابل للتحرير، أو زر منفصل، فاترك المفتاح وشأنه. بالنسبة لأداة مغامرة تعاونية، يعد هذا مهمًا عندما يُدخل أحد اللاعبين رونًا أو اسمًا أو تلميحًا بينما يقوم شخص آخر بالتحكم في اللغز: لا ينبغي أن تتحول الكتابة إلى تحريك غير مقصود للقطع.
لا تزال هناك حاجة لعمل تشغيل لوحة المفاتيح. توضح إرشادات W3C أنه ينبغي توفير الوظائف عبر واجهة لوحة المفاتيح حيثما أمكن، وتحدد تحريك الكائنات إلى موقع كإجراء يمكن تشغيله بواسطة لوحة المفاتيح. حدد نطاق المفاتيح بعناية بدلاً من إزالتها تمامًا. W3C: Understanding Success Criterion 2.1.1: Keyboard
افصل أوامر اللغز عن السلوكيات الافتراضية للمتصفح
اختر مجموعة صغيرة وموثقة من المفاتيح للوحة، مثل مفاتيح الأسهم عندما تكون اللوحة في وضع التركيز. في المعالج، تأكد أولاً من أن المفتاح هو أحد المفاتيح التي يستخدمها اللغز وأن اللوحة هي الهدف النشط. عندها فقط قم بتطبيق الحركة، وإذا لزم الأمر، قم بإلغاء الإجراء الافتراضي للمتصفح لهذا المفتاح. تجنب إلغاء كل المفاتيح بشكل عام: قد يحتاج اللاعبون إلى الكتابة العادية، والتنقل في المتصفح، وعناصر التحكم خارج اللغز.
يلغي preventDefault() الإجراء الافتراضي للمتصفح عندما يكون الحدث قابلاً للإلغاء، ولكنه لا يمنع الحدث من الانتشار إلى معالجات أخرى. هذا يعني أنه يمكن أن يمنع تمرير الصفحة دون إصلاح مستمع ثانٍ يقوم أيضًا بتحريك قطعة. ابحث عن المعالج الذي يغير حالة اللعبة وحدد نطاقه بدقة؛ لا تستخدم الإلغاء الشامل كبديل لتحديد ملكية واضحة للأحداث. MDN: Event: preventDefault() method
حافظ على سلامة سحب المؤشر عبر اللوحة
لتفاعل السحب، تتبّع مؤشرًا نشطًا واحدًا بدءًا من الضغطة التي تبدأ السحب وحتى تحريره أو إلغائه. توفر أحداث المؤشر pointerdown وpointermove وpointerup وpointercancel؛ ويمكن لخاصية التقاط المؤشر (pointer capture) أن تحافظ على توجيه أحداث المؤشر اللاحقة إلى اللوحة حتى عندما يتحرك المؤشر خارج منطقة النقر الأصلية. امسح حالة السحب النشط عند كل من pointerup وpointercancel، حتى لا تترك الإيماءة المنقطعة اللغز في حالة سحب عالقة. MDN: Pointer events
تجنب إعادة بناء أو استبدال القطعة المسحوبة بطريقة تفقدها تتبع المؤشر. إذا واجهت الواجهة تحريكًا لعنصر في DOM أثناء السحب، تذكر MDN أنه يجب تعيين التقاط المؤشر بعد هذا التحريك. حدد ما يحدث عند تحرير المؤشر فوق موضع غير صالح: بالنسبة للغز الانزلاق، فإن إعادة القطعة إلى موضعها السابق أو إحكام تثبيتها في موضع قانوني أسهل في الفهم من التغيير الصامت لقطع غير ذات صلة.
وفّر الحركة نفسها دون الحاجة إلى السحب
يمكن للغز دعم مدخلات الفأرة ولوحة المفاتيح والمؤشر البسيط معًا. على سبيل المثال، يمكن للنقر على قطعة مجاورة للمساحة الفارغة أن يحركها؛ ويمكن أن يظل سحب هذه القطعة إيماءة اختيارية للتعامل المباشر؛ كما يمكن لمفاتيح الأسهم عند تركيز اللوحة توفير التشغيل عبر لوحة المفاتيح. يجب أن تستدعي كل هذه المدخلات منطق التحقق من صحة الحركة نفسه، بحيث تكون الحركة قانونية أو مرفوضة باستمرار وبصرف النظر عن طريقة طلبها.
يوفر هذا أيضًا اختبار تصميم مفيدًا: هل يمكن للاعب إكمال اللغز بنقرة واحدة ودون سحب؟ تتعامل إرشادات WCAG 2.2 الصادرة عن W3C مع الوصول عبر لوحة المفاتيح وبديل المؤشر الفردي للسحب على أنهما مسألتان منفصلتان. تتضمن أمثلتها استبدال السحب بنقرات على عناصر التحكم في الاتجاه. لا يوفر البديل المخصص للوحة المفاتيح فقط هذا البديل للمؤشر بحد ذاته. W3C: Understanding Success Criterion 2.5.7: Dragging Movements
بالنسبة للغز الانزلاق، غالبًا ما يكون النقر على قطعة مجاورة واحدة في كل مرة بديلاً طبيعيًا لأنه يحافظ على قاعدة الحركة المجاورة في اللغز. إذا كان هذا التفاعل غير واضح، يمكن لأزرار الحركة المرئية توضيح الاتجاه المتاح. تقدم تقنية G219 من W3C أمثلة على عناصر تحكم بمؤشر فردي تنفذ نفس الإجراء الأساسي دون سحب. W3C: G219: Ensuring that an alternative is available for dragging movements that operate on content
اختبر باستخدام مصفوفة مدخلات موجزة
قبل استخدام اللغز على طاولة اللعب، قم بتجربة كل مسار إدخال باستخدام نفس تخطيط اللوحة وحالة البدء. تأكد من أن الحركة الصالحة تُحدّث اللوحة مرة واحدة، وأن الحركة غير الصالحة تتركها دون تغيير، وأن عناصر التحكم غير ذات الصلة تحتفظ بسلوكها الطبيعي.
الفأرة: اسحب قطعة مسموحًا بها، وأفلتها خارج اللوحة، ثم حاول القيام بحركة غير قانونية. تأكد من أن اللوحة لا تفقد السحب ولا تتغير بشكل غير متوقع.
لوحة المفاتيح: ركّز على اللوحة، واستخدم كل اتجاه مدعوم، ثم انقل التركيز إلى حقل نصي واكتب. تأكد من أن المفاتيح التي تحرك القطع هي فقط تلك التي تركز على اللوحة، وأن الكتابة لا تؤدي إلى تمرير اللوحة أو تغييرها.
المؤشر دون سحب: انقر فوق قطعة مجاورة صالحة. تأكد من أنها تنتج نفس الحركة التي تنتجها طرق الإدخال الأخرى.
المقاطعة: قم بإلغاء السحب أو التخلي عنه، ثم ابدأ سحبًا آخر. تأكد من عدم بقاء أي تحديد قديم معلقًا.
إذا فشل أحد الاختبارات، فافحص أضيق طبقة ذات صلة أولاً: هدف الحدث وحالة التركيز بالنسبة لسلوك لوحة المفاتيح؛ والتقاط المؤشر والتنظيف بالنسبة لعمليات السحب المنقطعة؛ وأداة التحقق من الحركة المشتركة بالنسبة للقواعد غير المتسقة. يمنح هذا التسلسل المطور طريقة ملموسة لتحديد المشكلة دون تحويل أداة المغامرة إلى درس تعليمي عام حول عناصر التحكم.