34 KiB

Raw Blame History Unescape Escape

بناء لعبة فضاء الجزء الأول: المقدمة

journey
    title Your Game Development Journey
    section Foundation
      Learn game architecture: 3: Student
      Understand inheritance: 4: Student
      Explore composition: 4: Student
    section Communication
      Build pub/sub system: 4: Student
      Design event flow: 5: Student
      Connect components: 5: Student
    section Application
      Create game objects: 5: Student
      Implement patterns: 5: Student
      Plan game structure: 5: Student

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

سنستكشف نهجين أساسيين لتنظيم الكود: الوراثة والتركيب. هذه ليست مجرد مفاهيم أكاديمية – بل هي نفس الأنماط التي تدعم كل شيء من ألعاب الفيديو إلى أنظمة البنوك. سنقوم أيضًا بتنفيذ نظام اتصال يسمى pub/sub يعمل مثل شبكات الاتصال المستخدمة في المركبات الفضائية، مما يسمح للمكونات المختلفة بمشاركة المعلومات دون إنشاء تبعيات.

بحلول نهاية هذه السلسلة، ستفهم كيفية بناء تطبيقات يمكن أن تتوسع وتتطور – سواء كنت تطور ألعابًا أو تطبيقات ويب أو أي نظام برمجي آخر.

mindmap
  root((Game Architecture))
    Object Organization
      Inheritance
      Composition
      Class Hierarchies
      Behavior Mixing
    Communication Patterns
      Pub/Sub System
      Event Emitters
      Message Passing
      Loose Coupling
    Game Objects
      Properties (x, y)
      Behaviors (move, collide)
      Lifecycle Management
      State Management
    Design Patterns
      Factory Functions
      Observer Pattern
      Component System
      Event-Driven Architecture
    Scalability
      Modular Design
      Maintainable Code
      Testing Strategies
      Performance Optimization

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

الوراثة والتركيب في تطوير الألعاب

مع نمو المشاريع في التعقيد، يصبح تنظيم الكود أمرًا بالغ الأهمية. ما يبدأ كبرنامج بسيط يمكن أن يصبح صعبًا في الصيانة بدون هيكل مناسب – تمامًا مثلما تطلبت مهمات أبولو تنسيقًا دقيقًا بين آلاف المكونات.

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

✅ أحد أشهر كتب البرمجة على الإطلاق يتعلق بـ أنماط التصميم.

في أي لعبة، لديك كائنات اللعبة – العناصر التفاعلية التي تملأ عالم اللعبة. الأبطال، الأعداء، المكافآت، والمؤثرات البصرية كلها كائنات لعبة. كل منها موجود في إحداثيات شاشة محددة باستخدام قيم x و y، مشابهة لتحديد النقاط على مستوى إحداثي.

على الرغم من اختلافاتها البصرية، غالبًا ما تشترك هذه الكائنات في سلوكيات أساسية:

توجد في مكان ما – كل كائن لديه إحداثيات x و y حتى تعرف اللعبة مكان رسمه
يمكن للكثير منها التحرك – الأبطال يركضون، الأعداء يطاردون، الرصاص يطير عبر الشاشة
لديها عمر محدد – بعضها يبقى للأبد، والبعض الآخر (مثل الانفجارات) يظهر لفترة وجيزة ويختفي
تتفاعل مع الأشياء – عندما تصطدم الأشياء، يتم جمع المكافآت، وتحديث شريط الصحة

✅ فكر في لعبة مثل باك مان. هل يمكنك تحديد الأنواع الأربعة من الكائنات المذكورة أعلاه في هذه اللعبة؟

