<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "4e8250db84b027c9ff816b4e4c093457",
  "translation_date": "2025-08-25T22:04:08+00:00",
  "source_file": "6-space-game/5-keeping-score/README.md",
  "language_code": "mr"
}
-->
# स्पेस गेम तयार करा भाग ५: स्कोअरिंग आणि लाइफ्स

## प्री-लेक्चर क्विझ

[प्री-लेक्चर क्विझ](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) याबद्दल अधिक वाचा आणि तुमचा मजकूर अधिक आकर्षक बनवण्याचा प्रयत्न करा!

## गेममधील लाइफची संकल्पना

गेममध्ये लाइफ ही फक्त एक संख्या आहे. स्पेस गेमच्या संदर्भात, तुमच्या जहाजाला नुकसान झाल्यावर एकेक करून कमी होणाऱ्या लाइफ्सचा संच देणे सामान्य आहे. हे फक्त संख्या म्हणून न दाखवता, मिनीशिप्स किंवा हृदयांसारख्या ग्राफिकल स्वरूपात दाखवले तर अधिक चांगले वाटते.

## काय तयार करायचे

तुमच्या गेममध्ये खालील गोष्टी जोडा:

- **गेम स्कोअर**: प्रत्येक शत्रू जहाज नष्ट केल्यावर, हिरोला काही गुण मिळायला हवेत. आम्ही सुचवतो की प्रत्येक जहाजासाठी १०० गुण द्या. गेम स्कोअर तळाच्या डाव्या बाजूला दाखवले जावे.
- **लाइफ**: तुमच्या जहाजाकडे तीन लाइफ्स आहेत. प्रत्येक वेळी शत्रू जहाज तुमच्याशी धडकते तेव्हा एक लाइफ कमी होईल. लाइफ स्कोअर तळाच्या उजव्या बाजूला दाखवले जावे आणि तो खालील ग्राफिकसारखा असावा ![लाइफ इमेज](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.mr.png).

## शिफारस केलेले पायऱ्या

`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. **`लाइफ` आणि `पॉइंट्स` जोडा**. 
   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();
        });
        ```

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

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

---

## 🚀 चॅलेंज

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

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

[पोस्ट-लेक्चर क्विझ](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) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.