# اختبر منطقة الإصابة، وليس فقط صورة الزر

> اجعل عناصر التحكم في اللعبة أسهل في الوصول إليها عن طريق فصل العمل الفني المرئي عن الحدود التفاعلية والتحقق من الحجم والتباعد والتداخل على الأجهزة التي تعمل باللمس.

- URL: https://oneshotgems.ai/ar/topics/game-touch-targets
- الفئة: لمطوري الألعاب
- النوع: دليل
- آخر تحديث: 5 أكتوبر 2026

يمكن أن يبدو عنصر التحكم كبيرًا بينما تكون منطقة التأثير الفعلية جزءًا صغيرًا من العمل الفني. في لعبة المتصفح، حدد الحدود التفاعلية بشكل متعمد واختبرها بإصبعك، وليس فقط بمؤشر الماوس الدقيق. يعتمد الهدف الصحيح على دوره وتباعده والحركة المحيطة به، لكن مناطق الإصابة الواضحة تقلل من الأخطاء العرضية وتجعل المدخلات أسهل في التفكير.

## افصل الشكل المرئي عن المنطقة التفاعلية

في رمز صغير مثل زر الإيقاف المؤقت، اجعل الحاوية القابلة للنقر أكبر من الرمز المرسوم. اترك مسافة كافية بين الإجراءات المتجاورة كي لا يفعّل الإصبع كليهما عن طريق الخطأ. في لعبة Canvas، ارسم العنصر واحسب منطقة التفاعل باستخدام بيانات التخطيط نفسها؛ فتكرار الإحداثيات في أجزاء مختلفة من الكود قد يؤدي إلى عدم تطابقها.

يحدد معيار النجاح 2.5.8 من WCAG 2.2 حدًا أدنى قدره 24 × 24 بكسل CSS، مع استثناءات محددة تشمل التباعد وعناصر التحكم المكافئة. تعامل معه كمتطلب لإمكانية الوصول، لا كسقف للتصميم: فقد يحتاج الهدف المتحرك أو الإجراء الأساسي إلى مساحة أكبر. لا تعتمد على اللون أو حدّ خافت وحده لتوضيح موضع تسجيل اللمس.

## تحقق من مناطق التفاعل على أحجام شاشة فعلية

اختبر اللمس قرب كل حافة وزاوية، وبين عناصر التحكم المتجاورة، وعند تغيير مقياس سطح اللعب. تحقق من أن عنصر التحكم المرئي ومنطقة التفاعل في DOM وإحداثيات عالم اللعبة تشير إلى الإجراء نفسه. بالنسبة إلى الأجسام الصغيرة المتحركة، يمكن توسيع منطقة الإصابة إلى ما يتجاوز الرسم مع الحفاظ على مسافة مناسبة من المخاطر.

اختبر أحجامًا مختلفة لمساحة العرض باللمس. يستطيع مؤشر الفأرة إصابة موضع بدقة أكبر مما يستطيع الإصبع. حوّل مواضع المؤشر إلى نظام إحداثيات سطح اللعب وأعد التحقق بعد تغيير الحجم. يشرح مستند W3C المعيار واستثناءاته.

## أسئلة

**هل يجب ألا يقل حجم كل هدف في اللعبة عن 24 بكسلًا؟** يشترط معيار WCAG 2.2 رقم 2.5.8 أن يكون هدف إدخال المؤشر 24 × 24 بكسل CSS على الأقل، مع وجود استثناءات. قيّم المعيار واختر مناطق تفاعل أكبر عندما يتطلب سياق اللعبة ذلك.

**هل يمكن أن تكون منطقة التفاعل أكبر من الرسم؟** نعم. توسيع منطقة التفاعل حول رمز صغير يسهل الضغط عليه، بشرط أن تظل عناصر التحكم المتقاربة مميزة وأن تكون نتائجها متوقعة.

## اتبع فضولك

- [تصميم عناصر التحكم باللمس لألعاب الويب](https://oneshotgems.ai/ar/topics/touch-controls-for-web-games): خطّط للتفاعل باللمس مع مراعاة إيماءات المتصفح، والتغذية الراجعة المرئية الواضحة، وحالة المؤشر المحددة، كي تستجيب اللعبة على الهواتف بطريقة متوقعة.
- [إنشاء تخطيطات متجاوبة لألعاب المتصفح](https://oneshotgems.ai/ar/topics/responsive-game-layouts): قم بتكييف سطح اللعبة مع حاويتها دون ربط حالة المحاكاة بأبعاد الشاشة، واختبر التخطيط عبر إطارات العرض المتغيرة.
- [صمم لعبة جوال للعب بإبهام واحد](https://oneshotgems.ai/ar/topics/one-thumb-mobile-game-design): اختصر التحكم إلى حركات يمكن تنفيذها بإبهام واحد، وراعِ وضع اليد وما تحجبه من الشاشة، ثم اختبر آلية اللعب بطرق إمساك واقعية.

## للمزيد من القراءة

- [W3C: حجم الهدف (الحد الأدنى)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum)
- [MDN: أحداث المؤشر](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)

---
الصفحة الأساسية: https://oneshotgems.ai/ar/topics/game-touch-targets