# اسپیس گیم بنائیں حصہ 5: اسکورنگ اور زندگیاں ## لیکچر سے پہلے کا کوئز [لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/37) کیا آپ اپنی اسپیس گیم کو ایک حقیقی گیم کی طرح محسوس کروانے کے لیے تیار ہیں؟ آئیے اسکورنگ پوائنٹس اور زندگیاں شامل کریں - وہ بنیادی میکینکس جنہوں نے ابتدائی آرکیڈ گیمز جیسے اسپیس انویڈرز کو سادہ مظاہروں سے نشہ آور تفریح میں تبدیل کر دیا۔ یہ وہ مرحلہ ہے جہاں آپ کی گیم واقعی کھیلنے کے قابل بن جاتی ہے۔ ## اسکرین پر ٹیکسٹ ڈرائنگ - آپ کی گیم کی آواز اپنا اسکور دکھانے کے لیے، ہمیں کینوس پر ٹیکسٹ رینڈر کرنے کا طریقہ سیکھنا ہوگا۔ `fillText()` میتھڈ آپ کا بنیادی ٹول ہے - یہ وہی تکنیک ہے جو کلاسک آرکیڈ گیمز میں اسکورز اور اسٹیٹس کی معلومات دکھانے کے لیے استعمال ہوتی تھی۔ آپ کے پاس ٹیکسٹ کی ظاہری شکل پر مکمل کنٹرول ہے: ```javascript ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` ✅ [کینوس پر ٹیکسٹ شامل کرنے](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) پر مزید گہرائی سے غور کریں - آپ حیران ہو سکتے ہیں کہ فونٹس اور اسٹائلنگ کے ساتھ آپ کتنے تخلیقی ہو سکتے ہیں! ## زندگیاں - صرف ایک نمبر سے زیادہ گیم ڈیزائن میں، "زندگی" کھلاڑی کی غلطی کی گنجائش کی نمائندگی کرتی ہے۔ یہ تصور پن بال مشینوں سے شروع ہوا، جہاں آپ کو کھیلنے کے لیے متعدد گیندیں ملتی تھیں۔ ابتدائی ویڈیو گیمز جیسے ایسٹروئڈز میں، زندگیاں کھلاڑیوں کو خطرہ مول لینے اور غلطیوں سے سیکھنے کی اجازت دیتی تھیں۔ بصری نمائندگی بہت اہمیت رکھتی ہے - صرف "Lives: 3" کے بجائے جہاز کے آئیکنز دکھانا فوری بصری پہچان پیدا کرتا ہے، بالکل اسی طرح جیسے ابتدائی آرکیڈ کیبنٹس نے زبان کی رکاوٹوں کے پار بات چیت کرنے کے لیے آئیکنوگرافی کا استعمال کیا۔ ## اپنی گیم کا انعامی نظام بنائیں اب ہم وہ بنیادی فیڈبیک سسٹمز نافذ کریں گے جو کھلاڑیوں کو مشغول رکھتے ہیں: - **اسکورنگ سسٹم**: ہر تباہ شدہ دشمن جہاز 100 پوائنٹس دیتا ہے (گول نمبر کھلاڑیوں کے لیے ذہنی طور پر حساب لگانا آسان بناتے ہیں)۔ اسکور نیچے بائیں کونے میں دکھایا جائے گا۔ - **زندگی کا کاؤنٹر**: آپ کا ہیرو تین زندگیاں لے کر شروع کرتا ہے - ایک معیار جو ابتدائی آرکیڈ گیمز نے چیلنج اور کھیلنے کی صلاحیت کے توازن کے لیے قائم کیا۔ دشمن کے ساتھ ہر تصادم ایک زندگی کی قیمت پر ہوتا ہے۔ باقی زندگیاں نیچے دائیں کونے میں جہاز کے آئیکنز کے ذریعے دکھائی جائیں گی ۔ ## آئیے تعمیر شروع کریں! سب سے پہلے، اپنا ورک اسپیس سیٹ کریں۔ اپنے `your-work` سب فولڈر میں فائلوں پر جائیں۔ آپ کو یہ فائلیں نظر آنی چاہئیں: ```bash -| assets -| enemyShip.png -| player.png -| laserRed.png -| index.html -| app.js -| package.json ``` اپنی گیم کو ٹیسٹ کرنے کے لیے، `your_work` فولڈر سے ڈیولپمنٹ سرور شروع کریں: ```bash cd your-work npm start ``` یہ ایک لوکل سرور `http://localhost:5000` پر چلاتا ہے۔ اپنے براؤزر میں اس ایڈریس کو کھولیں تاکہ اپنی گیم دیکھ سکیں۔ کنٹرولز کو ایرو کیز کے ساتھ ٹیسٹ کریں اور دشمنوں کو شوٹ کرنے کی کوشش کریں تاکہ سب کچھ ٹھیک کام کر رہا ہو۔ ### کوڈنگ کا وقت! 1. **وہ بصری اثاثے حاصل کریں جن کی آپ کو ضرورت ہوگی**۔ `solution/assets/` فولڈر سے `life.png` اثاثہ کاپی کریں اور اسے اپنے `your-work` فولڈر میں رکھیں۔ پھر `lifeImg` کو اپنے `window.onload` فنکشن میں شامل کریں: ```javascript lifeImg = await loadTexture("assets/life.png"); ``` 1. `lifeImg` کو اپنے اثاثوں کی فہرست میں شامل کرنا نہ بھولیں: ```javascript let heroImg, ... lifeImg, ... eventEmitter = new EventEmitter(); ``` 2. **اپنے گیم کے ویریبلز سیٹ کریں**۔ اپنے کل اسکور (0 سے شروع) اور باقی زندگیاں (3 سے شروع) کو ٹریک کرنے کے لیے کچھ کوڈ شامل کریں۔ ہم انہیں اسکرین پر دکھائیں گے تاکہ کھلاڑی ہمیشہ جان سکیں کہ وہ کہاں کھڑے ہیں۔ 3. **تصادم کا پتہ لگانا نافذ کریں**۔ اپنے `updateGameObjects()` فنکشن کو بڑھائیں تاکہ جب دشمن آپ کے ہیرو سے ٹکرا جائیں تو پتہ لگایا جا سکے: ```javascript enemies.forEach(enemy => { const heroRect = hero.rectFromGameObject(); if (intersectRect(heroRect, enemy.rectFromGameObject())) { eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy }); } }) ``` 4. **اپنے ہیرو میں زندگی اور پوائنٹ ٹریکنگ شامل کریں**۔ 1. **کاؤنٹرز کو انیشیئلائز کریں**۔ اپنے `Hero` کلاس میں `this.cooldown = 0` کے نیچے زندگی اور پوائنٹس سیٹ کریں: ```javascript this.life = 3; this.points = 0; ``` 1. **یہ ویلیوز کھلاڑی کو دکھائیں**۔ اسکرین پر ان ویلیوز کو ڈرائنگ کرنے کے لیے فنکشنز بنائیں: ```javascript 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); } ``` 1. **ان فنکشنز کو اپنے گیم لوپ میں شامل کریں**۔ ان فنکشنز کو `updateGameObjects()` کے فوراً بعد اپنے `window.onload` فنکشن میں شامل کریں: ```javascript drawPoints(); drawLife(); ``` 1. **گیم کے نتائج اور انعامات نافذ کریں**۔ اب ہم وہ فیڈبیک سسٹمز شامل کریں گے جو کھلاڑی کے اعمال کو معنی دیتے ہیں: 1. **تصادم زندگیاں کم کرتے ہیں**۔ ہر بار جب آپ کا ہیرو دشمن سے ٹکرا جائے، آپ کو ایک زندگی کھونا چاہیے۔ یہ میتھڈ اپنے `Hero` کلاس میں شامل کریں: ```javascript decrementLife() { this.life--; if (this.life === 0) { this.dead = true; } } ``` 2. **دشمنوں کو شوٹ کرنے سے پوائنٹس ملتے ہیں**۔ ہر کامیاب ہٹ 100 پوائنٹس دیتی ہے، جو درست شوٹنگ کے لیے فوری مثبت فیڈبیک فراہم کرتی ہے۔ اپنے Hero کلاس میں یہ انکریمنٹ میتھڈ شامل کریں: ```javascript incrementPoints() { this.points += 100; } ``` اب ان فنکشنز کو اپنے تصادم کے ایونٹس سے جوڑیں: ```javascript 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 ایجنٹ چیلنج 🚀 ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں: **تفصیل:** اسپیس گیم کے اسکورنگ سسٹم کو ایک ہائی اسکور فیچر کے ساتھ بہتر بنائیں جو مستقل اسٹوریج اور بونس اسکورنگ میکینکس کو نافذ کرے۔ **پرومپٹ:** ایک ہائی اسکور سسٹم بنائیں جو کھلاڑی کے بہترین اسکور کو localStorage میں محفوظ کرے۔ مسلسل دشمنوں کو مارنے کے لیے بونس پوائنٹس (کمبو سسٹم) شامل کریں اور مختلف دشمن اقسام کے لیے مختلف پوائنٹ ویلیوز نافذ کریں۔ جب کھلاڑی نیا ہائی اسکور حاصل کرے تو ایک بصری اشارہ شامل کریں اور گیم اسکرین پر موجودہ ہائی اسکور دکھائیں۔ ## 🚀 چیلنج اب آپ کے پاس اسکورنگ اور زندگیاں کے ساتھ ایک فعال گیم ہے۔ غور کریں کہ کون سی اضافی خصوصیات کھلاڑی کے تجربے کو بہتر بنا سکتی ہیں۔ ## لیکچر کے بعد کا کوئز [لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/38) ## جائزہ اور خود مطالعہ مزید دریافت کرنا چاہتے ہیں؟ گیم اسکورنگ اور زندگی کے سسٹمز کے مختلف طریقوں پر تحقیق کریں۔ وہاں دلچسپ گیم انجنز موجود ہیں جیسے [PlayFab](https://playfab.com) جو اسکورنگ، لیڈر بورڈز، اور کھلاڑی کی ترقی کو سنبھالتے ہیں۔ کچھ ایسا شامل کرنے سے آپ کی گیم کس طرح اگلے درجے پر جا سکتی ہے؟ ## اسائنمنٹ [اسکورنگ گیم بنائیں](assignment.md) --- **اعلانِ لاتعلقی**: یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کی بھرپور کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