History

softchris 04881ec984 🌐 Update translations via Co-op Translator		10 months ago
..
solution	🌐 Update translations via Co-op Translator	12 months ago
your-work	🌐 Update translations via Co-op Translator	12 months ago
README.md	🌐 Update translations via Co-op Translator	10 months ago
assignment.md	🌐 Update translations via Co-op Translator	12 months 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. ما هي السمات المشتركة بينها؟

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

تحدي GitHub Copilot Agent 🚀

استخدم وضع Agent لإكمال التحدي التالي:

الوصف: قم بتحسين نظام النقاط في لعبة الفضاء عن طريق تنفيذ ميزة أعلى النقاط مع تخزين دائم وآليات نقاط إضافية.

المهمة: قم بإنشاء نظام أعلى النقاط الذي يحفظ أفضل نقاط اللاعب في localStorage. أضف نقاطًا إضافية لقتل الأعداء بشكل متتالي (نظام الكومبو) وقم بتنفيذ قيم نقاط مختلفة لأنواع الأعداء المختلفة. قم بتضمين مؤشر بصري عندما يحقق اللاعب أعلى نقاط جديدة وعرض أعلى النقاط الحالية على شاشة اللعبة.

🚀 التحدي

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

اختبار ما بعد المحاضرة

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

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

الواجب

بناء لعبة النقاط

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