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

✅ क्यानभासमा टेक्स्ट थप्ने बारे थप जान्नुहोस् - तपाईं फन्ट र स्टाइलिङमा कति रचनात्मक हुन सक्नुहुन्छ भनेर आश्चर्यचकित हुन सक्नुहुन्छ!

जीवनहरू - केवल संख्या भन्दा बढी

खेल डिजाइनमा, "जीवन" खेलाडीको गल्तीको मार्जिनलाई प्रतिनिधित्व गर्दछ। यो अवधारणा पिनबल मेसिनहरूबाट सुरु भएको हो, जहाँ तपाईंले खेल्नका लागि धेरै बलहरू पाउनुहुन्थ्यो। प्रारम्भिक भिडियो गेमहरू जस्तै एस्टेरोइड्समा, जीवनहरूले खेलाडीहरूलाई जोखिम लिन र गल्तीबाट सिक्न अनुमति दिन्थ्यो।

दृश्य प्रतिनिधित्व धेरै महत्त्वपूर्ण हुन्छ - "Lives: 3" मात्र देखाउने सट्टा जहाज आइकनहरू देखाउँदा तत्काल दृश्य पहिचान सिर्जना हुन्छ, जस्तै प्रारम्भिक आर्केड क्याबिनेटहरूले भाषा बाधाहरू पार गर्न आइकनोग्राफी प्रयोग गर्थे।

तपाईंको खेलको पुरस्कार प्रणाली निर्माण गर्दै

अब हामी कोर फिडब्याक प्रणालीहरू कार्यान्वयन गर्नेछौं जसले खेलाडीहरूलाई संलग्न राख्छ:

स्कोरिङ प्रणाली: प्रत्येक नष्ट गरिएको दुश्मन जहाजले १०० पोइन्ट प्रदान गर्दछ (राउन्ड नम्बरहरू खेलाडीहरूले मानसिक रूपमा गणना गर्न सजिलो हुन्छ)। स्कोर तलको बायाँ कुनामा देखाइन्छ।
जीवन काउन्टर: तपाईंको हिरो तीन जीवनबाट सुरु हुन्छ - प्रारम्भिक आर्केड गेमहरूले चुनौती र खेल्न योग्यताको सन्तुलन गर्न स्थापना गरेको मानक। प्रत्येक दुश्मनसँगको टक्करले एक जीवन गुमाउँछ। बाँकी जीवनहरू तलको दायाँमा जहाज आइकनहरू प्रयोग गरेर देखाइन्छ ।

निर्माण सुरु गरौं!

पहिले, तपाईंको कार्यक्षेत्र सेटअप गर्नुहोस्। 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 मा स्थानीय सर्भर चलाउँछ। तपाईंको ब्राउजरमा यो ठेगाना खोल्नुहोस् र तपाईंको खेल हेर्नुहोस्। एरो कीहरू प्रयोग गरेर कन्ट्रोलहरू परीक्षण गर्नुहोस् र सबै कुरा काम गरिरहेको छ भनी प्रमाणित गर्न दुश्मनहरूलाई शूट गर्न प्रयास गर्नुहोस्।

कोड लेख्ने समय!

तपाईंलाई आवश्यक दृश्य सम्पत्ति लिउनुहोस्। solution/assets/ फोल्डरबाट life.png सम्पत्ति तपाईंको your-work फोल्डरमा प्रतिलिपि गर्नुहोस्। त्यसपछि lifeImg लाई तपाईंको window.onload फङ्सनमा थप्नुहोस्:
```
lifeImg = await loadTexture("assets/life.png");
```
lifeImg लाई तपाईंको सम्पत्ति सूचीमा थप्न नबिर्सनुहोस्:
```
let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();
```
तपाईंको खेल भेरिएबलहरू सेट गर्नुहोस्। तपाईंको कुल स्कोर (० बाट सुरु गर्दै) र बाँकी जीवनहरू (३ बाट सुरु गर्दै) ट्र्याक गर्न केही कोड थप्नुहोस्। हामी यी स्क्रिनमा देखाउनेछौं ताकि खेलाडीहरूले सधैं आफ्नो स्थिति थाहा पाउन सकून्।
टक्कर पत्ता लगाउने कार्यान्वयन गर्नुहोस्। तपाईंको 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();
});
```

✅ जाभास्क्रिप्ट र क्यानभाससँग बनाइएका अन्य खेलहरूको बारेमा उत्सुक हुनुहुन्छ? केही अन्वेषण गर्नुहोस् - तपाईंलाई के सम्भव छ भनेर आश्चर्य लाग्न सक्छ!

यी सुविधाहरू कार्यान्वयन गरेपछि, तपाईंको खेल परीक्षण गर्नुहोस् र पूर्ण फिडब्याक प्रणालीलाई क्रियाशील अवस्थामा हेर्नुहोस्। तपाईंले तलको दायाँमा जीवन आइकनहरू, तलको बायाँमा स्कोर देख्नुहुनेछ, र टक्करहरूले जीवन घटाउँदा सफल शूटहरूले तपाईंको स्कोर बढाएको हेर्नुहोस्।

तपाईंको खेलमा अब प्रारम्भिक आर्केड गेमहरूलाई यति आकर्षक बनाउने आवश्यक मेकानिक्सहरू छन् - स्पष्ट लक्ष्यहरू, तत्काल फिडब्याक, र खेलाडीको कार्यहरूको लागि अर्थपूर्ण परिणामहरू।

GitHub Copilot Agent Challenge 🚀

Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:

विवरण: स्पेस गेमको स्कोरिङ प्रणालीलाई उच्च स्कोर सुविधा र स्थायी भण्डारण तथा बोनस स्कोरिङ मेकानिक्स कार्यान्वयन गरेर सुधार गर्नुहोस्।

प्रेरणा: खेलाडीको उत्कृष्ट स्कोरलाई localStorage मा बचत गर्ने उच्च स्कोर प्रणाली सिर्जना गर्नुहोस्। लगातार दुश्मन मार्ने (कम्बो प्रणाली) को लागि बोनस पोइन्टहरू थप्नुहोस् र विभिन्न दुश्मन प्रकारहरूको लागि विभिन्न पोइन्ट मानहरू कार्यान्वयन गर्नुहोस्। खेलाडीले नयाँ उच्च स्कोर प्राप्त गर्दा दृश्य संकेतक समावेश गर्नुहोस् र खेल स्क्रिनमा हालको उच्च स्कोर देखाउनुहोस्।

🚀 चुनौती

अब तपाईंको खेल स्कोरिङ र जीवनहरूसहित कार्यात्मक छ। खेलाडीको अनुभवलाई अझ राम्रो बनाउन के थप सुविधाहरू थप्न सकिन्छ भनेर विचार गर्नुहोस्।

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

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

थप अन्वेषण गर्न चाहनुहुन्छ? खेल स्कोरिङ र जीवन प्रणालीहरूको विभिन्न दृष्टिकोणहरू अनुसन्धान गर्नुहोस्। त्यहाँ PlayFab जस्ता आकर्षक खेल इन्जिनहरू छन् जसले स्कोरिङ, लिडरबोर्डहरू, र खेलाडीको प्रगति व्यवस्थापन गर्छ। यस्तो केही एकीकृत गर्दा तपाईंको खेललाई अर्को स्तरमा कसरी लैजान सकिन्छ?

असाइनमेन्ट

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

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

18 KiB Raw Blame History Unescape Escape