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

> حافظ على تزامن إحداثيات اللعبة وأبعاد canvas والتخطيط عندما يغيّر اللاعب حجم النافذة أو اتجاه الجهاز.

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

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

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

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

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

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

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

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

## أسئلة

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

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

## اتبع فضولك

- [اضبط دقة Canvas لعرض رسومات اللعبة بوضوح](https://oneshotgems.ai/ar/topics/canvas-pixel-density): قم بموازنة دقة دعم اللوحة القماشية ونسبة بكسل الجهاز واستخدام الذاكرة وتكلفة الرسم عندما يجب أن تبدو اللعبة واضحة عبر الشاشات.
- [اكتشف اختناقات الرسم على Canvas](https://oneshotgems.ai/ar/topics/canvas-game-performance): حلّل أداء لعبة ثنائية الأبعاد على Canvas باستخدام مشاهد قابلة للتكرار، ولا تقلل عمليات الرسم المكلفة إلا بعد قياس أين يُستهلك الوقت.

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

- [MDN: ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)

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