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