History

leestott 53ebf5aeb8 🌐 Update translations via Co-op Translator		3 weeks ago
..
solution	🌐 Update translations via Co-op Translator	4 weeks ago
your-work	🌐 Update translations via Co-op Translator	4 weeks ago
README.md	🌐 Update translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

بناء لعبة فضاء الجزء الخامس: النقاط والأرواح

اختبار ما قبل الدرس

في هذا الدرس، ستتعلم كيفية إضافة النقاط إلى اللعبة وحساب الأرواح.

رسم النص على الشاشة

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

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ اقرأ المزيد عن كيفية إضافة النص إلى canvas، ولا تتردد في جعل النص يبدو أكثر جاذبية!

الحياة كمفهوم في الألعاب

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

ما الذي سنبنيه

لنقم بإضافة التالي إلى لعبتك:

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

الخطوات الموصى بها

حدد الملفات التي تم إنشاؤها لك في مجلد your-work. يجب أن يحتوي على التالي:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

ابدأ مشروعك من مجلد your_work بكتابة:

cd your-work
npm start

سيقوم الأمر أعلاه بتشغيل خادم HTTP على العنوان http://localhost:5000. افتح متصفحًا وأدخل هذا العنوان، في الوقت الحالي يجب أن يعرض البطل وجميع الأعداء، وعند الضغط على الأسهم اليسرى واليمنى، يتحرك البطل ويمكنه إسقاط الأعداء.

إضافة الكود

انسخ الأصول المطلوبة من مجلد solution/assets/ إلى مجلد your-work؛ ستضيف أصلًا باسم life.png. أضف lifeImg إلى دالة window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

أضف lifeImg إلى قائمة الأصول:

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

أضف المتغيرات. أضف كودًا يمثل إجمالي النقاط (0) وعدد الأرواح المتبقية (3)، واعرض هذه القيم على الشاشة.

قم بتوسيع دالة updateGameObjects(). قم بتوسيع دالة updateGameObjects() للتعامل مع اصطدامات الأعداء:

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

أضف الأرواح والنقاط.

تهيئة المتغيرات. تحت this.cooldown = 0 في فئة Hero، قم بتعيين الأرواح والنقاط:
```
this.life = 3;
this.points = 0;
```

رسم المتغيرات على الشاشة. قم برسم هذه القيم على الشاشة:

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

إضافة الدوال إلى حلقة اللعبة. تأكد من إضافة هذه الوظائف إلى دالة window.onload تحت updateGameObjects():
```
drawPoints();
drawLife();
```

تنفيذ قواعد اللعبة. قم بتنفيذ قواعد اللعبة التالية:

لكل اصطدام بين البطل والعدو، قم بخصم حياة.

قم بتوسيع فئة Hero لتنفيذ هذا الخصم:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

لكل ليزر يصيب عدوًا، قم بزيادة نقاط اللعبة بمقدار 100 نقطة.

قم بتوسيع فئة Hero لتنفيذ هذه الزيادة:

  incrementPoints() {
    this.points += 100;
  }

أضف هذه الوظائف إلى مرسلات أحداث الاصطدام:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});

✅ قم ببعض البحث لاكتشاف ألعاب أخرى تم إنشاؤها باستخدام JavaScript/Canvas. ما هي السمات المشتركة بينها؟

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

🚀 التحدي

كودك أصبح شبه مكتمل. هل يمكنك تصور الخطوات التالية؟

اختبار ما بعد الدرس

المراجعة والدراسة الذاتية

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

الواجب

بناء لعبة تسجيل النقاط

إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.