<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a6ce295ff03bb49df7a3e17e6e7100a0",
  "translation_date": "2025-08-28T15:24:04+00:00",
  "source_file": "6-space-game/4-collision-detection/README.md",
  "language_code": "ur"
}
-->
# اسپیس گیم بنائیں حصہ 4: لیزر شامل کریں اور تصادم کا پتہ لگائیں

## لیکچر سے پہلے کا کوئز

[لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/35)

اس سبق میں آپ جاوا اسکرپٹ کے ذریعے لیزر فائر کرنا سیکھیں گے! ہم اپنے گیم میں دو چیزیں شامل کریں گے:

- **ایک لیزر**: یہ لیزر آپ کے ہیرو کے جہاز سے اوپر کی طرف فائر ہوگی۔
- **تصادم کا پتہ لگانا**: لیزر فائر کرنے کی صلاحیت کے ساتھ ہم کچھ دلچسپ گیم کے اصول بھی شامل کریں گے:
   - **لیزر دشمن کو لگے**: اگر لیزر دشمن کو لگے تو دشمن ختم ہو جائے۔
   - **لیزر اسکرین کے اوپر لگے**: اگر لیزر اسکرین کے اوپری حصے سے ٹکرا جائے تو وہ ختم ہو جائے۔
   - **دشمن اور ہیرو کا تصادم**: اگر دشمن اور ہیرو ایک دوسرے سے ٹکرا جائیں تو دونوں ختم ہو جائیں۔
   - **دشمن اسکرین کے نیچے پہنچ جائے**: اگر دشمن اسکرین کے نیچے پہنچ جائے تو دشمن اور ہیرو دونوں ختم ہو جائیں۔

مختصراً، آپ -- *ہیرو* -- کو تمام دشمنوں کو لیزر سے مارنا ہوگا اس سے پہلے کہ وہ اسکرین کے نیچے پہنچ جائیں۔

✅ تحقیق کریں کہ سب سے پہلا کمپیوٹر گیم کب بنایا گیا تھا اور اس کی کیا خصوصیات تھیں؟

آئیے ہیرو بنیں!

## تصادم کا پتہ لگانا

ہم تصادم کا پتہ کیسے لگائیں؟ ہمیں اپنے گیم کے آبجیکٹس کو ایسے مستطیلوں کے طور پر سوچنا ہوگا جو حرکت کر رہے ہیں۔ آپ پوچھ سکتے ہیں کہ ایسا کیوں؟ کیونکہ گیم آبجیکٹ کو ڈرا کرنے کے لیے جو تصویر استعمال کی جاتی ہے وہ ایک مستطیل ہوتی ہے: اس کے پاس `x`, `y`, `width` اور `height` ہوتی ہیں۔

اگر دو مستطیلیں، جیسے ہیرو اور دشمن، *آپس میں ٹکرا جائیں* تو تصادم ہو جاتا ہے۔ اس کے بعد کیا ہونا چاہیے یہ گیم کے اصولوں پر منحصر ہے۔ تصادم کا پتہ لگانے کے لیے آپ کو درج ذیل چیزوں کی ضرورت ہوگی:

1. گیم آبجیکٹ کی مستطیل کی نمائندگی حاصل کرنے کا ایک طریقہ، کچھ اس طرح:

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

2. موازنہ کرنے کا ایک فنکشن، یہ فنکشن کچھ اس طرح ہو سکتا ہے:

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

## چیزوں کو ختم کیسے کریں

گیم میں چیزوں کو ختم کرنے کے لیے آپ کو گیم کو یہ بتانا ہوگا کہ اب اس آئٹم کو گیم لوپ میں پینٹ نہیں کرنا چاہیے جو ایک خاص وقفے پر ٹرگر ہوتا ہے۔ اس کا ایک طریقہ یہ ہے کہ کسی گیم آبجیکٹ کو *مردہ* کے طور پر نشان زد کریں جب کچھ ہو، جیسے:

```javascript
// collision happened
enemy.dead = true
```

پھر آپ اسکرین کو دوبارہ پینٹ کرنے سے پہلے *مردہ* آبجیکٹس کو الگ کر سکتے ہیں، کچھ اس طرح:

```javascript
gameObjects = gameObject.filter(go => !go.dead);
```

## لیزر کیسے فائر کریں

