كيف تقوم شاشة التوقف المرتدة بحساب الاصطدامات

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

الدولة الدنيا

بالنسبة للكائن المستطيل، قم بتخزين موضعه (x, y)السرعة (vx, vy)وعرض الكائن وارتفاعه وعرض إطار العرض وارتفاعه. إذا كانت الزاوية العلوية اليسرى تمثل الموضع، فإن الحدود الصالحة هي:

0 ≤ x ≤ viewportWidth  - objectWidth
0 ≤ y ≤ viewportHeight - objectHeight

يجب أن تصطدم الشارة بمربعها المرئي، وليس بنقطة مركزية واحدة. يؤدي تغيير حجم الشارة إلى تغيير الحد الأقصى لقيم x وy.

استخدم الوقت المنقضي، وليس معدل الإطارات المفترض

يوفر المتصفح طابعًا زمنيًا عالي الدقة لملف requestAnimationFrame رد الاتصال. اطرح الطابع الزمني السابق للحصول على المللي ثانية المنقضية وقم بتحويلها إلى ثوانٍ:

dt = min((now - previous) / 1000, maximumStep)
x  = x + vx * dt
y  = y + vy * dt

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

تعكس التجاوز على الحائط

مجموعة تنفيذ بسيطة x إلى الحدود وينفي vx. وهذا يتجاهل المسافة المقطوعة خارج الجدار ويجعل الحركة غير متساوية قليلاً. إن عكس التجاوز يحفظه:

if (x < 0) {
  x = -x
  vx = abs(vx)
}
if (x > maxX) {
  x = maxX - (x - maxX)
  vx = -abs(vx)
}

قم بتطبيق المنطق المكافئ عموديًا. مع حد أقصى معقول لخطوة زمنية، يكون الانعكاس الواحد لكل محور كافيًا عادةً. يمكن للمحرك الأكثر عمومية أن يتكرر بينما يظل التجاوز الكبير جدًا خارج الحدود.

ما الذي يعتبر ضربة ركنية؟

أثناء إحدى خطوات المحاكاة، قم بتسجيل قيم منطقية منفصلة للتصادم الأفقي والتصادم الرأسي. قم بزيادة عداد الزوايا فقط عندما يصبح كلاهما صحيحًا في نفس الخطوة. لا تختبر المساواة الفاصلة العائمة مثل x === 0 && y === 0; تعرف خطوة الانعكاس بالفعل حدوث تقاطع.

يعتمد احتمال الضربة الركنية على موضع البداية ونسبة السرعة والأبعاد. يمكن أن يؤدي المسار المنفصل المتكرر تمامًا إلى تفويت الزوايا إلى أجل غير مسمى. يؤدي تغيير حجم الكائن أو تغيير حجمه إلى تغيير المسار، لذلك يجب على العداد إعادة تعيين دلالاته أو الحفاظ عليها بوضوح.

التفاصيل التي تجعل التنفيذ يبدو مصقولًا

• عند تغيير الحجم، قم بتثبيت الموضع في الحدود الجديدة دون الانتقال الآني إلى نقطة عشوائية غير ذات صلة.
• قم بتغيير لون التصادم فقط في حدث الجدار الفعلي، وليس بشكل مستمر من موضع x/y.
• حافظ على نسبة العرض إلى الارتفاع للصورة المخصصة وارفض الملفات بما يتجاوز حدود النوع والحجم الموثقة.
• اجعل عناصر التحكم في الإيقاف المؤقت وإعادة التعيين مرئية، ودع Escape يغادر وضع ملء الشاشة.
• احترم الحركة المنخفضة وتوقف عن العرض في علامة تبويب مخفية.
• تحديد نسبة بكسل الجهاز لـ Canvas العمل بحيث لا يخصص الهاتف عالي الكثافة مساحة زائدة.

جرب السلوك الموجود في كذاب شاشة دي في دي. تظل علامتها الافتراضية واضحة بينما لا تترك الصور المحلية المخصصة الجهاز أبدًا.

المراجع الفنية

• MDN: requestAnimationFrame
• MDN: واجهة برمجة تطبيقات ملء الشاشة
• MDN: الشاشة Wake Lock واجهة برمجة التطبيقات

اختر ناقل السرعة

عادةً ما يمثل شريط تمرير السرعة الحجم، بينما يأتي الاتجاه من متجه تم تسويته. لزاوية θ والسرعة s:

vx = cos(θ) * s
vy = sin(θ) * s

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

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

التعامل مع خطوات زمنية كبيرة وتأملات متعددة

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

function reflect(position, velocity, maximum) {
  let hits = 0
  while ((position < 0 || position > maximum) && hits < 8) {
    if (position < 0) {
      position = -position
      velocity = Math.abs(velocity)
    } else {
      position = maximum - (position - maximum)
      velocity = -Math.abs(velocity)
    }
    hits++
  }
  return { position: clamp(position, 0, maximum), velocity, hits }
}

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

أحداث الاصطدام لها قوة أكبر من الاتجاه

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

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

تتطلب الممرات نموذجًا متعمدًا للتطهير

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

في الرسوم المتحركة المستندة إلى DOM، قد يكون المسار عبارة عن مجموعة محدودة من عناصر الخبو. لا تقم بإلحاق عقدة جديدة إلى الأبد؛ الذي يسرب الذاكرة ويضر في النهاية بأداء التفاعل.

تعمل النصوص والصور المخصصة على تغيير حدود التصادم

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

