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://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 کی اپ فنکشن میں ترمیم کریں تاکہ اسپیس کو سنبھالا جا سکے:

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

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

GitHub Copilot Agent چیلنج 🚀

Agent موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:

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

پرومپٹ: ایک PowerUp کلاس بنائیں جو GameObject کو بڑھاتا ہے اور ہیرو اور پاور اپس کے درمیان تصادم کا پتہ لگانے کو نافذ کریں۔ کم از کم دو قسم کے پاور اپس شامل کریں: ایک جو فائر ریٹ بڑھاتا ہے (کولڈاؤن کو کم کرتا ہے) اور دوسرا جو عارضی شیلڈ بناتا ہے۔ پیداوار کی منطق شامل کریں جو تصادفی وقفوں اور پوزیشنوں پر پاور اپس بناتی ہے۔

---

🚀 چیلنج

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

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

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

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

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

اسائنمنٹ

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

---

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