classDiagram
    class GameObject {
        +x: number
        +y: number
        +type: string
        +exists_somewhere()
    }
    
    class MovableObject {
        +moveTo(x, y)
        +can_move_around()
    }
    
    class TemporaryObject {
        +lifespan: number
        +has_lifespan()
    }
    
    class InteractiveObject {
        +onCollision()
        +reacts_to_stuff()
    }
    
    GameObject <|-- MovableObject
    GameObject <|-- TemporaryObject
    GameObject <|-- InteractiveObject
    
    MovableObject <|-- Hero
    MovableObject <|-- Enemy
    MovableObject <|-- Bullet
    
    TemporaryObject <|-- PowerUp
    TemporaryObject <|-- Explosion
    
    InteractiveObject <|-- Collectible
    InteractiveObject <|-- Obstacle

التعبير عن السلوك من خلال الكود

الآن بعد أن فهمت السلوكيات المشتركة التي تشترك فيها كائنات اللعبة، دعنا نستكشف كيفية تنفيذ هذه السلوكيات في JavaScript. يمكنك التعبير عن سلوك الكائن من خلال طرق مرتبطة بالفئات أو الكائنات الفردية، وهناك عدة طرق للاختيار من بينها.

النهج القائم على الفئات

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

✅ الوراثة مفهوم مهم لفهمه. تعرف على المزيد في مقال MDN عن الوراثة.

إليك كيفية تنفيذ كائنات اللعبة باستخدام الفئات والوراثة:

// Step 1: Create the base GameObject class
class GameObject {
  constructor(x, y, type) {
    this.x = x;
    this.y = y;
    this.type = type;
  }
}

لنقم بتفصيل هذا خطوة بخطوة:

نحن ننشئ قالبًا أساسيًا يمكن لكل كائن لعبة استخدامه
يقوم المُنشئ بحفظ مكان وجود الكائن (x, y) ونوعه
يصبح هذا الأساس الذي ستبني عليه جميع كائنات اللعبة

// Step 2: Add movement capability through inheritance
class Movable extends GameObject {
  constructor(x, y, type) {
    super(x, y, type); // Call parent constructor
  }

  // Add the ability to move to a new position
  moveTo(x, y) {
    this.x = x;
    this.y = y;
  }
}

في المثال أعلاه، قمنا بـ:

تمديد فئة GameObject لإضافة وظيفة الحركة
استدعاء المُنشئ الأب باستخدام super() لتهيئة الخصائص الموروثة
إضافة طريقة moveTo() التي تقوم بتحديث موقع الكائن

// Step 3: Create specific game object types
class Hero extends Movable {
  constructor(x, y) {
    super(x, y, 'Hero'); // Set type automatically
  }
}

class Tree extends GameObject {
  constructor(x, y) {
    super(x, y, 'Tree'); // Trees don't need movement
  }
}

// Step 4: Use your game objects
const hero = new Hero(0, 0);
hero.moveTo(5, 5); // Hero can move!

const tree = new Tree(10, 15);
// tree.moveTo() would cause an error - trees can't move

فهم هذه المفاهيم:

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

✅ خذ بضع دقائق لإعادة تصور بطل باك مان (مثل إنكي، بينكي أو بلينكي) وكيف يمكن كتابته في JavaScript.

نهج التركيب

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

// Step 1: Create base behavior objects
const gameObject = {
  x: 0,
  y: 0,
  type: ''
};

const movable = {
  moveTo(x, y) {
    this.x = x;
    this.y = y;
  }
};

ما يفعله هذا الكود:

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

// Step 2: Compose objects by combining behaviors
const movableObject = { ...gameObject, ...movable };

// Step 3: Create factory functions for different object types
function createHero(x, y) {
  return {
    ...movableObject,
    x,
    y,
    type: 'Hero'
  };
}

function createStatic(x, y, type) {
  return {
    ...gameObject,
    x,
    y,
    type
  };
}

في المثال أعلاه، قمنا بـ:

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

// Step 4: Create and use your composed objects
const hero = createHero(10, 10);
hero.moveTo(5, 5); // Works perfectly!

const tree = createStatic(0, 0, 'Tree');
// tree.moveTo() is undefined - no movement behavior was composed

