31 KiB

Raw Blame History

स्पेस गेम तयार करा भाग 6: शेवट आणि पुन्हा सुरू करा

प्रत्येक उत्कृष्ट गेमसाठी स्पष्ट शेवटची अट आणि गुळगुळीत पुन्हा सुरू करण्याची यंत्रणा आवश्यक असते. तुम्ही हालचाल, लढाई आणि स्कोअरिंगसह एक प्रभावी स्पेस गेम तयार केला आहे - आता ते पूर्ण वाटावे यासाठी अंतिम तुकडे जोडण्याची वेळ आली आहे.

तुमचा गेम सध्या अनिश्चित काळासाठी चालतो, जसे NASA ने 1977 मध्ये लॉन्च केलेले Voyager probes - अजूनही दशकांनंतर अंतराळात प्रवास करत आहेत. अंतराळ संशोधनासाठी ते ठीक असले तरी, समाधानकारक अनुभव निर्माण करण्यासाठी गेम्सना निश्चित शेवटाची आवश्यकता असते.

आज, आपण योग्य विजय/पराजय अटी आणि पुन्हा सुरू करण्याची प्रणाली लागू करू. या धड्याच्या शेवटी, तुमच्याकडे एक पॉलिश गेम असेल जो खेळाडू पूर्ण करू शकतील आणि पुन्हा खेळू शकतील, जसे की माध्यमाची व्याख्या करणारे क्लासिक आर्केड गेम्स.

पूर्व-व्याख्यान प्रश्नमंजुषा

गेमच्या शेवटच्या अटी समजून घेणे

तुमचा गेम कधी संपावा? हा मूलभूत प्रश्न गेम डिझाइनला आकार देत आला आहे. पॅक-मॅनमध्ये तुम्ही भूतांद्वारे पकडले गेल्यावर किंवा सर्व डॉट्स साफ केल्यावर गेम संपतो, तर स्पेस इनव्हेडर्समध्ये एलियन्स तळाशी पोहोचल्यावर किंवा तुम्ही त्यांना नष्ट केल्यावर गेम संपतो.

गेम निर्माता म्हणून, तुम्ही विजय आणि पराजयाच्या अटी ठरवता. आमच्या स्पेस गेमसाठी, येथे काही सिद्ध दृष्टिकोन आहेत जे आकर्षक गेमप्ले तयार करतात:

N शत्रू जहाजे नष्ट केली गेली आहेत: गेम वेगवेगळ्या स्तरांमध्ये विभागल्यास, स्तर पूर्ण करण्यासाठी तुम्हाला N शत्रू जहाजे नष्ट करावी लागतील.
तुमचे जहाज नष्ट झाले आहे: काही गेम्समध्ये तुमचे जहाज नष्ट झाल्यास तुम्ही गेम हरता. आणखी एक सामान्य दृष्टिकोन म्हणजे जीवनाची संकल्पना असणे. प्रत्येक वेळी तुमचे जहाज नष्ट होते तेव्हा एक जीवन कमी होते. सर्व जीवन संपल्यावर तुम्ही गेम हरता.
तुम्ही N गुण गोळा केले आहेत: आणखी एक सामान्य शेवटची अट म्हणजे तुम्ही गुण गोळा करणे. तुम्ही गुण कसे मिळवता हे तुमच्यावर अवलंबून आहे, परंतु शत्रू जहाज नष्ट करणे किंवा कदाचित वस्तू गोळा करणे ज्यांना नष्ट केल्यावर वस्तू ड्रॉप होतात अशा विविध क्रियाकलापांना गुण देणे सामान्य आहे.
एक स्तर पूर्ण करा: यामध्ये X शत्रू जहाजे नष्ट करणे, Y गुण गोळा करणे किंवा कदाचित विशिष्ट वस्तू गोळा करणे यासारख्या अनेक अटींचा समावेश असू शकतो.

गेम पुन्हा सुरू करण्याची कार्यक्षमता लागू करणे

चांगले गेम गुळगुळीत पुन्हा सुरू करण्याच्या यंत्रणेद्वारे पुनरावृत्ती करण्यास प्रोत्साहित करतात. जेव्हा खेळाडू गेम पूर्ण करतात (किंवा पराभवाला सामोरे जातात), तेव्हा ते लगेच पुन्हा प्रयत्न करू इच्छितात - त्यांचा स्कोअर पराभूत करण्यासाठी किंवा त्यांची कामगिरी सुधारण्यासाठी.