يجب فك تشفير الصورة المحلية قبل الوثوق بأبعادها الجوهرية. ScreenOrbit يقبل فقط PNG, JPEG، و WebP في حدود 5 ميجابايت و4096 بكسل لكل جانب، يتحقق من الأبعاد التي تم فك تشفيرها، ويحافظ على نسبة العرض إلى الارتفاع، ويحرر عنوان URL للكائن المؤقت. يرفض SVG و HTML بدلاً من محاولة تطهير المحتوى المحلي النشط أو المعقد بشكل غير متوقع.

تغيير الحجم دون فقدان الكائن

عندما يتغير إطار العرض، احسب الحدود الجديدة واحتفظ بالموقع النسبي حيثما أمكن ذلك:

ratioX = oldMaxX > 0 ? x / oldMaxX : 0.5
ratioY = oldMaxY > 0 ? y / oldMaxY : 0.5
x = clamp(ratioX * newMaxX, 0, newMaxX)
y = clamp(ratioY * newMaxY, 0, newMaxY)

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

Canvas بكسل و CSS هندسة

CSS الأبعاد تحدد حدود الحركة. ال Canvas يمكن أن يكون المخزن المؤقت للدعم أكبر بالنسبة للشاشة عالية الكثافة: اضرب بنسبة بكسلات الجهاز المحددة وقم بقياس سياق الرسم بحيث تظل الإحداثيات كما هي CSS وحدات. بدون المقياس، تستخدم الفيزياء والعرض وحدات مختلفة؛ بدون الغطاء، 4× يمكن للهاتف تخصيص ستة عشر ضعف مساحة البكسل.

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

الإيقاف المؤقت والرؤية ودورة حياة ملء الشاشة

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

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

اختبر المحرك، وليس مجرد جولة واحدة جذابة

• ضربات مباشرة على الجدران اليسرى واليمنى والعلوية والسفلية
• تصادم x/y متزامن وزيادة زاوية واحدة
• تأثيرات الزاوية القريبة التي تحدث في الخطوات المجاورة ولا يتم احتسابها
• تجاوز الانعكاس مع الحفاظ على المسافة والإشارة
• تنتج تسلسلات الطابع الزمني 60 و120 و144 هرتز سفرًا متساويًا خلال فترة زمنية متساوية
• فترة توقف طويلة متبوعة باستئناف دون انتقال فوري
• قم بتغيير الحجم إلى أصغر من الموضع الحالي وأصغر من الكائن المختار
• رفض الصورة المحلية حسب النوع وحجم البايت والأبعاد التي تم فك تشفيرها وفشل فك التشفير
• دورات إعادة التعيين/البدء المتكررة مع رد اتصال نشط واحد ولا يوجد عنوان URL للكائن محفوظ
• الحركة المنخفضة، وإيقاف لوحة المفاتيح مؤقتًا، ورفض ملء الشاشة، وسلوك علامة التبويب المخفية

تغطي الاختبارات الآلية التحولات الحسابية والحالة؛ يغطي الكاتب المسرحي دورة حياة المتصفح والهندسة سريعة الاستجابة. يتحقق ذلك من خلال تشغيل الاستقرار اليدوي لمدة ثلاثين دقيقة Canvas يظل الحجم والذاكرة وعدد الحلقات ثابتًا.

إمكانية الوصول إلى ما هو أبعد من الحركة المنخفضة

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

لماذا يمكن أن تستغرق الزاوية وقتًا طويلاً

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

الندرة هي جزء من النداء. العداد هو سجل حدث صادق، وليس جهاز توقيت مصمم لصناعة الزاوية. إعادة الضبط تجعل حالة البداية معروفة؛ لا يعد بالضربة.

استخدم هذه الصفحة لمهمة واحدة واضحة

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

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

إعداد نقطة انطلاق مستقرة

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

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

اتبع عملية عملية من أربعة أجزاء

1. تحديد الهدف. اشرح توقيت الإطار، وتصادم الجدار، وتغيير الحجم، وقواعد ضرب الزاوية خلف المشهد المرتد. توقف إذا تغيرت المهمة إلى مشكلة مختلفة.
2. التقاط خط الأساس. سجل حجم إطار العرض، ونسبة بكسل الجهاز، والوقت المنقضي، والموضع، والسرعة، وعدد التصادمات، وتغيير حجم الحدث. استخدم القيم والأسماء الدقيقة حيثما وجدت.
3. تحقق من المخاطر الرئيسية. تعمل حركة عدد الإطارات بسرعات مختلفة على شاشات 60 هرتز و120 هرتز. قم بتصحيح الإعداد قبل تكرار الخطوة.
4. اختر الإجراء التالي. افتح شاشة توقف DVD، وقم بتغيير أحد عناصر التحكم، وقارن العداد المباشر بالصيغ الموجودة في الدليل. احتفظ بالسجل الأصلي للمقارنة.

بناء الأدلة التي يفهمها شخص آخر

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

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

تجنب الأدلة الضعيفة والادعاءات غير الواضحة

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

انتقل إلى الإجراء المفيد التالي

افتح شاشة توقف DVD، وقم بتغيير أحد عناصر التحكم، وقارن العداد المباشر بالصيغ الموجودة في الدليل. احتفظ بالخط الأساسي وحد الصفحة بجانب النتيجة. اتصل بالصانع أو البائع أو النظام الأساسي أو المتخصص أو صاحب الحقوق أو ScreenOrbit المحرر عندما يقع القرار خارج نطاق الصفحة.