11 KiB

Raw Blame History

एक अंतरिक्ष खेल बनाएँ भाग ५: स्कोरिंग और जीवन

लेक्टरसे पहलेकी क्विज़

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

स्क्रीन पर टेक्स्ट ड्रा करें

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

कोड जोड़े

solution/assets/ फ़ोल्डर से your-work फ़ोल्डर में आवश्यक असेट्स की प्रतिलिपि बनाएँ;आप एक life.png एसेट जोड़ देंगे। LifeImg को window.onload फ़ंक्शन में जोड़ें:
```
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. आरंभिक चर. हीरो वर्ग में 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() के तहत लोड करें:
```
drawPoints();
drawLife();
```
खेल के नियमों को लागू करें. निम्नलिखित खेल नियमों को लागू करें:
1. हर हीरो और दुश्मन की टक्कर के लिए, जीवन घटाए.
  
  इस कटौती को करने के लिए हीरो क्लास का विस्तार करें:
```
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();
});
```

✅ जावास्क्रिप्ट/कैनवस का उपयोग करके बनाए गए अन्य खेलों की खोज के लिए थोड़ा शोध करें। उनके सामान्य लक्षण क्या हैं?

इस काम के अंत तक, आपको छोटे 'जीवन' जहाजों को नीचे दाईं ओर, बिंदुओं को नीचे बाईं ओर देखना चाहिए, और जब आप दुश्मनों को गोली मारते हैं, तो आपको अपने जीवन की गिनती में कमी और दुश्मनों से टकराते हुए देखना चाहिए। बहुत बढ़िया! आपका खेल लगभग पूरा हो गया है.

🚀 चुनोती

आपका कोड लगभग पूरा हो चुका है। क्या आप अपने अगले चरणों की कल्पना कर सकते हैं?

पोस्ट-व्याख्यान प्रश्नोत्तरी

समीक्षा और स्व अध्ययन

कुछ तरीकों पर शोध करें जो आप खेल के स्कोर और जीवन को बढ़ा सकते हैं। PlayFab जैसे कुछ दिलचस्प गेम इंजन हैं। इनमें से किसी एक का उपयोग करने से आपका खेल कैसे बढ़ेगा?

असाइनमेंट

एक स्कोरिंग गेम बनाएँ

11 KiB Raw Blame History