25 KiB

Raw Blame History

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

journey
    title Your Game Design Journey
    section Player Feedback
      Understand scoring psychology: 3: Student
      Learn visual communication: 4: Student
      Design reward systems: 4: Student
    section Technical Implementation
      Canvas text rendering: 4: Student
      State management: 5: Student
      Event-driven updates: 5: Student
    section Game Polish
      User experience design: 5: Student
      Balance challenge and reward: 5: Student
      Create engaging gameplay: 5: Student

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

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

mindmap
  root((Game Feedback Systems))
    Visual Communication
      Text Rendering
      Icon Display
      Color Psychology
      Layout Design
    Scoring Mechanics
      Point Values
      Reward Timing
      Progress Tracking
      Achievement Systems
    Life Management
      Risk vs Reward
      Player Agency
      Difficulty Balance
      Recovery Mechanics
    User Experience
      Immediate Feedback
      Clear Information
      Emotional Response
      Engagement Loops
    Implementation
      Canvas API
      State Management
      Event Systems
      Performance

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

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

flowchart LR
    A["📝 Text Content"] --> B["🎨 Styling"]
    B --> C["📍 Positioning"]
    C --> D["🖼️ Canvas Render"]
    
    E["Font Family"] --> B
    F["Font Size"] --> B
    G["Color"] --> B
    H["Alignment"] --> B
    
    I["X Coordinate"] --> C
    J["Y Coordinate"] --> C
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5

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

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

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

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

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

flowchart TD
    A["🎮 Player Action"] --> B{"Risk Assessment"}
    
    B --> C["High Risk, High Reward"]
    B --> D["Safe Strategy"]
    
    C --> E{"Outcome"}
    D --> F["Steady Progress"]
    
    E -->|Success| G["🏆 Big Points"]
    E -->|Failure| H["💔 Lose Life"]
    
    H --> I{"Lives Remaining?"}
    I -->|Yes| J["🔄 Try Again"]
    I -->|No| K["💀 Game Over"]
    
    J --> B
    G --> B
    F --> B
    
    style C fill:#ffebee
    style D fill:#e8f5e8
    style G fill:#e3f2fd
    style H fill:#fff3e0

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

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

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

sequenceDiagram
    participant Player
    participant GameEngine
    participant ScoreSystem
    participant LifeSystem
    participant Display
    
    Player->>GameEngine: Shoots Enemy
    GameEngine->>ScoreSystem: Award Points
    ScoreSystem->>ScoreSystem: +100 points
    ScoreSystem->>Display: Update Score
    
    Player->>GameEngine: Collides with Enemy
    GameEngine->>LifeSystem: Lose Life
    LifeSystem->>LifeSystem: -1 life
    LifeSystem->>Display: Update Lives
    
    alt Lives > 0
        LifeSystem->>Player: Continue Playing
    else Lives = 0
        LifeSystem->>GameEngine: Game Over
    end

نظام النقاط: كل سفينة عدو يتم تدميرها تمنح 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. افتح هذا العنوان في متصفحك لرؤية لعبتك. اختبر التحكم باستخدام مفاتيح الأسهم وحاول إطلاق النار على الأعداء للتحقق من أن كل شيء يعمل.