टेट्रिस याचे उत्तम उदाहरण आहे: जेव्हा तुमचे ब्लॉक्स वर पोहोचतात, तेव्हा तुम्ही जटिल मेनू नेव्हिगेट न करता लगेच नवीन गेम सुरू करू शकता. आम्ही एक समान रीस्टार्ट सिस्टम तयार करू जे गेम स्टेट स्वच्छपणे रीसेट करते आणि खेळाडूंना त्वरीत कृतीत परत आणते.

✅ प्रतिबिंब: तुम्ही खेळलेले गेम विचार करा. कोणत्या अटींनुसार ते संपतात आणि तुम्हाला पुन्हा सुरू करण्यास कसे प्रवृत्त केले जाते? रीस्टार्ट अनुभव गुळगुळीत विरुद्ध निराशाजनक वाटतो ते काय बनवते?

तुम्ही काय तयार कराल

तुम्ही तुमच्या प्रकल्पाला पूर्ण गेम अनुभवात बदलणाऱ्या अंतिम वैशिष्ट्यांची अंमलबजावणी कराल. हे घटक पॉलिश गेम्सना मूलभूत प्रोटोटाइप्सपासून वेगळे करतात.

आज आपण काय जोडत आहोत:

विजय अट: सर्व शत्रूंना नष्ट करा आणि योग्य सेलिब्रेशन मिळवा (तुम्ही ते कमावले आहे!)
पराजय अट: जीवन संपवा आणि पराजय स्क्रीनसह संगीताचा सामना करा
रीस्टार्ट यंत्रणा: Enter दाबा आणि लगेच परत जा - कारण एक गेम कधीच पुरेसा नसतो
स्टेट व्यवस्थापन: प्रत्येक वेळी स्वच्छ सुरुवात - मागील गेममधील शत्रू किंवा विचित्र गडबड नाही

सुरुवात करणे

तुमचे विकास वातावरण तयार करूया. तुम्ही मागील धड्यांमधील सर्व स्पेस गेम फाइल्स तयार ठेवल्या पाहिजेत.

तुमचा प्रकल्प काहीसा असा दिसायला हवा:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
  -| life.png
-| index.html
-| app.js
-| package.json

तुमचा विकास सर्व्हर सुरू करा:

cd your-work
npm start

हा आदेश:

http://localhost:5000 वर स्थानिक सर्व्हर चालवतो
तुमच्या फाइल्स योग्य प्रकारे सर्व्ह करतो
तुम्ही बदल केल्यावर आपोआप रीफ्रेश होतो

तुमच्या ब्राउझरमध्ये http://localhost:5000 उघडा आणि तुमचा गेम चालू असल्याची खात्री करा. तुम्ही हलवू, शूट करू शकता आणि शत्रूंशी संवाद साधू शकता. एकदा पुष्टी झाल्यावर, आम्ही अंमलबजावणीसह पुढे जाऊ शकतो.

💡 प्रो टिप: Visual Studio Code मध्ये चेतावणी टाळण्यासाठी, gameLoopId तुमच्या फाइलच्या शीर्षस्थानी let gameLoopId; म्हणून घोषित करा, window.onload फंक्शनमध्ये घोषित करण्याऐवजी. हे आधुनिक JavaScript व्हेरिएबल डिक्लेरेशन सर्वोत्तम पद्धतींचे अनुसरण करते.

अंमलबजावणी चरण

चरण 1: शेवटच्या अटी ट्रॅकिंग फंक्शन्स तयार करा

आपण गेम कधी संपावा हे मॉनिटर करण्यासाठी फंक्शन्सची आवश्यकता आहे. जसे की आंतरराष्ट्रीय स्पेस स्टेशनवरील सेन्सर्स सतत महत्त्वाच्या प्रणालींचे निरीक्षण करतात, हे फंक्शन्स गेम स्टेट सतत तपासतील.

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 लॉजिकचा वापर करते गोष्टी सोप्या ठेवण्यासाठी
सर्व गेम ऑब्जेक्ट्समधून फिल्टर करते जिवंत राहिलेल्यांना शोधण्यासाठी

चरण 2: शेवटच्या अटींसाठी इव्हेंट हँडलर्स अपडेट करा

आता आपण या अटी तपासणी गेमच्या इव्हेंट सिस्टमशी जोडू. प्रत्येक वेळी टक्कर होते, गेम मूल्यांकन करेल की ते शेवटची अट ट्रिगर करते का. हे महत्त्वाच्या गेम इव्हेंटसाठी त्वरित फीडबॅक तयार करते.

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

