36 KiB

Raw Blame History

بناء لعبة الفضاء الجزء الرابع: إضافة الليزر واكتشاف التصادمات

journey
    title Your Collision Detection Journey
    section Physics Foundation
      Understand rectangles: 3: Student
      Learn intersection math: 4: Student
      Grasp coordinate systems: 4: Student
    section Game Mechanics
      Implement laser firing: 4: Student
      Add object lifecycle: 5: Student
      Create collision rules: 5: Student
    section System Integration
      Build collision detection: 5: Student
      Optimize performance: 5: Student
      Test interaction systems: 5: Student

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

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

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

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

mindmap
  root((Collision Detection))
    Physics Concepts
      Rectangle Boundaries
      Intersection Testing
      Coordinate Systems
      Separation Logic
    Game Objects
      Laser Projectiles
      Enemy Ships
      Hero Character
      Collision Zones
    Lifecycle Management
      Object Creation
      Movement Updates
      Destruction Marking
      Memory Cleanup
    Event Systems
      Keyboard Input
      Collision Events
      Game State Changes
      Audio/Visual Effects
    Performance
      Efficient Algorithms
      Frame Rate Optimization
      Memory Management
      Spatial Partitioning

✅ قم بإجراء بحث صغير حول أول لعبة كمبيوتر تم كتابتها على الإطلاق. ما كانت وظيفتها؟

اكتشاف التصادم

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

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

تمثيل المستطيل

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

flowchart TD
    A["🎯 Game Object"] --> B["📍 Position (x, y)"]
    A --> C["📏 Dimensions (width, height)"]
    
    B --> D["Top: y"]
    B --> E["Left: x"]
    
    C --> F["Bottom: y + height"]
    C --> G["Right: x + width"]
    
    D --> H["🔲 Rectangle Bounds"]
    E --> H
    F --> H
    G --> H
    
    H --> I["Collision Detection Ready"]
    
    style A fill:#e3f2fd
    style H fill:#e8f5e8
    style I fill:#fff3e0

rectFromGameObject() {
  return {
    top: this.y,
    left: this.x,
    bottom: this.y + this.height,
    right: this.x + this.width
  }
}

لنقم بتفصيل هذا:

الحافة العلوية: هذا هو المكان الذي يبدأ فيه الكائن عموديًا (موضعه y)
الحافة اليسرى: حيث يبدأ أفقيًا (موضعه x)
الحافة السفلية: أضف الارتفاع إلى موضع y - الآن تعرف أين ينتهي!
الحافة اليمنى: أضف العرض إلى موضع x - وهكذا تحصل على الحدود الكاملة

خوارزمية التقاطع

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

flowchart LR
    A["Rectangle 1"] --> B{"Separation Tests"}
    C["Rectangle 2"] --> B
    
    B --> D["R2 left > R1 right?"]
    B --> E["R2 right < R1 left?"]
    B --> F["R2 top > R1 bottom?"]
    B --> G["R2 bottom < R1 top?"]
    
    D --> H{"Any True?"}
    E --> H
    F --> H
    G --> H
    
    H -->|Yes| I["❌ No Collision"]
    H -->|No| J["✅ Collision Detected"]
    
    style B fill:#e3f2fd
    style I fill:#ffebee
    style J fill:#e8f5e8

function intersectRect(r1, r2) {
  return !(r2.left > r1.right ||
    r2.right < r1.left ||
    r2.top > r1.bottom ||
    r2.bottom < r1.top);
}

اختبار الانفصال يعمل مثل أنظمة الرادار:

هل المستطيل 2 بالكامل على يمين المستطيل 1؟
هل المستطيل 2 بالكامل على يسار المستطيل 1؟
هل المستطيل 2 بالكامل أسفل المستطيل 1؟
هل المستطيل 2 بالكامل فوق المستطيل 1؟

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

إدارة دورة حياة الكائنات

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

