# تكييف العرض مع الحفاظ على نموذج اللعبة

> قم بتكييف سطح اللعبة مع حاويتها دون ربط حالة المحاكاة بأبعاد الشاشة، واختبر التخطيط عبر إطارات العرض المتغيرة.

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

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

## قم بقياس الحاوية واختر مقياسًا

استخدم أبعاد حاوية اللعبة بدلاً من افتراض أن النافذة هي المنطقة القابلة للعب. يمكن لـ ResizeObserver الإبلاغ عن وقت تغير هذا العنصر، بما في ذلك التغييرات الناتجة عن التخطيط المحيط بدلاً من تغيير حجم إطار العرض. قرر ما إذا كان يجب على اللعبة أن تكون على شكل حرف letter أو قصها أو إعادة تدفقها بنسبة عرض إلى ارتفاع ضيقة، واجعل الاختيار مرئيًا بدلاً من تمديد الدوائر إلى أشكال بيضاوية.

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

## استمر في تغيير الحجم خارج حلقة المحاكاة

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

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

## أسئلة

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

**لماذا نستخدم ResizeObserver بدلاً من تغيير حجم النافذة فقط؟** يمكن لحاوية اللعبة تغيير حجمها بسبب التخطيط المحيط بها دون تغيير حجم النافذة. يقوم ResizeObserver بالإبلاغ عن تغييرات أبعاد العنصر مباشرة.

## اتبع فضولك

- [التعامل مع تغيّر اتجاه الشاشة في ألعاب المتصفح](https://oneshotgems.ai/ar/topics/game-orientation-changes): اجعل اللعب قابلاً للقراءة عندما يدور الجهاز عن طريق إعادة حساب التخطيط ورسم خرائط الإدخال دون التعامل مع الاتجاه باعتباره إعادة تشغيل للعبة.
- [حجم أهداف اللمس لألعاب المتصفح](https://oneshotgems.ai/ar/topics/game-touch-targets): اجعل عناصر التحكم في اللعبة أسهل في الوصول إليها عن طريق فصل العمل الفني المرئي عن الحدود التفاعلية والتحقق من الحجم والتباعد والتداخل على الأجهزة التي تعمل باللمس.
- [تحويل إحداثيات المؤشر على Canvas إلى إحداثيات اللعبة](https://oneshotgems.ai/ar/topics/hit-testing-canvas-coordinates): قم بتحويل مواضع المؤشر إلى إحداثيات عالم اللعبة بحيث تظل الأهداف المرئية ومناطق الاستجابة للنقر متوازية بعد القياس.

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

- [MDN: ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
- [MDN: نسبة العرض إلى الارتفاع](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio)

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