येथे काय चालले आहे:

लेझर शत्रूला मारते: दोघे गायब होतात, तुम्हाला गुण मिळतात आणि आम्ही तपासतो की तुम्ही जिंकलात का
शत्रू तुम्हाला मारतो: तुम्ही एक जीवन गमावता आणि आम्ही तपासतो की तुम्ही अजून श्वास घेत आहात का
स्मार्ट ऑर्डरिंग: आम्ही प्रथम पराजय तपासतो (कोणीही एकाच वेळी जिंकणे आणि हरवणे इच्छित नाही!)
त्वरित प्रतिक्रिया: काहीतरी महत्त्वाचे घडताच, गेम त्याबद्दल जाणतो

चरण 3: नवीन संदेश स्थिरांक जोडा

तुम्हाला तुमच्या Messages स्थिर ऑब्जेक्टमध्ये नवीन संदेश प्रकार जोडण्याची आवश्यकता आहे. हे स्थिरांक सुसंगतता राखण्यास आणि तुमच्या इव्हेंट सिस्टममधील टायपो टाळण्यास मदत करतात.

GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",

वरीलमध्ये, आम्ही:

गेम एंड इव्हेंटसाठी स्थिरांक जोडले सुसंगतता राखण्यासाठी
स्पष्टपणे इव्हेंटचा उद्देश दर्शविणारे वर्णनात्मक नावे वापरली
संदेश प्रकारांसाठी विद्यमान नामकरण पद्धतीचे अनुसरण केले

चरण 4: रीस्टार्ट कंट्रोल्स लागू करा

आता तुम्ही खेळाडूंना गेम पुन्हा सुरू करण्याची परवानगी देणारे कीबोर्ड कंट्रोल्स जोडाल. Enter की हा एक नैसर्गिक पर्याय आहे कारण तो सामान्यतः क्रिया पुष्टी करण्यासाठी आणि नवीन गेम सुरू करण्यासाठी संबंधित असतो.

तुमच्या विद्यमान कीडाउन इव्हेंट लिसनरमध्ये Enter की डिटेक्शन जोडा:

else if(evt.key === "Enter") {
   eventEmitter.emit(Messages.KEY_EVENT_ENTER);
}

नवीन संदेश स्थिरांक जोडा:

KEY_EVENT_ENTER: "KEY_EVENT_ENTER",

तुम्हाला काय माहित असणे आवश्यक आहे:

तुमच्या विद्यमान कीबोर्ड इव्हेंट हँडलिंग सिस्टमचा विस्तार करते
Enter कीचा वापर रीस्टार्ट ट्रिगर म्हणून अंतर्ज्ञानी वापरकर्ता अनुभवासाठी करते
कस्टम इव्हेंट उत्सर्जित करते ज्यासाठी तुमच्या गेमचे इतर भाग ऐकू शकतात
तुमच्या इतर कीबोर्ड कंट्रोल्ससारखा समान नमुना राखतो

चरण 5: संदेश प्रदर्शन प्रणाली तयार करा

तुमच्या गेमला खेळाडूंना परिणाम स्पष्टपणे सांगण्याची आवश्यकता आहे. आम्ही एक संदेश प्रणाली तयार करू जी विजय आणि पराजय स्थिती रंग-कोडेड मजकूर वापरून प्रदर्शित करते, जसे की प्रारंभिक संगणक प्रणालींच्या टर्मिनल इंटरफेससारखे जेथे हिरवा यश दर्शवतो आणि लाल त्रुटी दर्शवतो.

displayMessage() फंक्शन तयार करा:

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() फंक्शन तयार करा:

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)  
}

हे फंक्शन काय करते:

सर्वकाही स्थिर करते - हलणारे जहाज किंवा लेझर नाही
लहान विराम घेतो (200ms) शेवटचा फ्रेम काढण्यास परवानगी देण्यासाठी
स्क्रीन स्वच्छ करते आणि नाट्यमय प्रभावासाठी काळा रंग देते
विजेत्यांसाठी आणि पराभूतांसाठी वेगवेगळे संदेश दर्शवते
चांगल्या बातम्यांसाठी हिरवा, वाईटसाठी लाल रंग कोड करते
खेळाडूंना परत कसे उडी मारायचे ते अचूकपणे सांगते

चरण 6: गेम रीसेट कार्यक्षमता लागू करा

रीसेट सिस्टमला विद्यमान गेम स्टेट पूर्णपणे साफ करणे आणि नवीन गेम सत्र सुरू करणे आवश्यक आहे. हे खेळाडूंना मागील गेममधील कोणत्याही शिल्लक डेटाशिवाय स्वच्छ सुरुवात मिळण्याची खात्री देते.

