9.7 KiB

Raw Blame History Unescape Escape

اسپیس گیم بنائیں حصہ 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 پر شروع کرے گی۔ ایک براؤزر کھولیں اور اس ایڈریس کو درج کریں، اس وقت یہ ہیرو اور تمام دشمنوں کو رینڈر کرے گا، اور جب آپ اپنے بائیں اور دائیں تیر کے بٹن دبائیں گے، تو ہیرو حرکت کرے گا اور دشمنوں کو گرا سکے گا۔

کوڈ شامل کریں

ضروری اثاثے کاپی کریں۔ solution/assets/ فولڈر سے your-work فولڈر میں ضروری اثاثے کاپی کریں؛ آپ کو life.png اثاثہ شامل کرنا ہوگا۔ window.onload فنکشن میں lifeImg شامل کریں:
```
lifeImg = await loadTexture("assets/life.png");
```

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

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

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

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

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

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

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

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

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

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

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

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

Hero کلاس کو اس کمی کے لیے بڑھائیں:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

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

9.7 KiB Raw Blame History Unescape Escape