flowchart TD
    A["1. Asset Loading"] --> B["2. Game Variables"]
    B --> C["3. Collision Detection"]
    C --> D["4. Hero Enhancement"]
    D --> E["5. Display Functions"]
    E --> F["6. Event Handlers"]
    
    G["Life Icon Image"] --> A
    H["Score & Lives Tracking"] --> B
    I["Hero-Enemy Intersections"] --> C
    J["Points & Life Methods"] --> D
    K["Text & Icon Rendering"] --> E
    L["Reward & Penalty Logic"] --> F
    
    F --> M["🎮 Complete Game"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec
    style M fill:#e1f5fe

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

احصل على الأصول البصرية التي ستحتاجها. انسخ ملف 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();
```

🔄 مراجعة تربوية

فهم تصميم الألعاب: قبل تنفيذ العواقب، تأكد من فهمك:

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

اختبار سريع ذاتي: لماذا تستخدم ألعاب الأركيد عادةً أرقامًا مستديرة لقيم النقاط؟ الإجابة: الأرقام المستديرة أسهل للاعبين لحسابها ذهنيًا وتخلق مكافآت نفسية مرضية

مبادئ تجربة المستخدم: أنت الآن تطبق:

التسلسل الهرمي البصري: وضع المعلومات المهمة بشكل بارز
التغذية الفورية: تحديثات في الوقت الفعلي لإجراءات اللاعب
عبء الإدراك: تقديم معلومات بسيطة وواضحة
التصميم العاطفي: أيقونات وألوان تخلق ارتباطًا مع اللاعب

تنفيذ عواقب اللعبة والمكافآت. الآن سنضيف أنظمة التغذية الراجعة التي تجعل إجراءات اللاعب ذات معنى:
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؟ قم ببعض الاستكشاف - قد تدهشك الإمكانيات!

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

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

🔄 مراجعة تربوية

نظام تصميم الألعاب الكامل: تحقق من إتقانك لأنظمة التغذية الراجعة للاعب:

✅ كيف تخلق آليات النقاط دافعًا ومشاركة للاعب؟
✅ لماذا تعتبر الاتساق البصري مهمًا لتصميم واجهة المستخدم؟
✅ كيف يوازن نظام الأرواح بين التحدي واحتفاظ اللاعب؟
✅ ما دور التغذية الفورية في خلق تجربة لعب مرضية؟

تكامل النظام: يظهر نظام التغذية الراجعة الخاص بك:

تصميم تجربة المستخدم: تواصل بصري واضح وتسلسل هرمي للمعلومات
هندسة مدفوعة بالأحداث: تحديثات استجابة لإجراءات اللاعب
إدارة الحالة: تتبع وعرض بيانات اللعبة الديناميكية
إتقان اللوحة: عرض النصوص ووضع الرموز
علم نفس الألعاب: فهم دافع اللاعب ومشاركته

أنماط احترافية: لقد قمت بتنفيذ:

هندسة MVC: فصل منطق اللعبة والبيانات والعرض
نمط المراقب: تحديثات مدفوعة بالأحداث لتغييرات حالة اللعبة
تصميم المكونات: وظائف قابلة لإعادة الاستخدام للعرض والمنطق
تحسين الأداء: عرض فعال في حلقات اللعبة

⚡ ما يمكنك القيام به في الدقائق الخمس القادمة

جرب أحجام وألوان خطوط مختلفة لعرض النقاط
حاول تغيير قيم النقاط وشاهد كيف يؤثر ذلك على شعور اللعبة
أضف عبارات console.log لتتبع تغييرات النقاط والأرواح
اختبر الحالات الحافة مثل نفاد الأرواح أو تحقيق نقاط عالية

🎯 ما يمكنك تحقيقه خلال هذه الساعة

أكمل اختبار ما بعد الدرس وفهم علم نفس تصميم الألعاب
أضف تأثيرات صوتية للنقاط وفقدان الأرواح
نفذ نظام النقاط العالية باستخدام localStorage
أنشئ قيم نقاط مختلفة لأنواع الأعداء المختلفة
أضف تأثيرات بصرية مثل اهتزاز الشاشة عند فقدان حياة

📅 رحلة تصميم الألعاب الخاصة بك لمدة أسبوع

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

🌟 إتقان تطوير الألعاب خلال شهر

قم ببناء ألعاب كاملة بأنظمة تقدم متطورة
تعلم تحليلات الألعاب وقياس سلوك اللاعب
ساهم في مشاريع تطوير الألعاب مفتوحة المصدر
أتقن أنماط تصميم الألعاب المتقدمة واستراتيجيات تحقيق الدخل
أنشئ محتوى تعليمي حول تصميم الألعاب وتجربة المستخدم
قم ببناء محفظة تعرض مهارات تصميم وتطوير الألعاب

🎯 جدول زمني لإتقان تصميم الألعاب

timeline
    title Game Design & Player Feedback Learning Progression
    
    section Foundation (10 minutes)
        Visual Communication: Text rendering
                           : Icon design
                           : Layout principles
                           : Color psychology
        
    section Player Psychology (20 minutes)
        Motivation Systems: Point values
                          : Risk vs reward
                          : Progress feedback
                          : Achievement design
        
    section Technical Implementation (30 minutes)
        Canvas Mastery: Text positioning
                      : Sprite rendering
                      : State management
                      : Performance optimization
        
    section Game Balance (40 minutes)
        Difficulty Design: Life management
                         : Scoring curves
                         : Player retention
                         : Accessibility
        
    section User Experience (50 minutes)
        Interface Design: Information hierarchy
                        : Responsive feedback
                        : Emotional design
                        : Usability testing
        
    section Advanced Systems (1 week)
        Game Mechanics: Progression systems
                      : Analytics integration
                      : Monetization design
                      : Community features
        
    section Industry Skills (1 month)
        Professional Development: Team collaboration
                                : Design documentation
                                : Player research
                                : Platform optimization

🛠️ ملخص أدوات تصميم الألعاب الخاصة بك

بعد إكمال هذا الدرس، أصبحت الآن قد أتقنت:

علم نفس اللاعب: فهم الدافع والمخاطرة/المكافأة وحلقات المشاركة
التواصل البصري: تصميم واجهات مستخدم فعالة باستخدام النصوص والرموز والتخطيط
أنظمة التغذية الراجعة: استجابة فورية لإجراءات اللاعب وأحداث اللعبة
إدارة الحالة: تتبع وعرض بيانات اللعبة الديناميكية بكفاءة
عرض النصوص على اللوحة: عرض نصوص احترافية مع تنسيق ووضع
تكامل الأحداث: ربط إجراءات المستخدم بعواقب اللعبة ذات المعنى
توازن اللعبة: تصميم منحنيات الصعوبة وأنظمة تقدم اللاعب

تطبيقات العالم الحقيقي: مهارات تصميم الألعاب الخاصة بك تنطبق مباشرة على:

تصميم واجهة المستخدم: إنشاء واجهات جذابة وبديهية
تطوير المنتجات: فهم دافع المستخدم وحلقات التغذية الراجعة
التكنولوجيا التعليمية: أنظمة التلعيب ومشاركة التعلم
تصور البيانات: جعل المعلومات المعقدة سهلة الوصول وجذابة
تطوير التطبيقات المحمولة: آليات الاحتفاظ وتصميم تجربة المستخدم
تكنولوجيا التسويق: فهم سلوك المستخدم وتحسين التحويل

المهارات المهنية المكتسبة: يمكنك الآن:

تصميم تجارب مستخدم تحفز وتشارك المستخدمين
تنفيذ أنظمة التغذية الراجعة التي توجه سلوك المستخدم بفعالية
توازن التحدي وسهولة الوصول في الأنظمة التفاعلية
إنشاء تواصل بصري يعمل عبر مجموعات المستخدمين المختلفة
تحليل سلوك المستخدم وتحسين التصميم بناءً على ذلك

مفاهيم تطوير الألعاب التي تم إتقانها:

دافع اللاعب: فهم ما يحفز المشاركة والاحتفاظ
التصميم البصري: إنشاء واجهات واضحة وجذابة وعملية
تكامل النظام: ربط أنظمة اللعبة المتعددة لتجربة متماسكة
تحسين الأداء: عرض فعال وإدارة الحالة
سهولة الوصول: تصميم لمستويات مهارة واحتياجات اللاعبين المختلفة

المستوى التالي: أنت جاهز لاستكشاف أنماط تصميم الألعاب المتقدمة، تنفيذ أنظمة التحليلات، أو دراسة استراتيجيات تحقيق الدخل واحتفاظ اللاعب!

🌟 إنجاز مفتوح: لقد قمت ببناء نظام تغذية راجعة كامل للاعب باستخدام مبادئ تصميم الألعاب الاحترافية!

تحدي GitHub Copilot Agent 🚀

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

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

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

🚀 التحدي

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

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

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

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

المهمة

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

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

25 KiB Raw Blame History

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

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

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

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

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

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

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

🔄 مراجعة تربوية

🔄 مراجعة تربوية

⚡ ما يمكنك القيام به في الدقائق الخمس القادمة

🎯 ما يمكنك تحقيقه خلال هذه الساعة

📅 رحلة تصميم الألعاب الخاصة بك لمدة أسبوع

🌟 إتقان تطوير الألعاب خلال شهر

🎯 جدول زمني لإتقان تصميم الألعاب

🛠️ ملخص أدوات تصميم الألعاب الخاصة بك

تحدي GitHub Copilot Agent 🚀

🚀 التحدي

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

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

المهمة

25 KiB

Raw Blame History