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

life और points जोड़ें।
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();
```
गेम नियम लागू करें। निम्नलिखित गेम नियम लागू करें:
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