13 KiB

Raw Permalink Blame History

स्पेस गेम बनाएं भाग 5: स्कोरिंग और जीवन

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

इस पाठ में, आप सीखेंगे कि गेम में स्कोरिंग कैसे जोड़ें और जीवन की गणना कैसे करें।

स्क्रीन पर टेक्स्ट प्रदर्शित करें

गेम स्कोर को स्क्रीन पर प्रदर्शित करने के लिए, आपको यह जानना होगा कि स्क्रीन पर टेक्स्ट कैसे रखा जाए। इसका उत्तर है fillText() मेथड का उपयोग करना, जो कैनवास ऑब्जेक्ट पर उपलब्ध है। आप अन्य पहलुओं को भी नियंत्रित कर सकते हैं जैसे कि कौन सा फॉन्ट उपयोग करना है, टेक्स्ट का रंग और यहां तक कि उसका संरेखण (बाएं, दाएं, केंद्र)। नीचे दिया गया कोड स्क्रीन पर टेक्स्ट प्रदर्शित करता है।

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

✅ कैसे कैनवास पर टेक्स्ट जोड़ें के बारे में अधिक पढ़ें, और इसे और आकर्षक बनाने के लिए स्वतंत्र महसूस करें!

जीवन, एक गेम अवधारणा के रूप में

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

क्या बनाना है

अपने गेम में निम्नलिखित जोड़ें:

गेम स्कोर: हर दुश्मन जहाज को नष्ट करने पर, हीरो को कुछ अंक दिए जाने चाहिए। हम सुझाव देते हैं कि प्रति जहाज 100 अंक दिए जाएं। गेम स्कोर को नीचे बाईं ओर दिखाया जाना चाहिए।
जीवन: आपके जहाज के पास तीन जीवन हैं। हर बार जब कोई दुश्मन जहाज आपसे टकराता है, तो आप एक जीवन खो देते हैं। जीवन स्कोर को नीचे दाईं ओर प्रदर्शित किया जाना चाहिए और इसे निम्न ग्राफिक से बनाया जाना चाहिए ।

अनुशंसित कदम

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 पते पर शुरू करेगा। ब्राउज़र खोलें और उस पते को दर्ज करें। अभी, यह हीरो और सभी दुश्मनों को रेंडर करेगा, और जब आप अपने बाएं और दाएं तीर दबाएंगे, तो हीरो हिल सकता है और दुश्मनों को शूट कर सकता है।

कोड जोड़ें

आवश्यक एसेट्स कॉपी करें। solution/assets/ फोल्डर से your-work फोल्डर में आवश्यक एसेट्स कॉपी करें; इसमें life.png एसेट जोड़ें। window.onload फंक्शन में lifeImg जोड़ें:
```
lifeImg = await loadTexture("assets/life.png");
```

एसेट्स की सूची में lifeImg जोड़ें:

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

वेरिएबल्स जोड़ें। अपने कुल स्कोर (0) और बचे हुए जीवन (3) का प्रतिनिधित्व करने वाले कोड को जोड़ें, और इन स्कोर को स्क्रीन पर प्रदर्शित करें।
updateGameObjects() फंक्शन को विस्तारित करें। दुश्मन के टकराव को संभालने के लिए updateGameObjects() फंक्शन को विस्तारित करें:
```
enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })
```
जीवन और अंक जोड़ें।
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. गेम लूप में मेथड्स जोड़ें। सुनिश्चित करें कि आप इन फंक्शन्स को window.onload फंक्शन में updateGameObjects() के तहत जोड़ें:
```
drawPoints();
drawLife();
```
गेम नियम लागू करें। निम्नलिखित गेम नियम लागू करें:
1. हर हीरो और दुश्मन टकराव के लिए, एक जीवन घटाएं।
  
  Hero क्लास को इस घटाव को संभालने के लिए विस्तारित करें:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. हर लेजर जो दुश्मन को हिट करता है, गेम स्कोर में 100 अंक जोड़ें।
  
  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 का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।

13 KiB Raw Permalink Blame History