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 सर्भर 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();
```
भेरिएबलहरू थप्नुहोस्। तपाईंको कुल स्कोर (०) र बाँकी जीवनहरू (३) प्रतिनिधित्व गर्ने कोड थप्नुहोस्, यी स्कोरहरू स्क्रिनमा देखाउनुहोस्।
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();
});
```

✅ अनुसन्धान गर्नुहोस् कि अन्य खेलहरू जसले JavaScript/Canvas प्रयोग गरेर बनाइएका छन्। तिनीहरूको सामान्य विशेषताहरू के हुन्?

यस कामको अन्त्यसम्म, तपाईंले तलको दायाँ भागमा साना 'जीवन' जहाजहरू, तलको बायाँ भागमा अंकहरू देख्नुहुनेछ, र तपाईंले शत्रुहरूसँग ठक्कर खाँदा जीवन घटेको र शत्रुहरूलाई गोली हान्दा अंक बढेको देख्नुहुनेछ। राम्रो काम! तपाईंको खेल लगभग पूरा भएको छ।

🚀 चुनौती

तपाईंको कोड लगभग पूरा भएको छ। तपाईंले आफ्नो अर्को चरणहरू कल्पना गर्न सक्नुहुन्छ?

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

समीक्षा र आत्म-अध्ययन

खेल स्कोर र जीवनहरू बढाउने र घटाउने केही तरिकाहरू अनुसन्धान गर्नुहोस्। PlayFab जस्ता केही रोचक गेम इन्जिनहरू छन्। यी मध्ये कुनै एक प्रयोग गर्दा तपाईंको खेललाई कसरी सुधार गर्न सकिन्छ?

असाइनमेन्ट

स्कोरिङ गेम बनाउनुहोस्

अस्वीकरण:
यो दस्तावेज़ AI अनुवाद सेवा Co-op Translator प्रयोग गरेर अनुवाद गरिएको छ। हामी यथार्थताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।

13 KiB Raw Permalink Blame History Unescape Escape