الدرس 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. اللاعب الذي تتبعه الكاميرا في منتصف الشاشة
03

تلميحات

0/3
دروس المسارأتممت 0 من 10

تبني لعبة حقيقية على canvas تعمل في أي متصفح، فتتعلّم حلقة اللعب والحركة والتصادم وحساب النقاط.

مستواه متوسّط، وفيه 10 دروس مجموع مدّتها ساعتان ونصف.

index.html
المعاينة
index.html100%
–/5

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

تجد 5 فحوص في بطاقة «المطلوب».

دروس المسارأتممت 0 من 10

تبني لعبة حقيقية على canvas تعمل في أي متصفح، فتتعلّم حلقة اللعب والحركة والتصادم وحساب النقاط.

مستواه متوسّط، وفيه 10 دروس مجموع مدّتها ساعتان ونصف.