stateDiagram-v2
    [*] --> Active: Object Created
    Active --> Collided: Collision Detected
    Collided --> MarkedDead: Set dead = true
    MarkedDead --> Filtered: Next Frame
    Filtered --> [*]: Object Removed
    
    Active --> OutOfBounds: Leaves Screen
    OutOfBounds --> MarkedDead
    
    note right of MarkedDead
        Safe to continue
        current frame
    end note
    
    note right of Filtered
        Objects removed
        between frames
    end note

إليك كيفية تعليم شيء ما للإزالة:

// Mark object for removal
enemy.dead = true;

لماذا يعمل هذا النهج:

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

ثم نقوم بتصفية الكائنات المعلمة قبل دورة العرض التالية:

gameObjects = gameObjects.filter(go => !go.dead);

ما الذي تفعله هذه التصفية:

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

تنفيذ ميكانيكية الليزر

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

لجعل هذا يعمل، نحتاج إلى تنسيق بعض الأجزاء المختلفة:

المكونات الرئيسية للتنفيذ:

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

تنفيذ التحكم في معدل الإطلاق

معدلات الإطلاق غير المحدودة ستثقل محرك اللعبة وتجعل اللعب سهلاً للغاية. تواجه أنظمة الأسلحة الحقيقية قيودًا مشابهة - حتى الفيزرات الخاصة بسفينة USS Enterprise تحتاج إلى وقت لإعادة الشحن بين الطلقات.

سننفذ نظام تبريد يمنع إطلاق النار السريع مع الحفاظ على التحكم السريع:

sequenceDiagram
    participant Player
    participant Weapon
    participant Cooldown
    participant Game
    
    Player->>Weapon: Press Spacebar
    Weapon->>Cooldown: Check if cool
    
    alt Weapon is Ready
        Cooldown->>Weapon: cool = true
        Weapon->>Game: Create Laser
        Weapon->>Cooldown: Start new cooldown
        Cooldown->>Cooldown: cool = false
        
        Note over Cooldown: Wait 500ms
        
        Cooldown->>Cooldown: cool = true
    else Weapon is Cooling
        Cooldown->>Weapon: cool = false
        Weapon->>Player: No action
    end

class Cooldown {
  constructor(time) {
    this.cool = false;
    setTimeout(() => {
      this.cool = true;
    }, time);
  }
}

class Weapon {
  constructor() {
    this.cooldown = null;
  }
  
  fire() {
    if (!this.cooldown || this.cooldown.cool) {
      // Create laser projectile
      this.cooldown = new Cooldown(500);
    } else {
      // Weapon is still cooling down
    }
  }
}

كيف يعمل التبريد:

عند الإنشاء، يبدأ السلاح "ساخنًا" (لا يمكن إطلاقه بعد)
بعد فترة الانتظار، يصبح "باردًا" (جاهز للإطلاق)
قبل الإطلاق، نتحقق: "هل السلاح بارد؟"
هذا يمنع النقر السريع مع الحفاظ على التحكم السريع

✅ ارجع إلى الدرس الأول في سلسلة لعبة الفضاء لتذكير نفسك حول أنظمة التبريد.

بناء نظام التصادم

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

بدءًا من كود الدرس السابق، ستضيف اكتشاف التصادم مع قواعد محددة تحكم تفاعلات الكائنات.

💡 نصيحة احترافية: صورة الليزر موجودة بالفعل في مجلد الأصول الخاص بك ومشار إليها في الكود الخاص بك، جاهزة للتنفيذ.

قواعد التصادم التي يجب تنفيذها

ميكانيكية اللعبة التي يجب إضافتها:

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

🔄 تقييم تربوي

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

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

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

فهم الفيزياء: الآن تفهم:

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

إعداد بيئة التطوير الخاصة بك

خبر سار - لقد قمنا بالفعل بإعداد معظم الأساسيات لك! جميع أصول اللعبة والبنية الأساسية جاهزة في مجلد your-work، جاهزة لإضافة ميزات التصادم الرائعة.

هيكل المشروع

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

فهم هيكل الملفات:

