|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "46bcdd9a0174031655a49bb062aa279c",
|
|
|
"translation_date": "2025-10-22T17:14:11+00:00",
|
|
|
"source_file": "6-space-game/6-end-condition/README.md",
|
|
|
"language_code": "ne"
|
|
|
}
|
|
|
-->
|
|
|
# स्पेस गेम बनाउनुहोस् भाग ६: अन्त्य र पुनः सुरु
|
|
|
|
|
|
प्रत्येक उत्कृष्ट खेलमा स्पष्ट अन्त्य अवस्था र सहज पुनः सुरु गर्ने प्रणाली आवश्यक हुन्छ। तपाईंले आन्दोलन, युद्ध, र स्कोरिङसहितको प्रभावशाली स्पेस गेम बनाइसक्नुभएको छ - अब यसलाई पूर्ण महसुस गराउने अन्तिम टुक्राहरू थप्ने समय हो।
|
|
|
|
|
|
तपाईंको खेल हाल अनिश्चितकालसम्म चल्छ, जस्तै नासाले १९७७ मा प्रक्षेपण गरेका Voyager प्रोबहरू - दशकौंसम्म स्पेसमा यात्रा गरिरहेका छन्। यद्यपि यो स्पेस अन्वेषणका लागि ठीक छ, खेलहरूलाई सन्तोषजनक अनुभव सिर्जना गर्न परिभाषित अन्त्य बिन्दुहरू आवश्यक हुन्छ।
|
|
|
|
|
|
आज, हामी सही जित/हार अवस्था र पुनः सुरु गर्ने प्रणाली कार्यान्वयन गर्नेछौं। यस पाठको अन्त्यसम्ममा, तपाईंले एक परिष्कृत खेल बनाइसक्नुभएको हुनेछ जसलाई खेलाडीहरूले पूरा गर्न र पुनः खेल्न सक्नेछन्, जस्तै क्लासिक आर्केड खेलहरूले माध्यमलाई परिभाषित गरे।
|
|
|
|
|
|
## प्रि-लेक्चर क्विज
|
|
|
|
|
|
[प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/39)
|
|
|
|
|
|
## खेलको अन्त्य अवस्था बुझ्दै
|
|
|
|
|
|
तपाईंको खेल कहिले अन्त्य हुनुपर्छ? यो आधारभूत प्रश्नले प्रारम्भिक आर्केड युगदेखि खेल डिजाइनलाई आकार दिएको छ। Pac-Man तब अन्त्य हुन्छ जब तपाईं भूतहरूद्वारा समातिनुहुन्छ वा सबै डटहरू सफा गर्नुहुन्छ, जबकि Space Invaders तब अन्त्य हुन्छ जब एलियनहरू तल पुग्छन् वा तपाईंले तिनीहरूलाई सबै नष्ट गर्नुहुन्छ।
|
|
|
|
|
|
खेल सिर्जनाकर्ताको रूपमा, तपाईंले जित र हारको अवस्था परिभाषित गर्नुहुन्छ। हाम्रो स्पेस गेमका लागि, यहाँ प्रमाणित दृष्टिकोणहरू छन् जसले आकर्षक गेमप्ले सिर्जना गर्छ:
|
|
|
|
|
|
- **`N` शत्रु जहाजहरू नष्ट भएका छन्**: यदि तपाईंले खेललाई विभिन्न स्तरहरूमा विभाजन गर्नुभएको छ भने, स्तर पूरा गर्न `N` शत्रु जहाजहरू नष्ट गर्न आवश्यक हुन्छ।
|
|
|
- **तपाईंको जहाज नष्ट भएको छ**: केही खेलहरूमा तपाईंको जहाज नष्ट भएमा खेल हारिन्छ। अर्को सामान्य दृष्टिकोण भनेको जीवनको अवधारणा हो। प्रत्येक पटक तपाईंको जहाज नष्ट हुँदा एक जीवन घट्छ। सबै जीवन समाप्त भएपछि खेल हारिन्छ।
|
|
|
- **तपाईंले `N` अंक सङ्कलन गर्नुभएको छ**: अर्को सामान्य अन्त्य अवस्था भनेको अंक सङ्कलन गर्नु हो। तपाईंले कसरी अंक प्राप्त गर्नुहुन्छ भन्ने कुरा तपाईंको निर्णयमा निर्भर हुन्छ, तर शत्रु जहाज नष्ट गर्दा वा नष्ट हुँदा वस्तुहरू सङ्कलन गर्दा अंक प्रदान गर्नु सामान्य हो।
|
|
|
- **स्तर पूरा गर्नुहोस्**: यसमा `X` शत्रु जहाजहरू नष्ट गर्नु, `Y` अंक सङ्कलन गर्नु वा विशेष वस्तु सङ्कलन गर्नु जस्ता विभिन्न अवस्थाहरू समावेश हुन सक्छ।
|
|
|
|
|
|
## खेल पुनः सुरु गर्ने कार्यक्षमता कार्यान्वयन गर्दै
|
|
|
|
|
|
राम्रो खेलहरूले सहज पुनः सुरु गर्ने प्रणालीमार्फत पुनः खेल्न प्रोत्साहन दिन्छ। जब खेलाडीहरूले खेल पूरा गर्छन् (वा हार्छन्), तिनीहरू प्रायः तुरुन्तै पुनः प्रयास गर्न चाहन्छन् - चाहे आफ्नो स्कोर हराउन वा आफ्नो प्रदर्शन सुधार गर्न।
|
|
|
|
|
|
Tetris यसलाई पूर्ण रूपमा उदाहरण दिन्छ: जब तपाईंको ब्लकहरू माथि पुग्छन्, तपाईंले जटिल मेनुहरू नेभिगेट नगरी तुरुन्तै नयाँ खेल सुरु गर्न सक्नुहुन्छ। हामी यस्तै पुनः सुरु गर्ने प्रणाली निर्माण गर्नेछौं जसले खेलको अवस्था सफा रूपमा रिसेट गर्छ र खेलाडीहरूलाई छिटो पुनः खेलमा फर्काउँछ।
|
|
|
|
|
|
✅ **प्रतिबिम्ब**: तपाईंले खेलेका खेलहरूको बारेमा सोच्नुहोस्। ती खेलहरू कुन अवस्थामा अन्त्य हुन्छन्, र तपाईंलाई कसरी पुनः सुरु गर्न प्रेरित गरिन्छ? पुनः सुरु गर्ने अनुभवलाई सहज बनाउने के हो र निराशाजनक बनाउने के हो?
|
|
|
|
|
|
## तपाईंले के निर्माण गर्नुहुनेछ
|
|
|
|
|
|
तपाईंले आफ्नो परियोजनालाई पूर्ण खेल अनुभवमा रूपान्तरण गर्ने अन्तिम सुविधाहरू कार्यान्वयन गर्नुहुनेछ। यी तत्वहरूले परिष्कृत खेलहरूलाई आधारभूत प्रोटोटाइपहरूबाट अलग गर्छ।
|
|
|
|
|
|
**आज हामीले थप्ने कुरा:**
|
|
|
|
|
|
1. **जितको अवस्था**: सबै शत्रुहरूलाई नष्ट गर्नुहोस् र उचित उत्सव पाउनुहोस् (तपाईंले यसलाई कमाउनुभएको छ!)
|
|
|
2. **हारको अवस्था**: जीवन समाप्त गर्नुहोस् र हारको स्क्रिनको सामना गर्नुहोस्
|
|
|
3. **पुनः सुरु गर्ने प्रणाली**: Enter थिचेर तुरुन्तै पुनः खेलमा फर्कनुहोस् - किनकि एक खेल कहिल्यै पर्याप्त हुँदैन
|
|
|
4. **राज्य व्यवस्थापन**: प्रत्येक पटक सफा सुरुवात - कुनै बाँकी शत्रुहरू वा अघिल्लो खेलबाट अजीब गडबडीहरू छैनन्
|
|
|
|
|
|
## सुरु गर्दै
|
|
|
|
|
|
आफ्नो विकास वातावरण तयार गरौं। तपाईंले अघिल्लो पाठहरूबाट आफ्नो स्पेस गेम फाइलहरू तयार राख्नुपर्छ।
|
|
|
|
|
|
**तपाईंको परियोजना यस्तो देखिनुपर्छ:**
|
|
|
|
|
|
```bash
|
|
|
-| assets
|
|
|
-| enemyShip.png
|
|
|
-| player.png
|
|
|
-| laserRed.png
|
|
|
-| life.png
|
|
|
-| index.html
|
|
|
-| app.js
|
|
|
-| package.json
|
|
|
```
|
|
|
|
|
|
**आफ्नो विकास सर्भर सुरु गर्नुहोस्:**
|
|
|
|
|
|
```bash
|
|
|
cd your-work
|
|
|
npm start
|
|
|
```
|
|
|
|
|
|
**यो आदेश:**
|
|
|
- `http://localhost:5000` मा स्थानीय सर्भर चलाउँछ
|
|
|
- तपाईंको फाइलहरू ठीकसँग सेवा दिन्छ
|
|
|
- परिवर्तन गर्दा स्वतः ताजा हुन्छ
|
|
|
|
|
|
`http://localhost:5000` आफ्नो ब्राउजरमा खोल्नुहोस् र तपाईंको खेल चलिरहेको छ भनी पुष्टि गर्नुहोस्। तपाईंले चलाउन, गोली हान्न, र शत्रुहरूसँग अन्तरक्रिया गर्न सक्षम हुनुहुनेछ। एकपटक पुष्टि भएपछि, हामी कार्यान्वयनको प्रक्रियामा अगाडि बढ्न सक्छौं।
|
|
|
|
|
|
> 💡 **प्रो टिप**: Visual Studio Code मा चेतावनीहरूबाट बच्नको लागि, `gameLoopId` लाई आफ्नो फाइलको माथि `let gameLoopId;` को रूपमा घोषणा गर्नुहोस्, यसको सट्टा `window.onload` फङ्सन भित्र घोषणा गर्ने। यसले आधुनिक JavaScript भेरिएबल घोषणा गर्ने उत्तम अभ्यासलाई पछ्याउँछ।
|
|
|
|
|
|
## कार्यान्वयन चरणहरू
|
|
|
|
|
|
### चरण १: अन्त्य अवस्था ट्र्याक गर्ने फङ्सनहरू सिर्जना गर्नुहोस्
|
|
|
|
|
|
हामीलाई खेल कहिले अन्त्य हुनुपर्छ भनेर अनुगमन गर्ने फङ्सनहरू आवश्यक छ। जस्तै अन्तर्राष्ट्रिय स्पेस स्टेशनमा सेन्सरहरूले महत्त्वपूर्ण प्रणालीहरू निरन्तर अनुगमन गर्छन्, यी फङ्सनहरूले खेलको अवस्था निरन्तर जाँच गर्नेछन्।
|
|
|
|
|
|
```javascript
|
|
|
function isHeroDead() {
|
|
|
return hero.life <= 0;
|
|
|
}
|
|
|
|
|
|
function isEnemiesDead() {
|
|
|
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
|
|
|
return enemies.length === 0;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**भित्र के भइरहेको छ:**
|
|
|
- **जाँच्छ** कि हाम्रो हिरोको जीवन समाप्त भएको छ कि छैन (दु:खद!)
|
|
|
- **गणना गर्छ** कि कति शत्रुहरू अझै जीवित छन्
|
|
|
- **`true` फर्काउँछ** जब युद्धक्षेत्र शत्रुहरूबाट खाली हुन्छ
|
|
|
- **साधारण true/false तर्क प्रयोग गर्छ** ताकि सबै कुरा सरल रहोस्
|
|
|
- **फिल्टर गर्छ** सबै खेल वस्तुहरूबाट जीवितहरू पत्ता लगाउन
|
|
|
|
|
|
### चरण २: अन्त्य अवस्थाका लागि इभेन्ट ह्यान्डलरहरू अपडेट गर्नुहोस्
|
|
|
|
|
|
अब हामी यी अवस्था जाँचलाई खेलको इभेन्ट प्रणालीसँग जोड्नेछौं। प्रत्येक पटक टक्कर हुँदा, खेलले मूल्याङ्कन गर्नेछ कि यसले अन्त्य अवस्था ट्रिगर गर्छ कि गर्दैन। यसले महत्त्वपूर्ण खेल घटनाहरूका लागि तत्काल प्रतिक्रिया सिर्जना गर्छ।
|
|
|
|
|
|
```javascript
|
|
|
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
|
|
first.dead = true;
|
|
|
second.dead = true;
|
|
|
hero.incrementPoints();
|
|
|
|
|
|
if (isEnemiesDead()) {
|
|
|
eventEmitter.emit(Messages.GAME_END_WIN);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
|
|
enemy.dead = true;
|
|
|
hero.decrementLife();
|
|
|
if (isHeroDead()) {
|
|
|
eventEmitter.emit(Messages.GAME_END_LOSS);
|
|
|
return; // loss before victory
|
|
|
}
|
|
|
if (isEnemiesDead()) {
|
|
|
eventEmitter.emit(Messages.GAME_END_WIN);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
eventEmitter.on(Messages.GAME_END_WIN, () => {
|
|
|
endGame(true);
|
|
|
});
|
|
|
|
|
|
eventEmitter.on(Messages.GAME_END_LOSS, () => {
|
|
|
endGame(false);
|
|
|
});
|
|
|
```
|
|
|
|
|
|
**यहाँ के भइरहेको छ:**
|
|
|
- **लेजरले शत्रुलाई हान्छ**: दुबै गायब हुन्छन्, तपाईंले अंक प्राप्त गर्नुहुन्छ, र हामी जाँच गर्छौं कि तपाईंले जित्नुभएको छ कि छैन
|
|
|
- **शत्रुले तपाईंलाई हान्छ**: तपाईंले जीवन गुमाउनुहुन्छ, र हामी जाँच गर्छौं कि तपाईं अझै जीवित हुनुहुन्छ कि छैन
|
|
|
- **स्मार्ट क्रम**: हामी पहिले हारको जाँच गर्छौं (कसैले पनि एकै समयमा जित्न र हार्न चाहँदैन!)
|
|
|
- **तत्काल प्रतिक्रिया**: केही महत्त्वपूर्ण घटना भएलगत्तै खेललाई थाहा हुन्छ
|
|
|
|
|
|
### चरण ३: नयाँ सन्देश स्थिरांकहरू थप्नुहोस्
|
|
|
|
|
|
तपाईंले आफ्नो `Messages` स्थिर वस्तुमा नयाँ सन्देश प्रकारहरू थप्न आवश्यक छ। यी स्थिरांकहरूले स्थिरता कायम राख्न र तपाईंको इभेन्ट प्रणालीमा टाइपोहरू रोक्न मद्दत गर्छ।
|
|
|
|
|
|
```javascript
|
|
|
GAME_END_LOSS: "GAME_END_LOSS",
|
|
|
GAME_END_WIN: "GAME_END_WIN",
|
|
|
```
|
|
|
|
|
|
**माथिकोमा, हामीले:**
|
|
|
- **खेल अन्त्य घटनाहरूका लागि स्थिरांकहरू थपेका छौं** ताकि स्थिरता कायम रहोस्
|
|
|
- **वर्णनात्मक नामहरू प्रयोग गरेका छौं** जसले स्पष्ट रूपमा घटनाको उद्देश्य संकेत गर्छ
|
|
|
- **सन्देश प्रकारहरूको विद्यमान नामकरण परम्परा पछ्याएका छौं**
|
|
|
|
|
|
### चरण ४: पुनः सुरु गर्ने नियन्त्रणहरू कार्यान्वयन गर्नुहोस्
|
|
|
|
|
|
अब तपाईंले खेलाडीहरूलाई खेल पुनः सुरु गर्न अनुमति दिने किबोर्ड नियन्त्रणहरू थप्नुहुनेछ। Enter कुञ्जी प्राकृतिक विकल्प हो किनभने यो सामान्यत: कार्यहरू पुष्टि गर्ने र नयाँ खेल सुरु गर्नेसँग सम्बन्धित छ।
|
|
|
|
|
|
**तपाईंको विद्यमान keydown इभेन्ट लिस्नरमा Enter कुञ्जी पत्ता लगाउने कुरा थप्नुहोस्:**
|
|
|
|
|
|
```javascript
|
|
|
else if(evt.key === "Enter") {
|
|
|
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**नयाँ सन्देश स्थिरांक थप्नुहोस्:**
|
|
|
|
|
|
```javascript
|
|
|
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
|
|
|
```
|
|
|
|
|
|
**तपाईंलाई थाहा हुनुपर्ने कुरा:**
|
|
|
- **तपाईंको विद्यमान किबोर्ड इभेन्ट ह्यान्डलिङ प्रणालीलाई विस्तार गर्छ**
|
|
|
- **Enter कुञ्जीलाई पुनः सुरु ट्रिगरको रूपमा प्रयोग गर्छ ताकि प्रयोगकर्ता अनुभव सहज होस्**
|
|
|
- **अनुकूलन इभेन्ट उत्सर्जन गर्छ** जसलाई तपाईंको खेलका अन्य भागहरूले सुन्न सक्छ
|
|
|
- **तपाईंको अन्य किबोर्ड नियन्त्रणहरूको समान ढाँचा कायम राख्छ**
|
|
|
|
|
|
### चरण ५: सन्देश प्रदर्शन प्रणाली सिर्जना गर्नुहोस्
|
|
|
|
|
|
तपाईंको खेलले खेलाडीहरूलाई परिणाम स्पष्ट रूपमा सञ्चार गर्न आवश्यक छ। हामी एउटा सन्देश प्रणाली सिर्जना गर्नेछौं जसले जित र हारको अवस्था रंग-कोड गरिएको पाठ प्रयोग गरेर देखाउँछ, जस्तै प्रारम्भिक कम्प्युटर प्रणालीहरूको टर्मिनल इन्टरफेस जहाँ हरियोले सफलता संकेत गर्थ्यो र रातोले त्रुटिहरू संकेत गर्थ्यो।
|
|
|
|
|
|
**`displayMessage()` फङ्सन सिर्जना गर्नुहोस्:**
|
|
|
|
|
|
```javascript
|
|
|
function displayMessage(message, color = "red") {
|
|
|
ctx.font = "30px Arial";
|
|
|
ctx.fillStyle = color;
|
|
|
ctx.textAlign = "center";
|
|
|
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**चरणबद्ध रूपमा, यहाँ के भइरहेको छ:**
|
|
|
- **फन्ट साइज र परिवार सेट गर्छ** ताकि पाठ स्पष्ट र पढ्न योग्य होस्
|
|
|
- **रंग प्यारामिटर लागू गर्छ** जहाँ "रातो" चेतावनीको लागि डिफल्ट हो
|
|
|
- **क्यानभासमा पाठलाई क्षैतिज र ठाडो रूपमा केन्द्रित गर्छ**
|
|
|
- **आधुनिक JavaScript डिफल्ट प्यारामिटर प्रयोग गर्छ** ताकि रंग विकल्प लचिलो होस्
|
|
|
- **क्यानभास 2D सन्दर्भ प्रयोग गर्छ** ताकि पाठ प्रत्यक्ष रूपमा रेंडर होस्
|
|
|
|
|
|
**`endGame()` फङ्सन सिर्जना गर्नुहोस्:**
|
|
|
|
|
|
```javascript
|
|
|
function endGame(win) {
|
|
|
clearInterval(gameLoopId);
|
|
|
|
|
|
// Set a delay to ensure any pending renders complete
|
|
|
setTimeout(() => {
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
ctx.fillStyle = "black";
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
if (win) {
|
|
|
displayMessage(
|
|
|
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
|
|
|
"green"
|
|
|
);
|
|
|
} else {
|
|
|
displayMessage(
|
|
|
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
|
|
|
);
|
|
|
}
|
|
|
}, 200)
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**यो फङ्सनले के गर्छ:**
|
|
|
- **सबै कुरा स्थिर बनाउँछ** - अब कुनै जहाज वा लेजरहरू चल्दैनन्
|
|
|
- **सानो ब्रेक लिन्छ (२००ms)** ताकि अन्तिम फ्रेम पूरा गर्न सकियोस्
|
|
|
- **स्क्रिन सफा गर्छ र नाटकीय प्रभावका लागि कालो रंग लगाउँछ**
|
|
|
- **विजेता र हार्नेहरूका लागि फरक सन्देश देखाउँछ**
|
|
|
- **रंग कोड गर्छ** - राम्रोको लागि हरियो, नराम्रोको लागि रातो
|
|
|
- **खेलाडीहरूलाई स्पष्ट रूपमा बताउँछ कि कसरी पुनः खेलमा फर्कन सकिन्छ
|
|
|
|
|
|
### चरण ६: खेल रिसेट कार्यक्षमता कार्यान्वयन गर्नुहोस्
|
|
|
|
|
|
रिसेट प्रणालीले हालको खेलको अवस्था पूर्ण रूपमा सफा गर्न र नयाँ खेल सत्र सुरु गर्न आवश्यक छ। यसले खेलाडीहरूलाई अघिल्लो खेलबाट कुनै बाँकी डाटाबिना सफा सुरुवात सुनिश्चित गर्छ।
|
|
|
|
|
|
**`resetGame()` फङ्सन सिर्जना गर्नुहोस्:**
|
|
|
|
|
|
```javascript
|
|
|
function resetGame() {
|
|
|
if (gameLoopId) {
|
|
|
clearInterval(gameLoopId);
|
|
|
eventEmitter.clear();
|
|
|
initGame();
|
|
|
gameLoopId = setInterval(() => {
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
ctx.fillStyle = "black";
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
drawPoints();
|
|
|
drawLife();
|
|
|
updateGameObjects();
|
|
|
drawGameObjects(ctx);
|
|
|
}, 100);
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**प्रत्येक भाग बुझौं:**
|
|
|
- **जाँच्छ** कि खेल लूप हाल चलिरहेको छ कि छैन रिसेट गर्नु अघि
|
|
|
- **विद्यमान खेल लूप सफा गर्छ** ताकि सबै हालको खेल गतिविधि रोकियोस्
|
|
|
- **सबै इभेन्ट लिस्नरहरू हटाउँछ** ताकि मेमोरी लीक रोकियोस्
|
|
|
- **ताजा वस्तुहरू र भेरिएबलहरूसँग खेलको अवस्था पुनः आरम्भ गर्छ**
|
|
|
- **सबै आवश्यक खेल फङ्सनहरूसँग नयाँ खेल लूप सुरु गर्छ**
|
|
|
- **समान १००ms अन्तराल कायम राख्छ** ताकि खेल प्रदर्शन स्थिर रहोस्
|
|
|
|
|
|
**Enter कुञ्जी इभेन्ट ह्यान्डलरलाई तपाईंको `initGame()` फङ्सनमा थप्नुहोस्:**
|
|
|
|
|
|
```javascript
|
|
|
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
|
|
|
resetGame();
|
|
|
});
|
|
|
```
|
|
|
|
|
|
**तपाईंको EventEmitter क्लासमा `clear()` मेथड थप्नुहोस्:**
|
|
|
|
|
|
```javascript
|
|
|
clear() {
|
|
|
this.listeners = {};
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**महत्त्वपूर्ण बिन्दुहरू सम्झनुहोस्:**
|
|
|
- **Enter कुञ्जी प्रेसलाई खेल रिसेट कार्यक्षमतासँग जोड्छ**
|
|
|
- **खेल आरम्भ गर्दा यो इभेन्ट लिस्नर दर्ता गर्छ**
|
|
|
- **खेलहरू बीच इभेन्ट ह्यान्डलरहरू सफा गरेर मेमोरी लीक रोक्छ**
|
|
|
- **लिस्नर वस्तुलाई ताजा आरम्भका लागि खाली अवस्थामा रिसेट गर्छ**
|
|
|
|
|
|
## बधाई छ! 🎉
|
|
|
|
|
|
👽 💥 🚀 तपाईंले जमिनदेखि पूर्ण खेल सफलतापूर्वक निर्माण गर्नुभएको छ। जस्तै १९७० को दशकमा पहिलो भिडियो खेल बनाउने प्रोग्रामरहरूले कोडका लाइनहरूलाई अन्तरक्रियात्मक अनुभवमा रूपान्तरण गरे, तपाईंले उचित खेल यान्त्रिकी र प्रयोगकर्ता प्रतिक्रिया सहित खेल निर्माण गर्नुभएको छ। 🚀 💥 👽
|
|
|
|
|
|
**तपाईंले हासिल गर्नुभएको छ:**
|
|
|
- **जित र हारको अवस्था कार्यान्वयन गर्नुभएको छ** प्रयोगकर्ता प्रतिक्रियासहित
|
|
|
- **सहज पुनः सुरु गर्ने प्रणाली सिर्जना गर्नुभएको छ** निरन्तर गेमप्लेका लागि
|
|
|
- **खेल अवस्थाहरूका लागि स्पष्ट दृश्य सञ्चार डिजाइन गर्नुभएको छ**
|
|
|
- **जटिल खेल अवस्था संक्रमण र सफाइ व्यवस्थापन गर्नुभएको छ**
|
|
|
- **सबै घटकहरूलाई एक सुसंगत, खेल्न योग्य खेलमा संयोजन गर्नुभएको छ**
|
|
|
|
|
|
## GitHub Copilot Agent Challenge 🚀
|
|
|
|
|
|
निम्न चुनौती पूरा गर्न Agent मोड प्रयोग गर्नुहोस्:
|
|
|
|
|
|
**विवरण:** स्तर प्रगति प्रणाली कार्यान्वयन गरेर स्पेस गेमलाई सुधार गर्नुहोस् जसमा बढ्दो कठिनाइ र बोनस सुविधाहरू समावेश छन्।
|
|
|
|
|
|
**प्रेरणा:** बहु-स्तरीय स्पेस गेम प्रणाली सिर्जना गर्नुहोस् जहाँ प्रत्येक स्तरमा बढी शत्रु जहाजहरू उच्च गति र स्वास्थ्यका साथ हुन्छन्। प्रत्येक स्तरसँग बढ्ने स्कोरिङ गुणक थप्नुहोस्, र पावर-अपहरू (जस्तै, द्रुत फायर वा शील्ड) कार्यान्वयन गर्नुहोस् जुन शत्रुहरू नष्ट हुँदा अनियमित रूपमा देखा पर्छ। स्तर पूरा गर्ने बोनस समावेश गर्नुहोस् र विद्यमान स्कोर र जीवनसँगै स्क्रिनमा हालको स्तर देखाउनुहोस्।
|
|
|
|
|
|
[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
|
|
|
|
|
|
## 🚀 वैकल्पिक सुधार चुनौती
|
|
|
|
|
|
**तपाईंको खेलमा अडियो थप्नुहोस्**: आफ्नो गेमप्ले अनुभवलाई सुधार गर्न ध्वनि प्रभाव कार्यान्वयन गर्नुहोस्! निम्नका लागि अडियो थप्ने विचार गर्नुहोस्:
|
|
|
|
|
|
- **लेजर शटहरू** जब खेलाडीले फायर गर्छ
|
|
|
- **शत्रु विनाश** जब जहाजहरू हानिन्छन्
|
|
|
- **हिरो क्षति** जब खेलाडीले हान्छ
|
|
|
- **जितको संगीत** जब खेल जितिन्छ
|
|
|
- **हारको ध्वनि** जब खेल हारिन्छ
|
|
|
|
|
|
**अडियो कार्यान्वयन उदाहरण:**
|
|
|
|
|
|
```javascript
|
|
|
// Create audio objects
|
|
|
const laserSound = new Audio('assets/laser.wav');
|
|
|
const explosionSound = new Audio('assets/explosion.wav');
|
|
|
|
|
|
// Play sounds during game events
|
|
|
function playLaserSound() {
|
|
|
laserSound.currentTime = 0; // Reset to beginning
|
|
|
laserSound.play();
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**तपाईंलाई थाहा हुनुपर्ने कुरा:**
|
|
|
- **विभिन्न ध्वनि प्रभावहरूको लागि अडियो वस्तुहरू सिर्जना गर्छ**
|
|
|
- **`currentTime` रिसेट गर्छ** ताकि द्रुत फायर ध्वनि प्रभावहरू सम्भव होस्
|
|
|
- **ब्राउजरको स्वतःप्ले नीतिहरू ह्यान्डल गर्छ** प्रयोगकर्ता अन्तरक्रियाबाट ध्वनि ट्रिगर गरेर
|
|
|
- **अडियो भोल्युम र टाइमिङ व्यवस्थापन गर्छ** ताकि खेल अनुभव राम्रो होस्
|
|
|
|
|
|
> 💡 **शिक्षण स्रोत**: [अडियो स्यान्डबक्स](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) अन्वेषण गर्नुहोस् ताकि JavaScript खेलहरूमा अडियो कार्यान्वयनको बारेमा थप जान्न सकियोस्।
|
|
|
|
|
|
## पोस्ट-लेक्चर क्विज
|
|
|
|
|
|
[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/40)
|
|
|
|
|
|
## समीक्षा र आत्म अध्ययन
|
|
|
|
|
|
तपाईंको असाइनमेन्ट भनेको नयाँ नमूना खेल सिर्जना गर्नु हो, त्यसैले बाहिरका केही रोचक खेलहरू अन्वेषण गर्नुहोस् ताकि तपाईंले कुन प्रकारको खेल निर्माण गर्न सक्नुहुन्छ भन्ने थाहा पाउन सकियोस्।
|
|
|
|
|
|
## असाइनमेन्ट
|
|
|
|
|
|
[नमूना खेल निर्माण गर्नुहोस्](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**अस्वीकरण**:
|
|
|
यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं। |