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

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

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

   2. प्रत्येक लेसर शत्रूला लागल्यावर, गेम स्कोअरमध्ये १०० गुण वाढवा.

      Hero क्लास विस्तृत करून हे वाढवा:

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

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

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

---

🚀 आव्हान

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

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

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

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

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

असाइनमेंट

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

---

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