# حلقة لعبة تظل قابلة للتنبؤ بها عبر شاشات العرض

> قم ببناء تحديثات لعبة المتصفح والرسم حول إطارات الرسوم المتحركة دون ربط سرعة المحاكاة بمعدل تحديث شاشة اللاعب.

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

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

## افصل تغييرات الحالة عن الرسم

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

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

## اختر سياسة الاسترداد للإطارات المتأخرة

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

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

## أسئلة

**هل يجب علي استخدام setInterval للرسم؟** استخدم requestAnimationFrame للعمل المرئي لأنه تمت جدولته بالقرب من إعادة الرسم ويتم إيقافه مؤقتًا عادةً للمستندات المخفية. لا يزال بإمكان المؤقت جدولة المهام غير المرئية، ولكن لا ينبغي معاملته كساعة عرض.

**من أين يأتي الطابع الزمني للإطار؟** يوفر رد الاتصال requestAnimationFrame طابعًا زمنيًا عالي الدقة. توثق MDN توقيتها وسلوكها لمرة واحدة؛ استخدم هذا الطابع الزمني لحساب التقدم بدلاً من حساب عمليات الاسترجاعات.

## اتبع فضولك

- [استخدم وقت دلتا لتجنب قفزات الحركة](https://oneshotgems.ai/ar/topics/delta-time-in-games): قم بتطبيق الوقت المنقضي على حركة اللعبة، واختيار سياسة اللحاق بالركب الآمنة، واختبار الحركة بمعدلات تحديث مختلفة وبعد التوقف.
- [قم بإيقاف اللعبة مؤقتًا عندما تكون علامة التبويب الخاصة بها مخفية](https://oneshotgems.ai/ar/topics/pausing-background-games): استخدم تغييرات رؤية الصفحة لاختيار ما سيتم إيقافه مؤقتًا، وما سيتم حفظه، وكيفية استئناف لعبة المتصفح دون قفزة زمنية.
- [احتفظ بـ HUD للعبة المتصفح متزامنًا](https://oneshotgems.ai/ar/topics/synchronizing-game-hud): حافظ على اتساق النتائج والأرواح والمؤقتات من خلال التعامل مع حالة اللعبة كمصدر للحقيقة وتقديم قيم شاشة عرض المعلومات (HUD) من مسار تحديث واحد.

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

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

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