<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
  "translation_date": "2025-08-25T22:21:48+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://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. **کی ایونٹ میسج شامل کریں**۔ *اسپیس* کلید کو ہیرو کے جہاز کے اوپر ایک لیزر بنانا چاہیے۔ میسجز آبجیکٹ میں تین کانسٹینٹس شامل کریں:

       ```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. **لیزر پر کولڈاؤن نافذ کریں** تاکہ اسے صرف ایک خاص وقت کے بعد فائر کیا جا سکے۔

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

       ```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) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