يحتوي على جميع صور الكائنات اللازمة للعبة
يتضمن الوثيقة الرئيسية HTML وملف تطبيق JavaScript
يوفر تكوين الحزمة لخادم التطوير المحلي

بدء تشغيل خادم التطوير

انتقل إلى مجلد المشروع الخاص بك وابدأ الخادم المحلي:

cd your-work
npm start

تسلسل الأوامر هذا:

يغير الدليل إلى مجلد المشروع الخاص بك
يبدأ خادم HTTP محلي على http://localhost:5000
يقدم ملفات اللعبة الخاصة بك للاختبار والتطوير
يتيح التطوير المباشر مع إعادة التحميل التلقائي

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

التنفيذ خطوة بخطوة

مثل النهج المنهجي الذي استخدمته ناسا لبرمجة مركبة الفضاء Voyager، سننفذ اكتشاف التصادم بشكل منهجي، نبني كل مكون خطوة بخطوة.

flowchart TD
    A["1. Rectangle Bounds"] --> B["2. Intersection Detection"]
    B --> C["3. Laser System"]
    C --> D["4. Event Handling"]
    D --> E["5. Collision Rules"]
    E --> F["6. Cooldown System"]
    
    G["Object Boundaries"] --> A
    H["Physics Algorithm"] --> B
    I["Projectile Creation"] --> C
    J["Keyboard Input"] --> D
    K["Game Logic"] --> E
    L["Rate Limiting"] --> 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

1. إضافة حدود تصادم المستطيل

أولاً، دعنا نعلم كائنات اللعبة كيفية وصف حدودها. أضف هذه الطريقة إلى فئة GameObject:

rectFromGameObject() {
    return {
      top: this.y,
      left: this.x,
      bottom: this.y + this.height,
      right: this.x + this.width,
    };
  }

ما تحققه هذه الطريقة:

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

2. تنفيذ اكتشاف التقاطع

الآن دعنا ننشئ محقق التصادم - وظيفة يمكنها تحديد ما إذا كانت مستطيلاتان تتداخلان:

function intersectRect(r1, r2) {
  return !(
    r2.left > r1.right ||
    r2.right < r1.left ||
    r2.top > r1.bottom ||
    r2.bottom < r1.top
  );
}

تعمل هذه الخوارزمية عن طريق:

اختبار أربعة شروط انفصال بين المستطيلات
تعيد false إذا كان أي شرط انفصال صحيحًا
تشير إلى التصادم عندما لا يوجد انفصال
تستخدم منطق النفي لاختبار التقاطع بكفاءة

3. تنفيذ نظام إطلاق الليزر

هنا تصبح الأمور مثيرة! دعنا نعد نظام إطلاق الليزر.

ثوابت الرسائل

أولاً، دعنا نحدد بعض أنواع الرسائل حتى تتمكن أجزاء مختلفة من لعبتنا من التواصل مع بعضها البعض:

KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",

توفر هذه الثوابت:

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

التعامل مع إدخال لوحة المفاتيح

أضف اكتشاف مفتاح المسافة إلى مستمع حدث المفتاح الخاص بك:

} else if(evt.keyCode === 32) {
  eventEmitter.emit(Messages.KEY_EVENT_SPACE);
}

هذا المعالج للإدخال:

يكتشف ضغطات مفتاح المسافة باستخدام keyCode 32
يرسل رسالة حدث موحدة
يمكن منطق الإطلاق المفصول

إعداد مستمع الحدث

سجل سلوك الإطلاق في وظيفة initGame() الخاصة بك:

eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
 if (hero.canFire()) {
   hero.fire();
 }
});

هذا المستمع للحدث:

يستجيب لأحداث مفتاح المسافة
يتحقق من حالة تبريد الإطلاق
يفعل إنشاء الليزر عند السماح بذلك

أضف معالجة التصادم لتفاعلات الليزر-العدو:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
  first.dead = true;
  second.dead = true;
});

هذا المعالج للتصادم:

يتلقى بيانات حدث التصادم مع كلا الكائنين
يعلم كلا الكائنين للإزالة
يضمن التنظيف المناسب بعد التصادم

