13 KiB

Raw 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 });
    }
  })
```
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. प्रत्येक लेजरले दुश्मनलाई हानेको लागि, खेल स्कोर १०० अंकले बढाउनुहोस्।
  
  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 Blame History Unescape Escape