لیزر فائر کرنے کا مطلب ہے کہ کسی کی-ایونٹ پر ردعمل دینا اور ایک ایسا آبجیکٹ بنانا جو کسی خاص سمت میں حرکت کرے۔ اس کے لیے ہمیں درج ذیل اقدامات کرنے ہوں گے:

1. **لیزر آبجیکٹ بنائیں**: ہیرو کے جہاز کے اوپر سے، جو بنتے ہی اسکرین کے اوپر کی طرف حرکت شروع کر دے۔
2. **کی-ایونٹ کے ساتھ کوڈ منسلک کریں**: ہمیں کی بورڈ پر ایک کلید منتخب کرنی ہوگی جو کھلاڑی کے لیزر فائر کرنے کی نمائندگی کرے۔
3. **ایک گیم آبجیکٹ بنائیں جو لیزر کی طرح نظر آئے** جب کلید دبائی جائے۔

## لیزر پر کول ڈاؤن

لیزر کو ہر بار فائر ہونا چاہیے جب آپ کوئی کلید دبائیں، جیسے *اسپیس*۔ گیم کو بہت زیادہ لیزرز پیدا کرنے سے روکنے کے لیے ہمیں اس مسئلے کو حل کرنا ہوگا۔ اس کا حل ایک *کول ڈاؤن*، یعنی ایک ٹائمر، نافذ کرنا ہے جو یہ یقینی بنائے کہ لیزر صرف ایک خاص وقت کے بعد فائر ہو۔ آپ اسے اس طرح نافذ کر سکتے ہیں:

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

class Weapon {
  constructor {
  }
  fire() {
    if (!this.cooldown || this.cooldown.cool) {
      // produce a laser
      this.cooldown = new Cooldown(500);
    } else {
      // do nothing - it hasn't cooled down yet.
    }
  }
}
```

✅ اسپیس گیم سیریز کے سبق 1 کا حوالہ دیں تاکہ *کول ڈاؤن* کے بارے میں یاد دہانی ہو۔

## کیا بنانا ہے

آپ پچھلے سبق سے موجودہ کوڈ (جسے آپ نے صاف اور ریفیکٹر کیا ہوگا) لیں گے اور اسے بڑھائیں گے۔ یا تو حصہ II کے کوڈ سے شروع کریں یا [حصہ III- اسٹارٹر](../../../../../../../../../your-work) کے کوڈ کا استعمال کریں۔

> ٹپ: لیزر جو آپ استعمال کریں گے وہ پہلے سے آپ کے اثاثوں کے فولڈر میں موجود ہے اور آپ کے کوڈ میں حوالہ دیا گیا ہے۔

- **تصادم کا پتہ لگانا شامل کریں**، جب لیزر کسی چیز سے ٹکرا جائے تو درج ذیل اصول لاگو ہوں:
   1. **لیزر دشمن کو لگے**: اگر لیزر دشمن کو لگے تو دشمن ختم ہو جائے۔
   2. **لیزر اسکرین کے اوپر لگے**: اگر لیزر اسکرین کے اوپری حصے سے ٹکرا جائے تو وہ ختم ہو جائے۔
   3. **دشمن اور ہیرو کا تصادم**: اگر دشمن اور ہیرو ایک دوسرے سے ٹکرا جائیں تو دونوں ختم ہو جائیں۔
   4. **دشمن اسکرین کے نیچے پہنچ جائے**: اگر دشمن اسکرین کے نیچے پہنچ جائے تو دشمن اور ہیرو دونوں ختم ہو جائیں۔

## تجویز کردہ اقدامات

`your-work` سب فولڈر میں بنائی گئی فائلوں کو تلاش کریں۔ اس میں درج ذیل شامل ہونا چاہیے:

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

آپ اپنے پروجیکٹ کو `your_work` فولڈر میں درج ذیل کمانڈ کے ذریعے شروع کریں:

```bash
cd your-work
npm start
```

اوپر دی گئی کمانڈ HTTP سرور کو ایڈریس `http://localhost:5000` پر شروع کرے گی۔ ایک براؤزر کھولیں اور اس ایڈریس کو درج کریں، اس وقت یہ ہیرو اور تمام دشمنوں کو رینڈر کرے گا، لیکن ابھی کچھ حرکت نہیں ہو رہی ہوگی :).

### کوڈ شامل کریں

1. **اپنے گیم آبجیکٹ کی مستطیل کی نمائندگی ترتیب دیں تاکہ تصادم کو ہینڈل کیا جا سکے**۔ نیچے دیا گیا کوڈ آپ کو `GameObject` کی مستطیل کی نمائندگی حاصل کرنے کی اجازت دیتا ہے۔ اپنی `GameObject` کلاس کو اس میں ترمیم کریں:

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