4. إنشاء فئة الليزر

نفذ قذيفة ليزر تتحرك للأعلى وتدير دورة حياتها الخاصة:

class Laser extends GameObject {
  constructor(x, y) {
    super(x, y);
    this.width = 9;
    this.height = 33;
    this.type = 'Laser';
    this.img = laserImg;
    
    let id = setInterval(() => {
      if (this.y > 0) {
        this.y -= 15;
      } else {
        this.dead = true;
        clearInterval(id);
      }
    }, 100);
  }
}

تنفيذ هذه الفئة:

تمدد GameObject لتوريث الوظائف الأساسية
تحدد الأبعاد المناسبة لصورة الليزر
تنشئ حركة تلقائية للأعلى باستخدام setInterval()
تتعامل مع التدمير الذاتي عند الوصول إلى أعلى الشاشة
تدير توقيت الرسوم المتحركة والتنظيف الخاص بها

5. تنفيذ نظام اكتشاف التصادم

أنشئ وظيفة اكتشاف التصادم الشاملة:

function updateGameObjects() {
  const enemies = gameObjects.filter(go => go.type === 'Enemy');
  const lasers = gameObjects.filter(go => go.type === "Laser");
  
  // Test laser-enemy collisions
  lasers.forEach((laser) => {
    enemies.forEach((enemy) => {
      if (intersectRect(laser.rectFromGameObject(), enemy.rectFromGameObject())) {
        eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
          first: laser,
          second: enemy,
        });
      }
    });
  });

  // Remove destroyed objects
  gameObjects = gameObjects.filter(go => !go.dead);
}

هذا النظام للتصادم:

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

⚠️ هام: أضف updateGameObjects() إلى الحلقة الرئيسية للعبة في window.onload لتمكين اكتشاف التصادم.

6. أضف نظام التبريد إلى فئة البطل

عزز فئة البطل بميكانيكية الإطلاق وتحديد معدل الإطلاق:

class Hero extends GameObject {
  constructor(x, y) {
    super(x, y);
    this.width = 99;
    this.height = 75;
    this.type = "Hero";
    this.speed = { x: 0, y: 0 };
    this.cooldown = 0;
  }
  
  fire() {
    gameObjects.push(new Laser(this.x + 45, this.y - 10));
    this.cooldown = 500;

    let id = setInterval(() => {
      if (this.cooldown > 0) {
        this.cooldown -= 100;
      } else {
        clearInterval(id);
      }
    }, 200);
  }
  
  canFire() {
    return this.cooldown === 0;
  }
}

فهم فئة البطل المحسنة:

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

🔄 تقييم تربوي

فهم النظام الكامل: تحقق من إتقانك لنظام التصادم:

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

تكامل النظام: يظهر اكتشاف التصادم الخاص بك:

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

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

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

اختبار التنفيذ الخاص بك

تتميز لعبة الفضاء الخاصة بك الآن باكتشاف التصادم الكامل وميكانيكية القتال. 🚀 اختبر هذه القدرات الجديدة:

تنقل باستخدام مفاتيح الأسهم للتحقق من عناصر التحكم في الحركة
أطلق الليزر باستخدام مفتاح المسافة - لاحظ كيف يمنع التبريد النقر السريع
راقب التصادمات عندما يصيب الليزر الأعداء، مما يؤدي إلى الإزالة
تحقق من التنظيف حيث تختفي الكائنات المدمرة من اللعبة

لقد نجحت في تنفيذ نظام اكتشاف التصادم باستخدام نفس المبادئ الرياضية التي توجه الملاحة الفضائية والروبوتات.

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

افتح أدوات المطور في المتصفح وقم بتعيين نقاط توقف في وظيفة اكتشاف التصادم الخاصة بك
حاول تعديل سرعة الليزر أو حركة العدو لرؤية تأثيرات التصادم
جرب قيم تبريد مختلفة لاختبار معدلات الإطلاق
أضف عبارات console.log لتتبع أحداث الاصطدام في الوقت الفعلي

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

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

