12 KiB

Raw Blame History

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

اختبار ما قبل المحاضرة

هل أنت مستعد لجعل لعبة الفضاء الخاصة بك تبدو وكأنها لعبة حقيقية؟ دعنا نضيف نظام النقاط وإدارة الأرواح - الآليات الأساسية التي حولت ألعاب الأركيد المبكرة مثل Space Invaders من مجرد عروض بسيطة إلى وسائل ترفيهية ممتعة. هنا تصبح لعبتك قابلة للعب بشكل حقيقي.

رسم النص على الشاشة - صوت لعبتك

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

لديك سيطرة كاملة على مظهر النص:

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

✅ استكشف المزيد حول إضافة النص إلى اللوحة - قد تفاجأ بمدى الإبداع الذي يمكنك تحقيقه باستخدام الخطوط والتنسيقات!

الأرواح - أكثر من مجرد رقم

في تصميم الألعاب، تمثل "الحياة" هامش الخطأ للاعب. يعود هذا المفهوم إلى آلات الكرة والدبابيس، حيث تحصل على عدة كرات للعب بها. في ألعاب الفيديو المبكرة مثل Asteroids، كانت الأرواح تمنح اللاعبين الإذن للمخاطرة والتعلم من الأخطاء.

التمثيل البصري مهم للغاية - عرض أيقونات السفن بدلاً من مجرد "الأرواح: 3" يخلق تعرفًا بصريًا فوريًا، مشابهًا للطريقة التي استخدمت بها خزائن الأركيد المبكرة الرموز للتواصل عبر الحواجز اللغوية.

بناء نظام المكافآت في لعبتك

الآن سنقوم بتنفيذ أنظمة التغذية الراجعة الأساسية التي تبقي اللاعبين متحمسين:

نظام النقاط: كل سفينة عدو يتم تدميرها تمنح 100 نقطة (الأرقام المستديرة أسهل للاعبين لحسابها ذهنياً). يتم عرض النقاط في الزاوية السفلية اليسرى.
عداد الأرواح: يبدأ البطل بثلاث أرواح - معيار تم تحديده بواسطة ألعاب الأركيد المبكرة لتحقيق التوازن بين التحدي وقابلية اللعب. كل اصطدام مع عدو يكلف حياة واحدة. سنعرض الأرواح المتبقية في الزاوية السفلية اليمنى باستخدام أيقونات السفن .

لنبدأ البناء!

أولاً، قم بإعداد مساحة العمل الخاصة بك. انتقل إلى الملفات في مجلد your-work. يجب أن ترى هذه الملفات:

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

لاختبار لعبتك، قم بتشغيل خادم التطوير من مجلد your_work:

cd your-work
npm start

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

حان وقت البرمجة!

احصل على الأصول البصرية التي تحتاجها. انسخ ملف life.png من مجلد solution/assets/ إلى مجلد your-work. ثم أضف lifeImg إلى وظيفة window.onload الخاصة بك:
```
lifeImg = await loadTexture("assets/life.png");
```
لا تنسَ إضافة lifeImg إلى قائمة الأصول الخاصة بك:
```
let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();
```
قم بإعداد متغيرات اللعبة الخاصة بك. أضف بعض الأكواد لتتبع إجمالي النقاط (يبدأ من 0) والأرواح المتبقية (تبدأ من 3). سنعرض هذه على الشاشة حتى يعرف اللاعبون دائمًا مكانهم.

تنفيذ اكتشاف الاصطدام. قم بتمديد وظيفة 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();
```

تنفيذ عواقب اللعبة والمكافآت. الآن سنضيف أنظمة التغذية الراجعة التي تجعل تصرفات اللاعب ذات معنى:
1. الاصطدامات تكلف الأرواح. في كل مرة يصطدم فيها البطل الخاص بك مع عدو، يجب أن تخسر حياة.
  
  أضف هذه الطريقة إلى فئة Hero الخاصة بك:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. إطلاق النار على الأعداء يكسب النقاط. كل ضربة ناجحة تمنح 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 🚀

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

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

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

🚀 التحدي

لديك الآن لعبة وظيفية مع نظام النقاط والأرواح. فكر في الميزات الإضافية التي قد تعزز تجربة اللاعب.

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

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

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

الواجب

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

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

12 KiB Raw Blame History