2. **تصادم کو چیک کرنے کا کوڈ شامل کریں**۔ یہ ایک نیا فنکشن ہوگا جو یہ ٹیسٹ کرے گا کہ آیا دو مستطیلیں آپس میں ٹکرا رہی ہیں:

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

3. **لیزر فائر کرنے کی صلاحیت شامل کریں**
   1. **کی-ایونٹ میسج شامل کریں**۔ *اسپیس* کلید کو ہیرو کے جہاز کے اوپر ایک لیزر بنانے کے لیے استعمال کریں۔ `Messages` آبجیکٹ میں تین کانسٹنٹس شامل کریں:

       ```javascript
        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
       ```

   1. **اسپیس کلید کو ہینڈل کریں**۔ `window.addEventListener` کے `keyup` فنکشن میں ترمیم کریں تاکہ اسپیس کو ہینڈل کیا جا سکے:

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

    1. **لسنرز شامل کریں**۔ `initGame()` فنکشن میں ترمیم کریں تاکہ یہ یقینی بنایا جا سکے کہ جب اسپیس بار دبائی جائے تو ہیرو فائر کر سکے:

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

       اور ایک نیا `eventEmitter.on()` فنکشن شامل کریں تاکہ جب دشمن لیزر سے ٹکرا جائے تو رویہ یقینی بنایا جا سکے:

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

   1. **آبجیکٹ کو حرکت دیں**۔ اس بات کو یقینی بنائیں کہ لیزر آہستہ آہستہ اسکرین کے اوپر کی طرف حرکت کرے۔ آپ ایک نئی `Laser` کلاس بنائیں گے جو `GameObject` کو بڑھائے گی، جیسا کہ آپ نے پہلے کیا تھا:

      ```javascript
        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)
        }
      }
      ```

   1. **تصادم کو ہینڈل کریں**۔ لیزر کے لیے تصادم کے اصول نافذ کریں۔ ایک `updateGameObjects()` فنکشن شامل کریں جو ٹکرانے والے آبجیکٹس کو ہٹ کے لیے ٹیسٹ کرے:

      ```javascript
      function updateGameObjects() {
        const enemies = gameObjects.filter(go => go.type === 'Enemy');
        const lasers = gameObjects.filter((go) => go.type === "Laser");
      // laser hit something
        lasers.forEach((l) => {
          enemies.forEach((m) => {
            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
              first: l,
              second: m,
            });
          }
         });
      });

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

      اس بات کو یقینی بنائیں کہ `updateGameObjects()` کو اپنے گیم لوپ میں `window.onload` میں شامل کریں۔

   4. **لیزر پر کول ڈاؤن نافذ کریں** تاکہ یہ صرف ایک خاص وقت کے بعد فائر ہو سکے۔

      آخر میں، `Hero` کلاس میں ترمیم کریں تاکہ یہ کول ڈاؤن کر سکے:

       ```javascript
      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;
        }
      }
      ```

اس مقام پر، آپ کے گیم میں کچھ فعالیت موجود ہے! آپ اپنے ایرو کیز کے ساتھ نیویگیٹ کر سکتے ہیں، اسپیس بار کے ساتھ لیزر فائر کر سکتے ہیں، اور جب آپ دشمنوں کو مارتے ہیں تو وہ غائب ہو جاتے ہیں۔ شاباش!

---

## 🚀 چیلنج

ایک دھماکہ شامل کریں! [اسپیس آرٹ ریپو](../../../../6-space-game/solution/spaceArt/readme.txt) میں گیم کے اثاثوں پر نظر ڈالیں اور کوشش کریں کہ جب لیزر کسی ایلین کو لگے تو ایک دھماکہ شامل کریں۔

## لیکچر کے بعد کا کوئز

[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/36)

## جائزہ اور خود مطالعہ

اب تک کے گیم میں وقفوں کے ساتھ تجربہ کریں۔ جب آپ انہیں تبدیل کرتے ہیں تو کیا ہوتا ہے؟ [جاوا اسکرپٹ ٹائمنگ ایونٹس](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) کے بارے میں مزید پڑھیں۔

## اسائنمنٹ

[تصادم کو دریافت کریں](assignment.md)

---

**ڈسکلیمر**:  
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