resetGame() फंक्शन तयार करा:

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

प्रत्येक भाग समजून घेऊया:

सध्याचा गेम लूप चालू आहे का ते तपासते
सर्व विद्यमान गेम क्रियाकलाप थांबवण्यासाठी विद्यमान गेम लूप साफ करते
मेमरी लीक टाळण्यासाठी सर्व इव्हेंट लिसनर्स काढून टाकते
ताज्या ऑब्जेक्ट्स आणि व्हेरिएबल्ससह गेम स्टेट पुन्हा सुरू करते
सर्व आवश्यक गेम फंक्शन्ससह नवीन गेम लूप सुरू करते
सुसंगत गेम कार्यक्षमतेसाठी समान 100ms अंतर राखते

तुमच्या initGame() फंक्शनमध्ये Enter की इव्हेंट हँडलर जोडा:

eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
  resetGame();
});

तुमच्या EventEmitter वर्गात clear() पद्धत जोडा:

clear() {
  this.listeners = {};
}

लक्षात ठेवण्याच्या मुख्य गोष्टी:

Enter की प्रेस गेम रीसेट कार्यक्षमतेशी जोडते
गेम प्रारंभ करताना हा इव्हेंट लिसनर नोंदवतो
गेम्स दरम्यान इव्हेंट हँडलर्स साफ करून मेमरी लीक टाळते
ताज्या प्रारंभासाठी लिसनर्स ऑब्जेक्ट रिक्त स्थितीत रीसेट करते

अभिनंदन! 🎉

👽 💥 🚀 तुम्ही जमिनीपासून पूर्ण गेम यशस्वीरित्या तयार केला आहे. जसे की 1970 च्या दशकात पहिले व्हिडिओ गेम तयार करणारे प्रोग्रामर, तुम्ही कोडच्या ओळींना योग्य गेम यांत्रिकी आणि वापरकर्ता फीडबॅकसह परस्पर अनुभवात बदलले आहे. 🚀 💥 👽

तुम्ही साध्य केले आहे:

विजय आणि पराजय अटी अंमलात आणल्या वापरकर्ता फीडबॅकसह
सतत गेमप्लेसाठी गुळगुळीत रीस्टार्ट सिस्टम तयार केली
गेम स्टेट्ससाठी स्पष्ट व्हिज्युअल संवाद डिझाइन केला
जटिल गेम स्टेट ट्रान्झिशन्स आणि क्लीनअप व्यवस्थापित केले
सर्व घटक एकत्र करून सुसंगत, खेळण्यायोग्य गेम तयार केला

GitHub Copilot Agent Challenge 🚀

Agent मोड वापरून खालील आव्हान पूर्ण करा:

वर्णन: स्तर प्रगती प्रणालीसह स्पेस गेम सुधारित करा ज्यामध्ये वाढती अडचण आणि बोनस वैशिष्ट्ये आहेत.

प्रॉम्प्ट: एक मल्टी-लेव्हल स्पेस गेम सिस्टम तयार करा जिथे प्रत्येक स्तरावर अधिक शत्रू जहाजे वाढत्या गती आणि आरोग्यासह असतात. प्रत्येक स्तरासह वाढणारा स्कोअरिंग गुणक जोडा आणि पॉवर-अप्स (जसे की जलद फायर किंवा शील्ड) अंमलात आणा जेव्हा शत्रू नष्ट होतात तेव्हा यादृच्छिकपणे दिसतात. स्तर पूर्णता बोनस समाविष्ट करा आणि विद्यमान स्कोअर आणि जीवनासह स्क्रीनवर वर्तमान स्तर प्रदर्शित करा.

Agent मोड बद्दल अधिक जाणून घ्या.

🚀 पर्यायी सुधारणा आव्हान

तुमच्या गेममध्ये ऑडिओ जोडा: ध्वनी प्रभाव अंमलात आणून तुमचा गेमप्ले अनुभव वाढवा! विचार करा:

लेझर शॉट्स जेव्हा खेळाडू फायर करतो
शत्रू नाश जेव्हा जहाजे हिट होतात
हिरो डॅमेज जेव्हा खेळाडू हिट घेतो
विजय संगीत जेव्हा गेम जिंकला जातो
पराजय ध्वनी जेव्हा गेम हरला जातो

ऑडिओ अंमलबजावणी उदाहरण:

// 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();
}