13 KiB

Raw Permalink Blame History Unescape Escape

स्पेस गेम तयार करा भाग ५: स्कोअरिंग आणि लाइफ्स

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

या धड्यात, तुम्ही गेममध्ये स्कोअर कसे जोडायचे आणि लाइफ्स कसे मोजायचे हे शिकाल.

स्क्रीनवर मजकूर कसा दाखवायचा

गेम स्कोअर स्क्रीनवर दाखवण्यासाठी, तुम्हाला मजकूर स्क्रीनवर कसा ठेवायचा हे माहित असणे आवश्यक आहे. यासाठी 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://localhost:5000 या पत्त्यावर HTTP सर्व्हर सुरू करेल. ब्राउझर उघडा आणि हा पत्ता टाका. सध्या, तुम्हाला हिरो आणि सर्व शत्रू दिसतील, आणि जेव्हा तुम्ही डावे आणि उजवे बाण दाबाल, तेव्हा हिरो हलतो आणि शत्रूंवर गोळीबार करू शकतो.

कोड जोडा

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

lifeImg अॅसेट्सच्या यादीत जोडा:

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

व्हेरिएबल्स जोडा. तुमचा एकूण स्कोअर (०) आणि उरलेल्या लाइफ्स (३) यांचे प्रतिनिधित्व करणारा कोड जोडा आणि हे स्कोअर स्क्रीनवर दाखवा.

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

13 KiB Raw Permalink Blame History Unescape Escape