Web-Dev-For-Beginners/translations/ur/6-space-game/4-collision-detection/README.md

اسپیس گیم بنائیں حصہ 4: لیزر شامل کریں اور تصادم کا پتہ لگائیں

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

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

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

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

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

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

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

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

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

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

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

   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);
   }
   

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

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

// collision happened
enemy.dead = true

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

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

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

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

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

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

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

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- اسٹارٹر کے کوڈ کا استعمال کریں۔

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

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

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

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

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

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

cd your-work
npm start

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

کوڈ شامل کریں

1. اپنے گیم آبجیکٹ کی مستطیل کی نمائندگی ترتیب دیں تاکہ تصادم کو ہینڈل کیا جا سکے۔ نیچے دیا گیا کوڈ آپ کو GameObject کی مستطیل کی نمائندگی حاصل کرنے کی اجازت دیتا ہے۔ اپنی 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
     );
   }
   

3. لیزر فائر کرنے کی صلاحیت شامل کریں

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

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

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

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

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

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

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

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

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

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

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

      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 میں شامل کریں۔

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

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

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

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

---

🚀 چیلنج

ایک دھماکہ شامل کریں! اسپیس آرٹ ریپو میں گیم کے اثاثوں پر نظر ڈالیں اور کوشش کریں کہ جب لیزر کسی ایلین کو لگے تو ایک دھماکہ شامل کریں۔

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

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

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

اب تک کے گیم میں وقفوں کے ساتھ تجربہ کریں۔ جب آپ انہیں تبدیل کرتے ہیں تو کیا ہوتا ہے؟ جاوا اسکرپٹ ٹائمنگ ایونٹس کے بارے میں مزید پڑھیں۔

اسائنمنٹ

تصادم کو دریافت کریں

---

ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