نقاط رئيسية يجب تذكرها:

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


**Which Pattern Should You Choose?**

**Which Pattern Should You Choose?**

```mermaid
quadrantChart
    title Code Organization Patterns
    x-axis Simple --> Complex
    y-axis Rigid --> Flexible
    quadrant-1 Advanced Composition
    quadrant-2 Hybrid Approaches
    quadrant-3 Basic Inheritance
    quadrant-4 Modern Composition
    
    Class Inheritance: [0.3, 0.2]
    Interface Implementation: [0.6, 0.4]
    Mixin Patterns: [0.7, 0.7]
    Pure Composition: [0.8, 0.9]
    Factory Functions: [0.5, 0.8]
    Prototype Chain: [0.4, 0.3]

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

إليك متى تستخدم كل نهج:

اختر الوراثة عندما يكون لديك علاقات "هو-نوع" واضحة (البطل هو-نوع كائن قابل للحركة)
اختر التركيب عندما تحتاج إلى علاقات "يملك-نوع" (البطل يملك قدرات الحركة)
ضع في اعتبارك تفضيلات فريقك ومتطلبات المشروع
تذكر أنه يمكنك مزج كلا النهجين في نفس التطبيق

🔄 تقييم تربوي

فهم تنظيم الكائنات: قبل الانتقال إلى أنماط الاتصال، تأكد من أنك تستطيع:

✅ شرح الفرق بين الوراثة والتركيب
✅ تحديد متى تستخدم الفئات مقابل وظائف المصنع
✅ فهم كيفية عمل الكلمة المفتاحية super() في الوراثة
✅ التعرف على فوائد كل نهج لتطوير الألعاب

اختبار سريع ذاتي: كيف يمكنك إنشاء عدو طائر يمكنه التحرك والطيران؟

نهج الوراثة: class FlyingEnemy extends Movable
نهج التركيب: { ...movable, ...flyable, ...gameObject }

اتصال بالعالم الحقيقي: تظهر هذه الأنماط في كل مكان:

مكونات React: الخصائص (التركيب) مقابل الوراثة الفئوية
محركات الألعاب: أنظمة الكائنات المكونة تستخدم التركيب
تطبيقات الهواتف المحمولة: أطر واجهات المستخدم غالبًا ما تستخدم التسلسلات الهرمية للوراثة

أنماط الاتصال: نظام Pub/Sub

مع نمو التطبيقات في التعقيد، يصبح إدارة الاتصال بين المكونات تحديًا. يحل نمط النشر-الاشتراك (pub/sub) هذه المشكلة باستخدام مبادئ مشابهة للبث الإذاعي – يمكن لجهاز إرسال واحد الوصول إلى عدة مستقبلين دون معرفة من يستمع.

فكر في ما يحدث عندما يتعرض البطل للضرر: يتم تحديث شريط الصحة، تشغيل المؤثرات الصوتية، وظهور ردود فعل بصرية. بدلاً من ربط كائن البطل مباشرة بهذه الأنظمة، يسمح pub/sub للبطل ببث رسالة "تم تلقي الضرر". يمكن لأي نظام يحتاج إلى الاستجابة الاشتراك في هذا النوع من الرسائل والتفاعل وفقًا لذلك.

✅ Pub/Sub تعني "النشر-الاشتراك"

flowchart TD
    A[Hero Takes Damage] --> B[Publish: HERO_DAMAGED]
    B --> C[Event System]
    
    C --> D[Health Bar Subscriber]
    C --> E[Sound System Subscriber]
    C --> F[Visual Effects Subscriber]
    C --> G[Achievement System Subscriber]
    
    D --> H[Update Health Display]
    E --> I[Play Damage Sound]
    F --> J[Show Red Flash]
    G --> K[Check Survival Achievements]
    
    style A fill:#ffebee
    style B fill:#e1f5fe
    style C fill:#e8f5e8
    style H fill:#fff3e0
    style I fill:#fff3e0
    style J fill:#fff3e0
    style K fill:#fff3e0

فهم بنية Pub/Sub

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

العناصر الرئيسية في pub/sub:

الرسائل – تسميات نصية بسيطة مثل 'PLAYER_SCORED' تصف ما حدث (بالإضافة إلى أي معلومات إضافية)
الناشرون – الكائنات التي تصرخ "حدث شيء ما!" لأي شخص يستمع
المشتركون – الكائنات التي تقول "أنا أهتم بهذا الحدث" وتستجيب عندما يحدث
نظام الأحداث – الوسيط الذي يضمن وصول الرسائل إلى المستمعين المناسبين

بناء نظام أحداث

لنقم بإنشاء نظام أحداث بسيط ولكنه قوي يوضح هذه المفاهيم:

// Step 1: Create the EventEmitter class
class EventEmitter {
  constructor() {
    this.listeners = {}; // Store all event listeners
  }
  
  // Register a listener for a specific message type
  on(message, listener) {
    if (!this.listeners[message]) {
      this.listeners[message] = [];
    }
    this.listeners[message].push(listener);
  }
  
  // Send a message to all registered listeners
  emit(message, payload = null) {
    if (this.listeners[message]) {
      this.listeners[message].forEach(listener => {
        listener(message, payload);
      });
    }
  }
}

تفصيل ما يحدث هنا:

إنشاء نظام إدارة أحداث مركزي باستخدام فئة بسيطة
تخزين المستمعين في كائن منظم حسب نوع الرسالة
تسجيل مستمعين جدد باستخدام طريقة on()
بث الرسائل لجميع المستمعين المهتمين باستخدام emit()
دعم حمولات بيانات اختيارية لتمرير المعلومات ذات الصلة

جمع كل شيء معًا: مثال عملي

حسنًا، دعنا نرى هذا عمليًا! سنقوم ببناء نظام حركة بسيط يظهر كيف يمكن أن يكون pub/sub نظيفًا ومرنًا:

// Step 1: Define your message types
const Messages = {
  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT',
  HERO_MOVE_RIGHT: 'HERO_MOVE_RIGHT',
  ENEMY_SPOTTED: 'ENEMY_SPOTTED'
};

// Step 2: Create your event system and game objects
const eventEmitter = new EventEmitter();
const hero = createHero(0, 0);

ما يفعله هذا الكود:

يُعرّف كائنًا ثابتًا لمنع الأخطاء الإملائية في أسماء الرسائل
ينشئ مثيلًا لمُصدر الأحداث للتعامل مع جميع الاتصالات
يُهيئ كائن البطل في الموقع الابتدائي

// Step 3: Set up event listeners (subscribers)
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
  hero.moveTo(hero.x - 5, hero.y);
  console.log(`Hero moved to position: ${hero.x}, ${hero.y}`);
});

eventEmitter.on(Messages.HERO_MOVE_RIGHT, () => {
  hero.moveTo(hero.x + 5, hero.y);
  console.log(`Hero moved to position: ${hero.x}, ${hero.y}`);
});

في المثال أعلاه، قمنا بـ:

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

// Step 4: Connect keyboard input to events (publishers)
window.addEventListener('keydown', (event) => {
  switch(event.key) {
    case 'ArrowLeft':
      eventEmitter.emit(Messages.HERO_MOVE_LEFT);
      break;
    case 'ArrowRight':
      eventEmitter.emit(Messages.HERO_MOVE_RIGHT);
      break;
  }
});

فهم هذه المفاهيم:

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

sequenceDiagram
    participant User
    participant Keyboard
    participant EventEmitter
    participant Hero
    participant SoundSystem
    participant Camera
    
    User->>Keyboard: Presses ArrowLeft
    Keyboard->>EventEmitter: emit('HERO_MOVE_LEFT')
    EventEmitter->>Hero: Move left 5 pixels
    EventEmitter->>SoundSystem: Play footstep sound
    EventEmitter->>Camera: Follow hero
    
    Hero->>Hero: Update position
    SoundSystem->>SoundSystem: Play audio
    Camera->>Camera: Adjust viewport

💡 نصيحة احترافية: جمال هذا النمط هو المرونة! يمكنك بسهولة إضافة مؤثرات صوتية، اهتزاز الشاشة، أو تأثيرات الجسيمات ببساطة عن طريق إضافة المزيد من مستمعي الأحداث – لا حاجة لتعديل كود لوحة المفاتيح أو الحركة الحالي.

إليك لماذا ستحب هذا النهج:

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

لماذا يتوسع Pub/Sub بشكل فعال

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

⚠️ خطأ شائع: لا تنشئ الكثير من أنواع الرسائل المحددة في وقت مبكر. ابدأ بفئات واسعة وقم بتحسينها مع وضوح احتياجات لعبتك.

أفضل الممارسات التي يجب اتباعها:

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

🔄 تقييم تربوي

فهم بنية الأحداث: تحقق من فهمك للنظام الكامل:

✅ كيف يمنع نمط pub/sub الارتباط الوثيق بين المكونات؟
✅ لماذا يصبح من الأسهل إضافة ميزات جديدة مع بنية تعتمد على الأحداث؟
✅ ما الدور الذي يلعبه EventEmitter في تدفق الاتصالات؟
✅ كيف تمنع ثوابت الرسائل الأخطاء وتحسن قابلية الصيانة؟

تحدي التصميم: كيف ستتعامل مع هذه السيناريوهات في اللعبة باستخدام pub/sub؟

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

اتصال مهني: يظهر هذا النمط في:

إطارات العمل الأمامية: أنظمة الأحداث في React/Vue
الخدمات الخلفية: اتصالات الخدمات المصغرة
محركات الألعاب: نظام الأحداث في Unity
تطوير الهواتف المحمولة: أنظمة الإشعارات في iOS/Android

تحدي GitHub Copilot Agent 🚀

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

الوصف: قم بإنشاء نظام كائن لعبة بسيط باستخدام كل من الوراثة ونمط pub/sub. ستقوم بتنفيذ لعبة أساسية حيث يمكن للكائنات المختلفة التواصل من خلال الأحداث دون معرفة مباشرة ببعضها البعض.

المهمة: قم بإنشاء نظام لعبة JavaScript مع المتطلبات التالية: 1) إنشاء فئة GameObject الأساسية مع إحداثيات x و y وخصائص النوع. 2) إنشاء فئة Hero التي تمتد GameObject ويمكنها التحرك. 3) إنشاء فئة Enemy التي تمتد GameObject ويمكنها مطاردة البطل. 4) تنفيذ فئة EventEmitter لنمط pub/sub. 5) إعداد مستمعي الأحداث بحيث عندما يتحرك البطل، يتلقى الأعداء القريبون حدث 'HERO_MOVED' ويحدثون موقعهم للتحرك نحو البطل. قم بتضمين عبارات console.log لإظهار التواصل بين الكائنات.

تعرف على المزيد حول وضع الوكيل هنا.

🚀 التحدي

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

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

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

تعرف على المزيد حول النشر والاشتراك من خلال قراءة المزيد عنه.

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

افتح أي لعبة HTML5 عبر الإنترنت وقم بفحص الكود الخاص بها باستخدام أدوات المطور
أنشئ عنصر HTML5 Canvas بسيط وارسم شكلاً أساسيًا
جرب استخدام setInterval لإنشاء حلقة رسوم متحركة بسيطة
استكشف وثائق Canvas API وجرب طريقة رسم

🎯 ما يمكنك إنجازه خلال هذه الساعة

أكمل اختبار ما بعد الدرس وافهم مفاهيم تطوير الألعاب
قم بإعداد هيكل مشروع لعبتك باستخدام ملفات HTML وCSS وJavaScript
أنشئ حلقة لعبة أساسية تقوم بالتحديث والعرض بشكل مستمر
ارسم أول شخصيات لعبتك على اللوحة
قم بتنفيذ تحميل الأصول الأساسية للصور والأصوات

📅 إنشاء لعبة خلال أسبوع

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

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

قم بإنشاء ألعاب متعددة تستكشف أنواع وآليات مختلفة
تعلم إطار عمل لتطوير الألعاب مثل Phaser أو Three.js
ساهم في مشاريع تطوير الألعاب مفتوحة المصدر
أتقن أنماط البرمجة المتقدمة وتحسين الأداء
أنشئ ملفًا شخصيًا يعرض مهاراتك في تطوير الألعاب
قم بتوجيه الآخرين المهتمين بتطوير الألعاب والوسائط التفاعلية

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

timeline
    title Game Architecture Learning Progression
    
    section Object Patterns (20 minutes)
        Code Organization: Class inheritance
                         : Composition patterns
                         : Factory functions
                         : Behavior mixing
        
    section Communication Systems (25 minutes)
        Event Architecture: Pub/Sub implementation
                          : Message design
                          : Event emitters
                          : Loose coupling
        
    section Game Object Design (30 minutes)
        Entity Systems: Property management
                      : Behavior composition
                      : State handling
                      : Lifecycle management
        
    section Architecture Patterns (35 minutes)
        System Design: Component systems
                     : Observer pattern
                     : Command pattern
                     : State machines
        
    section Advanced Concepts (45 minutes)
        Scalable Architecture: Performance optimization
                             : Memory management
                             : Modular design
                             : Testing strategies
        
    section Game Engine Concepts (1 week)
        Professional Development: Scene graphs
                                 : Asset management
                                 : Rendering pipelines
                                 : Physics integration
        
    section Framework Mastery (2 weeks)
        Modern Game Development: React game patterns
                               : Canvas optimization
                               : WebGL basics
                               : PWA games
        
    section Industry Practices (1 month)
        Professional Skills: Team collaboration
                           : Code reviews
                           : Game design patterns
                           : Performance profiling

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

بعد إكمال هذا الدرس، لديك الآن:

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

تطبيقات واقعية: هذه الأنماط تنطبق مباشرة على:

إطارات العمل الأمامية: بنية المكونات وإدارة الحالة في React/Vue
الخدمات الخلفية: تواصل الخدمات المصغرة وأنظمة قائمة على الأحداث
تطوير الهواتف المحمولة: بنية تطبيقات iOS/Android وأنظمة الإشعارات
محركات الألعاب: Unity، Unreal، وتطوير الألعاب عبر الويب
برامج المؤسسات: تصميم أنظمة الأحداث الموزعة
تصميم واجهات برمجة التطبيقات: خدمات RESTful والتواصل في الوقت الفعلي

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

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

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

🌟 إنجاز محقق: لقد أتقنت أنماط بنية البرمجيات الأساسية التي تدعم كل شيء من الألعاب البسيطة إلى أنظمة المؤسسات المعقدة!

المهمة

تصميم لعبة

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

34 KiB Raw Blame History Unescape Escape

بناء لعبة فضاء الجزء الأول: المقدمة

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

الوراثة والتركيب في تطوير الألعاب

التعبير عن السلوك من خلال الكود

🔄 تقييم تربوي

أنماط الاتصال: نظام Pub/Sub

فهم بنية Pub/Sub

بناء نظام أحداث

جمع كل شيء معًا: مثال عملي

لماذا يتوسع Pub/Sub بشكل فعال

🔄 تقييم تربوي

تحدي GitHub Copilot Agent 🚀

🚀 التحدي

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

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

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

🎯 ما يمكنك إنجازه خلال هذه الساعة

📅 إنشاء لعبة خلال أسبوع

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

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

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

المهمة

34 KiB

Raw Blame History Unescape Escape