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

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

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

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

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

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

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

أسئلة عن ⁨تخطيط متجاوب لألعاب المتصفح⁩