الدرس 10 من 10

كاميرا تتبع اللاعب

هدف الدرس

عالم أكبر من الشاشة

01

الشرح

حين يكون العالم أكبر من الشاشة لا يتحرّك العالم؛ تتحرّك الكاميرا. هي مستطيل بمقاس الشاشة، موضعه بإحداثيات العالم، وكل ما يُرسم يُزاح بعكس موضعها: screenX = worldX - camera.x.

والكاميرا تتوسّط اللاعب: camera.x = player.x - camera.w / 2. لكن قرب حافّة العالم يكشف هذا ما وراءها — فراغًا لم يُرسم. لذا تُحصر بين 0 وworld.w - camera.w، فيتوقّف التمرير عند الحافّة ويمضي اللاعب نحو طرف الشاشة.

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

02

المطلوب

اكتب follow(camera, player, world): تضع الكاميرا { x, y, w, h } بحيث يتوسّطها اللاعب { x, y }، محصورة داخل العالم { w, h }. واكتب worldToScreen(x, y, camera) تُرجع { x, y } على الشاشة. المعاينة ترسم كل شيء عبرها.

معايير التصحيح

5 معايير
  1. الكاميرا تتوسّط اللاعب
  2. لا تكشف ما قبل بداية العالم
  3. ولا ما بعد نهايته
  4. worldToScreen تطرح موضع الكاميرا
  5. اللاعب المتبوع في منتصف الشاشة
index.html
المعاينة
index.html100%
–/5

اضغط «تشغيل» ليبدأ الفحص.

5 معايير في بطاقة «المطلوب».