Web-Dev-For-Beginners/translations/ne/6-space-game/5-keeping-score

स्पेस गेम बनाउनुहोस् भाग ५: स्कोरिङ र जीवनहरू

प्रि-लेक्चर क्विज

प्रि-लेक्चर क्विज

यस पाठमा, तपाईंले खेलमा स्कोरिङ थप्ने र जीवन गणना गर्ने तरिका सिक्नुहुनेछ।

स्क्रिनमा टेक्स्ट देखाउनुहोस्

खेलको स्कोर स्क्रिनमा देखाउन सक्षम हुनको लागि, तपाईंले स्क्रिनमा टेक्स्ट कसरी राख्ने जान्न आवश्यक छ। यसको उत्तर हो क्यानभास वस्तुमा fillText() विधि प्रयोग गर्नु। तपाईं अन्य पक्षहरू पनि नियन्त्रण गर्न सक्नुहुन्छ जस्तै कुन फन्ट प्रयोग गर्ने, टेक्स्टको रंग र यसको एलाइनमेन्ट (बायाँ, दायाँ, केन्द्र)। तलको कोडले स्क्रिनमा केही टेक्स्ट देखाउँछ।

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ क्यानभासमा टेक्स्ट कसरी थप्ने बारे थप पढ्नुहोस्, र तपाईंको टेक्स्टलाई अझ आकर्षक बनाउन स्वतन्त्र महसुस गर्नुहोस्!

जीवन, खेलको अवधारणा

खेलमा जीवनको अवधारणा केवल एउटा संख्या हो। स्पेस गेमको सन्दर्भमा, सामान्यतया जीवनहरूको सेट तोकिन्छ जुन तपाईंको जहाजले क्षति लिँदा एक-एक गरेर घटाइन्छ। यदि तपाईंले यसलाई ग्राफिकल रूपमा देखाउन सक्नुहुन्छ भने राम्रो हुन्छ, जस्तै साना जहाजहरू वा हृदयहरू संख्याको सट्टा।

के निर्माण गर्ने

तपाईंको खेलमा निम्न थपौं:

• खेल स्कोर: प्रत्येक शत्रु जहाज नष्ट गर्दा, नायकले केही अंक प्राप्त गर्नुपर्छ, हामी सुझाव दिन्छौं प्रति जहाज १०० अंक। खेल स्कोर तलको बायाँतिर देखाइनु पर्छ।
• जीवन: तपाईंको जहाजसँग तीन जीवनहरू छन्। प्रत्येक पटक शत्रु जहाजले तपाईंलाई ठक्कर दिन्छ, तपाईंले एक जीवन गुमाउनुहुन्छ। जीवन स्कोर तलको दायाँतिर देखाइनु पर्छ र निम्न ग्राफिकबाट बनेको हुनुपर्छ ।

सिफारिस गरिएका चरणहरू

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 ठेगानामा सुरु गर्नेछ। ब्राउजर खोल्नुहोस् र उक्त ठेगाना इनपुट गर्नुहोस्, अहिले यो नायक र सबै शत्रुहरू देखाउनेछ, र जब तपाईं आफ्नो बायाँ र दायाँ तीरहरू थिच्नुहुन्छ, नायक चल्छ र शत्रुहरूलाई गोली हान्न सक्छ।

कोड थप्नुहोस्

1. आवश्यक सम्पत्ति प्रतिलिपि गर्नुहोस्। solution/assets/ फोल्डरबाट your-work फोल्डरमा life.png सम्पत्ति थप्नुहोस्। lifeImg लाई window.onload फङ्सनमा थप्नुहोस्:

   lifeImg = await loadTexture("assets/life.png");
   

2. lifeImg लाई सम्पत्तिहरूको सूचीमा थप्नुहोस्:

   let heroImg,
   ...
   lifeImg,
   ...
   eventEmitter = new EventEmitter();
   

3. भेरिएबलहरू थप्नुहोस्। तपाईंको कुल स्कोर (०) र बाँकी जीवनहरू (३) प्रतिनिधित्व गर्ने कोड थप्नुहोस्, यी स्कोरहरू स्क्रिनमा देखाउनुहोस्।

