Web-Dev-For-Beginners/translations/mr/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://localhost:5000 या पत्त्यावर HTTP सर्व्हर सुरू होईल. ब्राउझर उघडा आणि तो पत्ता टाइप करा, सध्या तुम्हाला हिरो आणि सर्व शत्रू दिसतील, आणि जेव्हा तुम्ही तुमचे डावे आणि उजवे बाण दाबता, तेव्हा हिरो हलतो आणि शत्रूंना शूट करू शकतो.

कोड जोडा

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. life आणि points जोडा.

   1. व्हेरिएबल्स इनिशियलाइझ करा. Hero क्लासमध्ये this.cooldown = 0 च्या खाली life आणि points सेट करा:

      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. प्रत्येक हिरो आणि शत्रूच्या टक्करसाठी, एक जीवन कमी करा.

      Hero क्लास विस्तृत करा आणि हे कमी करणे लागू करा:

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

✅ जरा संशोधन करा आणि शोधा की जावास्क्रिप्ट/कॅनव्हास वापरून तयार केलेले इतर गेम्स कोणते आहेत. त्यांचे सामान्य वैशिष्ट्ये काय आहेत?

या कामाच्या शेवटी, तुम्हाला खाली उजव्या बाजूला छोटे 'life' जहाज, खाली डाव्या बाजूला गुण दिसतील, आणि तुम्ही शत्रूंशी टक्कर घेतल्यावर तुमचे जीवन कमी होईल आणि शत्रूंना शूट केल्यावर तुमचे गुण वाढतील. खूप छान! तुमचा गेम जवळजवळ पूर्ण झाला आहे.

---

GitHub Copilot Agent Challenge 🚀

Agent मोड वापरून खालील आव्हान पूर्ण करा:

वर्णन: स्पेस गेमच्या स्कोअरिंग सिस्टमला सुधारित करा आणि त्यात उच्च स्कोअर वैशिष्ट्य, स्थायी स्टोरेजसह, आणि बोनस स्कोअरिंग यांत्रिकी लागू करा.

प्रॉम्प्ट: एक उच्च स्कोअर सिस्टम तयार करा जी खेळाडूचा सर्वोत्तम स्कोअर localStorage मध्ये सेव्ह करते. सलग शत्रू मारण्यासाठी बोनस गुण जोडा (कॉम्बो सिस्टम) आणि वेगवेगळ्या शत्रू प्रकारांसाठी वेगवेगळे गुण मूल्य लागू करा. खेळाडूने नवीन उच्च स्कोअर मिळवल्यावर व्हिज्युअल इंडिकेटर समाविष्ट करा आणि गेम स्क्रीनवर चालू उच्च स्कोअर दाखवा.

🚀 आव्हान

तुमचा कोड जवळजवळ पूर्ण झाला आहे. तुम्ही तुमचे पुढील पाऊल काय असेल याची कल्पना करू शकता का?

व्याख्यानानंतरची प्रश्नमंजुषा

व्याख्यानानंतरची प्रश्नमंजुषा

पुनरावलोकन आणि स्व-अभ्यास

गेम स्कोअर आणि जीवन कसे वाढवायचे आणि कमी करायचे याचे काही मार्ग शोधा. PlayFab सारख्या काही मनोरंजक गेम इंजिन्स आहेत. यापैकी एक वापरल्याने तुमचा गेम कसा सुधारेल?

असाइनमेंट

स्कोअरिंग गेम तयार करा

---

अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.