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