Web-Dev-For-Beginners/translations/ur/6-space-game/5-keeping-score

اسپیس گیم بنائیں حصہ 5: اسکورنگ اور زندگیاں

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

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

اس سبق میں، آپ سیکھیں گے کہ گیم میں اسکورنگ کیسے شامل کی جائے اور زندگیاں کیسے شمار کی جائیں۔

اسکرین پر ٹیکسٹ دکھائیں

گیم کا اسکور اسکرین پر دکھانے کے لیے، آپ کو یہ جاننا ہوگا کہ اسکرین پر ٹیکسٹ کیسے رکھا جائے۔ اس کا جواب ہے fillText() میتھڈ کا استعمال کینوس آبجیکٹ پر۔ آپ دیگر پہلوؤں کو بھی کنٹرول کر سکتے ہیں جیسے کہ کون سا فونٹ استعمال کرنا ہے، ٹیکسٹ کا رنگ اور اس کی الائنمنٹ (لیفٹ، رائٹ، سینٹر)۔ نیچے کچھ کوڈ دیا گیا ہے جو اسکرین پر ٹیکسٹ ڈرا کرتا ہے۔

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ مزید پڑھیں کینوس پر ٹیکسٹ شامل کرنے کا طریقہ، اور اپنی تخلیق کو مزید خوبصورت بنانے کی کوشش کریں!

زندگی، گیم کا ایک تصور

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

کیا بنانا ہے

اپنے گیم میں درج ذیل شامل کریں:

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

تجویز کردہ مراحل

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. ضروری اثاثے کاپی کریں۔ solution/assets/ فولڈر سے your-work فولڈر میں ضروری اثاثے کاپی کریں؛ آپ کو life.png اثاثہ شامل کرنا ہوگا۔ window.onload فنکشن میں lifeImg شامل کریں:

   lifeImg = await loadTexture("assets/life.png");
   

2. lifeImg کو اثاثوں کی فہرست میں شامل کریں:

   let heroImg,
   ...
   lifeImg,
   ...
   eventEmitter = new EventEmitter();
   

3. ویری ایبلز شامل کریں۔ ایسا کوڈ شامل کریں جو آپ کے کل اسکور (0) اور باقی زندگیاں (3) کو ظاہر کرے، اور ان اسکورز کو اسکرین پر دکھائیں۔

4. updateGameObjects() فنکشن کو بڑھائیں۔ updateGameObjects() فنکشن کو دشمنوں کے تصادم کو ہینڈل کرنے کے لیے بڑھائیں:

   enemies.forEach(enemy => {
       const heroRect = hero.rectFromGameObject();
       if (intersectRect(heroRect, enemy.rectFromGameObject())) {
         eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
       }
     })
   

5. زندگی اور پوائنٹس شامل کریں۔

   1. ویری ایبلز انیشیالائز کریں۔ Hero کلاس میں this.cooldown = 0 کے نیچے زندگی اور پوائنٹس سیٹ کریں:

      this.life = 3;
      this.points = 0;
      

   2. ویری ایبلز اسکرین پر ڈرا کریں۔ ان ویلیوز کو اسکرین پر ڈرا کریں:

      function drawLife() {
        // TODO, 35, 27
        const START_POS = canvas.width - 180;
        for(let i=0; i < hero.life; i++ ) {
          ctx.drawImage(
            lifeImg, 
            START_POS + (45 * (i+1) ), 
            canvas.height - 37);
        }
      }
      
      function drawPoints() {
        ctx.font = "30px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "left";
        drawText("Points: " + hero.points, 10, canvas.height-20);
      }
      
      function drawText(message, x, y) {
        ctx.fillText(message, x, y);
      }
      
      

   3. گیم لوپ میں میتھڈز شامل کریں۔ ان فنکشنز کو updateGameObjects() کے نیچے window.onload فنکشن میں شامل کریں:

      drawPoints();
      drawLife();
      

6. گیم کے اصول نافذ کریں۔ درج ذیل گیم اصول نافذ کریں:

   1. ہر ہیرو اور دشمن کے تصادم پر، ایک زندگی کم کریں۔

      Hero کلاس کو اس کمی کے لیے بڑھائیں:

      decrementLife() {
        this.life--;
        if (this.life === 0) {
          this.dead = true;
        }
      }
      

   2. ہر لیزر جو دشمن کو لگے، گیم اسکور میں 100 پوائنٹس کا اضافہ کریں۔

      Hero کلاس کو اس اضافے کے لیے بڑھائیں:

        incrementPoints() {
          this.points += 100;
        }
      

      ان فنکشنز کو اپنے Collision Event Emitters میں شامل کریں:

      eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
         first.dead = true;
         second.dead = true;
         hero.incrementPoints();
      })
      
      eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
         enemy.dead = true;
         hero.decrementLife();
      });
      

✅ تھوڑی تحقیق کریں اور دریافت کریں کہ جاوا اسکرپٹ/کینوس کا استعمال کرتے ہوئے بنائے گئے دیگر گیمز کون سے ہیں۔ ان کے عام خصوصیات کیا ہیں؟

اس کام کے اختتام پر، آپ کو نیچے دائیں جانب چھوٹے 'زندگی' کے جہاز، نیچے بائیں جانب پوائنٹس، اور جب آپ دشمنوں سے ٹکرائیں تو اپنی زندگی کی گنتی کم ہوتی اور جب آپ دشمنوں کو ماریں تو پوائنٹس بڑھتے نظر آئیں گے۔ شاباش! آپ کا گیم تقریباً مکمل ہو چکا ہے۔

---

🚀 چیلنج

آپ کا کوڈ تقریباً مکمل ہے۔ کیا آپ اپنے اگلے مراحل کا تصور کر سکتے ہیں؟

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

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

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

کچھ طریقے تلاش کریں جن سے آپ گیم اسکورز اور زندگیاں بڑھا اور گھٹا سکتے ہیں۔ کچھ دلچسپ گیم انجنز جیسے PlayFab موجود ہیں۔ ان میں سے کسی ایک کا استعمال آپ کے گیم کو کیسے بہتر بنا سکتا ہے؟

اسائنمنٹ

اسکورنگ گیم بنائیں

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