11 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 اثاثہ شامل کرنا ہوگا۔ lifeImg کو window.onload فنکشن میں شامل کریں:
```
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();
```

گیم کے اصول نافذ کریں۔ درج ذیل گیم اصول نافذ کریں:
1. ہر ہیرو اور دشمن کے تصادم پر، ایک زندگی کم کریں۔
  
  Hero کلاس کو اس کمی کے لیے بڑھائیں:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. ہر لیزر جو دشمن کو لگے، گیم اسکور میں 100 پوائنٹس کا اضافہ کریں۔
  
  ہیرو کلاس کو اس اضافے کے لیے بڑھائیں:
```
  incrementPoints() {
    this.points += 100;
  }
```
  ان فنکشنز کو اپنے تصادم ایونٹ ایمیٹرز میں شامل کریں:
```
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();
});
```

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

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

GitHub Copilot Agent Challenge 🚀

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

تفصیل: اسپیس گیم کے اسکورنگ سسٹم کو بہتر بنائیں اور ایک ہائی اسکور فیچر کے ساتھ مستقل اسٹوریج اور بونس اسکورنگ میکینکس نافذ کریں۔

پرومپٹ: ایک ہائی اسکور سسٹم بنائیں جو کھلاڑی کے بہترین اسکور کو localStorage میں محفوظ کرے۔ مسلسل دشمنوں کو مارنے پر بونس پوائنٹس (کمبو سسٹم) شامل کریں اور مختلف دشمنوں کے لیے مختلف پوائنٹ ویلیوز نافذ کریں۔ جب کھلاڑی نیا ہائی اسکور حاصل کرے تو ایک بصری اشارہ شامل کریں اور گیم اسکرین پر موجودہ ہائی اسکور دکھائیں۔

🚀 چیلنج

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

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

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

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

اسائنمنٹ

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

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

11 KiB Raw Blame History Unescape Escape