History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
solution	…
your-work	…
README.md	Update Quiz Link	3 weeks ago
assignment.md	…

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 });
    }
  })

أضف life و points.

تهيئة المتغيرات. تحت this.cooldown = 0 في فئة Hero، قم بتعيين life و points:
```
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. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.