تعامل مع تغيير الحجم بوصفه انتقالًا مضبوطًا في التخطيط

راقب العنصر الذي تستخدمه اللعبة فعليًا

استخدم ResizeObserver عندما يمكن أن يتغير حجم حاوية canvas بمعزل عن النافذة، مثل وجودها داخل لوحة مقسمة أو صفحة تتغير عناصر التحكم فيها. اقرأ حجم المحتوى، ولا تحدّث دقة الرسم الداخلية لـcanvas إلا إذا تغيرت فعلًا، ثم أعد حساب مقياس التحويل بين إحداثيات CSS وإحداثيات عالم اللعبة.

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

اختبر التخطيط والإدخال كسلوك واحد

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

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

أسئلة عن ⁨التعامل مع تغيير حجم ألعاب المتصفح⁩