# स्पेस गेम बनाएं भाग 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) के बारे में अधिक पढ़ें, और इसे और आकर्षक बनाने के लिए स्वतंत्र महसूस करें! ## जीवन, एक गेम अवधारणा के रूप में गेम में जीवन की अवधारणा केवल एक संख्या है। स्पेस गेम के संदर्भ में, यह आम है कि एक सेट संख्या में जीवन दिया जाए, जो आपके जहाज को नुकसान होने पर एक-एक करके घटता है। यदि आप इसे ग्राफिकल रूप में दिखा सकें, जैसे मिनीशिप्स या दिल, तो यह संख्या की तुलना में अधिक आकर्षक लगता है। ## क्या बनाना है अपने गेम में निम्नलिखित जोड़ें: - **गेम स्कोर**: हर दुश्मन जहाज को नष्ट करने पर, हीरो को कुछ अंक दिए जाने चाहिए। हम सुझाव देते हैं कि प्रति जहाज 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 सर्वर को `http://localhost:5000` पते पर शुरू करेगा। ब्राउज़र खोलें और उस पते को दर्ज करें। अभी, यह हीरो और सभी दुश्मनों को रेंडर करेगा, और जब आप अपने बाएं और दाएं तीर दबाएंगे, तो हीरो हिल सकता है और दुश्मनों को शूट कर सकता है। ### कोड जोड़ें 1. **आवश्यक एसेट्स कॉपी करें**। `solution/assets/` फोल्डर से `your-work` फोल्डर में आवश्यक एसेट्स कॉपी करें; इसमें `life.png` एसेट जोड़ें। `window.onload` फंक्शन में lifeImg जोड़ें: ```javascript lifeImg = await loadTexture("assets/life.png"); ``` 1. एसेट्स की सूची में `lifeImg` जोड़ें: ```javascript let heroImg, ... lifeImg, ... eventEmitter = new EventEmitter(); ``` 2. **वेरिएबल्स जोड़ें**। अपने कुल स्कोर (0) और बचे हुए जीवन (3) का प्रतिनिधित्व करने वाले कोड को जोड़ें, और इन स्कोर को स्क्रीन पर प्रदर्शित करें। 3. **`updateGameObjects()` फंक्शन को विस्तारित करें**। दुश्मन के टकराव को संभालने के लिए `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. **गेम लूप में मेथड्स जोड़ें**। सुनिश्चित करें कि आप इन फंक्शन्स को `window.onload` फंक्शन में `updateGameObjects()` के तहत जोड़ें: ```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(); }); ``` ✅ थोड़ा शोध करें और पता लगाएं कि जावास्क्रिप्ट/कैनवास का उपयोग करके बनाए गए अन्य गेम कौन-कौन से हैं। उनके सामान्य लक्षण क्या हैं? इस काम के अंत तक, आपको नीचे दाईं ओर छोटे 'जीवन' जहाज, नीचे बाईं ओर अंक, और दुश्मनों से टकराने पर जीवन की गिनती घटती हुई और दुश्मनों को शूट करने पर अंक बढ़ते हुए दिखाई देंगे। बहुत अच्छा! आपका गेम लगभग पूरा हो गया है। --- ## 🚀 चुनौती आपका कोड लगभग पूरा हो गया है। क्या आप अपने अगले कदमों की कल्पना कर सकते हैं? ## पोस्ट-लेक्चर क्विज़ [पोस्ट-लेक्चर क्विज़](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) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।