# अंतरिक्ष खेल बनाएं भाग 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. **`life` और `points` जोड़ें**। 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(); }); ``` ✅ थोड़ा शोध करें और पता लगाएं कि जावास्क्रिप्ट/कैनवास का उपयोग करके बनाए गए अन्य खेल कौन से हैं। उनके सामान्य लक्षण क्या हैं? इस काम के अंत तक, आपको नीचे दाईं ओर छोटे 'जीवन' जहाज, नीचे बाईं ओर अंक, और दुश्मनों से टकराने पर जीवन की गिनती घटती हुई और दुश्मनों को शूट करने पर अंक बढ़ते हुए दिखाई देंगे। बहुत बढ़िया! आपका खेल लगभग पूरा हो गया है। --- ## 🚀 चुनौती आपका कोड लगभग पूरा हो गया है। क्या आप अपने अगले कदमों की कल्पना कर सकते हैं? ## पोस्ट-लेक्चर क्विज़ [पोस्ट-लेक्चर क्विज़](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) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।