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

اسپیس گیم بنائیں حصہ 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. کی ایونٹ میسج شامل کریں۔ اسپیس کلید کو ہیرو کے جہاز کے اوپر ایک لیزر بنانا چاہیے۔ میسجز آبجیکٹ میں تین کانسٹینٹس شامل کریں:

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

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

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