4. updateGameObjects() फङ्सन विस्तार गर्नुहोस्। शत्रु ठक्करहरू ह्यान्डल गर्न updateGameObjects() फङ्सन विस्तार गर्नुहोस्:

   enemies.forEach(enemy => {
       const heroRect = hero.rectFromGameObject();
       if (intersectRect(heroRect, enemy.rectFromGameObject())) {
         eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
       }
     })
   

5. जीवन र अंकहरू थप्नुहोस्।

   1. भेरिएबलहरू आरम्भ गर्नुहोस्। Hero क्लासमा this.cooldown = 0 अन्तर्गत जीवन र अंक सेट गर्नुहोस्:

      this.life = 3;
      this.points = 0;
      

   2. भेरिएबलहरू स्क्रिनमा देखाउनुहोस्। यी मानहरू स्क्रिनमा देखाउनुहोस्:

      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);
      }
      
      

   3. गेम लूपमा विधिहरू थप्नुहोस्। यी फङ्सनहरू updateGameObjects() अन्तर्गत window.onload फङ्सनमा थप्नुहोस्:

      drawPoints();
      drawLife();
      

6. खेलका नियमहरू कार्यान्वयन गर्नुहोस्। निम्न खेलका नियमहरू कार्यान्वयन गर्नुहोस्:

   1. प्रत्येक नायक र शत्रु ठक्करको लागि, एक जीवन घटाउनुहोस्।

      नायक क्लासलाई यो घटावट गर्न विस्तार गर्नुहोस्:

      decrementLife() {
        this.life--;
        if (this.life === 0) {
          this.dead = true;
        }
      }
      

   2. प्रत्येक लेजरले शत्रुलाई हान्दा, खेल स्कोरमा १०० अंक थप्नुहोस्।

      नायक क्लासलाई यो वृद्धि गर्न विस्तार गर्नुहोस्:

        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();
      });
      

✅ थोरै अनुसन्धान गर्नुहोस् र अन्य खेलहरू पत्ता लगाउनुहोस् जुन JavaScript/Canvas प्रयोग गरेर बनाइएका छन्। तिनीहरूको सामान्य विशेषताहरू के हुन्?

यस कामको अन्त्यमा, तपाईंले तलको दायाँतिर साना 'जीवन' जहाजहरू, तलको बायाँतिर अंकहरू देख्नुहुनेछ, र तपाईंले शत्रुहरूसँग ठक्कर खाँदा जीवन घटेको र शत्रुहरूलाई गोली हान्दा अंक बढेको देख्नुहुनेछ। राम्रो काम! तपाईंको खेल लगभग पूरा भएको छ।

---

GitHub Copilot Agent Challenge 🚀

Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:

विवरण: स्पेस गेमको स्कोरिङ प्रणालीलाई उच्च स्कोर सुविधा, स्थायी भण्डारण र बोनस स्कोरिङ मेकानिक्स कार्यान्वयन गरेर सुधार गर्नुहोस्।

प्रम्ट: खेलाडीको उत्कृष्ट स्कोरलाई localStorage मा बचत गर्ने उच्च स्कोर प्रणाली बनाउनुहोस्। लगातार शत्रुहरूलाई हराउँदा बोनस अंकहरू थप्नुहोस् (कम्बो प्रणाली) र विभिन्न शत्रु प्रकारहरूको लागि विभिन्न अंक मानहरू कार्यान्वयन गर्नुहोस्। खेलाडीले नयाँ उच्च स्कोर प्राप्त गर्दा दृश्य संकेतक समावेश गर्नुहोस् र खेल स्क्रिनमा हालको उच्च स्कोर देखाउनुहोस्।

🚀 चुनौती

तपाईंको कोड लगभग पूरा भएको छ। तपाईं आफ्नो अर्को चरणहरू कल्पना गर्न सक्नुहुन्छ?

पोस्ट-लेक्चर क्विज

पोस्ट-लेक्चर क्विज

समीक्षा र आत्म अध्ययन

खेल स्कोर र जीवनहरू बढाउने र घटाउने केही तरिकाहरूको अनुसन्धान गर्नुहोस्। PlayFab जस्ता केही रोचक गेम इन्जिनहरू छन्। यी मध्ये कुनै एक प्रयोग गर्दा तपाईंको खेललाई कसरी सुधार गर्न सकिन्छ?

असाइनमेन्ट

स्कोरिङ गेम बनाउनुहोस्

---

अस्वीकरण:
यो दस्तावेज़ AI अनुवाद सेवा Co-op Translator प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।