📅 برمجة الفيزياء الخاصة بك على مدار الأسبوع

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

🌟 إتقانك لفيزياء الألعاب على مدار الشهر

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

🎯 جدول زمني لإتقان اكتشاف الاصطدام

timeline
    title Collision Detection & Game Physics Learning Progression
    
    section Foundation (10 minutes)
        Rectangle Math: Coordinate systems
                      : Boundary calculations
                      : Position tracking
                      : Dimension management
        
    section Algorithm Design (20 minutes)
        Intersection Logic: Separation testing
                          : Overlap detection
                          : Performance optimization
                          : Edge case handling
        
    section Game Implementation (30 minutes)
        Object Systems: Lifecycle management
                      : Event coordination
                      : State tracking
                      : Memory cleanup
        
    section Interactive Features (40 minutes)
        Combat Mechanics: Projectile systems
                        : Weapon cooldowns
                        : Damage calculation
                        : Visual feedback
        
    section Advanced Physics (50 minutes)
        Real-time Systems: Frame rate optimization
                         : Spatial partitioning
                         : Collision response
                         : Physics simulation
        
    section Professional Techniques (1 week)
        Game Engine Concepts: Component systems
                             : Physics pipelines
                             : Performance profiling
                             : Cross-platform optimization
        
    section Industry Applications (1 month)
        Production Skills: Large-scale optimization
                         : Team collaboration
                         : Engine development
                         : Platform deployment

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

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

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

تطبيقات واقعية: مهاراتك في اكتشاف الاصطدام تنطبق مباشرة على:

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

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

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

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

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

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

🌟 إنجاز محقق: لقد قمت ببناء نظام تفاعل كامل قائم على الفيزياء مع اكتشاف اصطدام بمستوى احترافي!

تحدي GitHub Copilot Agent 🚀

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

الوصف: قم بتحسين نظام اكتشاف الاصطدام من خلال تنفيذ تعزيزات تظهر بشكل عشوائي وتوفر قدرات مؤقتة عند جمعها بواسطة سفينة البطل.

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

🚀 التحدي

أضف انفجارًا! ألقِ نظرة على أصول اللعبة في مستودع فن الفضاء وحاول إضافة انفجار عندما يصطدم الليزر بكائن فضائي.

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

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

جرب تغيير الفواصل الزمنية في لعبتك حتى الآن. ماذا يحدث عندما تغيرها؟ اقرأ المزيد عن أحداث توقيت JavaScript.

الواجب

استكشاف الاصطدامات

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

36 KiB Raw Blame History

بناء لعبة الفضاء الجزء الرابع: إضافة الليزر واكتشاف التصادمات

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

اكتشاف التصادم

تمثيل المستطيل

خوارزمية التقاطع

إدارة دورة حياة الكائنات

تنفيذ ميكانيكية الليزر

تنفيذ التحكم في معدل الإطلاق

بناء نظام التصادم

قواعد التصادم التي يجب تنفيذها

🔄 تقييم تربوي

إعداد بيئة التطوير الخاصة بك

هيكل المشروع

بدء تشغيل خادم التطوير

التنفيذ خطوة بخطوة

1. إضافة حدود تصادم المستطيل

2. تنفيذ اكتشاف التقاطع

3. تنفيذ نظام إطلاق الليزر

ثوابت الرسائل

التعامل مع إدخال لوحة المفاتيح

إعداد مستمع الحدث

4. إنشاء فئة الليزر

5. تنفيذ نظام اكتشاف التصادم

6. أضف نظام التبريد إلى فئة البطل

🔄 تقييم تربوي

اختبار التنفيذ الخاص بك

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

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

📅 برمجة الفيزياء الخاصة بك على مدار الأسبوع

🌟 إتقانك لفيزياء الألعاب على مدار الشهر

🎯 جدول زمني لإتقان اكتشاف الاصطدام

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

تحدي GitHub Copilot Agent 🚀

🚀 التحدي

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

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

الواجب

36 KiB

Raw Blame History