🐦 👨‍👩‍👧 🥡 [ट्यूटोरियल] कैसे अपना पहला वृद्धिशील आईडीएल जावास्क्रिप्ट खेल बनाने के लिए 🚅 📷 🌶️

आज मैं आपको बताऊंगा कि ~~सरलतम ToDo सूची को~~ सरलतम वृद्धिशील IDLE गेम बनाने के लिए कैसे करें, जिसमें वार्षिक अवकाश के एक दिन से भी कम समय हो। ऐसा करने के लिए, मैं सुझाव देता हूं कि एक ~~उल्लू~~ खेल को चुनना आसान है और ~~अंडाकार और तैयार उल्लू के~~ खाली स्थान और समाप्त खेल के बीच के कदमों को न छोड़ें।

जो लोग इस तरह के खेल बनाने के बारे में जानते हैं वे ऊब जाएंगे; जो लोग जेएस को जानते हैं, मैं आपकी उंगलियों के माध्यम से कोड को देखने (चोटों से बचने के लिए) और केवल यांत्रिकी के बारे में पढ़ने की सलाह देता हूं। कटौती के तहत, शुरुआती के लिए एक सुसंगत गाइड।

वृद्धिशील खेल वे खेल हैं जो [अंतहीन] मुख्य चक्र पर आधारित हैं, जिसमें संसाधनों का संचय, उनके निरंतर खर्च और आय में तेजी शामिल है। उनकी मुख्य विशेषता संख्याओं की निरंतर वृद्धि है। निर्देश आपको बताएंगे कि कैसे एक आईडीएल (आलसी) गेम बनाना है जिसमें संसाधनों को एक सक्रिय क्लिक के बजाय टाइमर के साथ फिर से भरना है।

इसके साथ शुरू करने के लिए, index.html नामक एक टेक्स्ट फ़ाइल बनाएं और उसमें निम्नलिखित लिखें:

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><!--    ,     --> <title>     </title> <style> </style> </head> <body>  : 0<br> </body> </html>

फिलहाल, अभी तक कोई खेल नहीं है, लेकिन केवल एक स्थिर शिलालेख है।

वर्तमान स्थिति में खेल से लिंक: 0df7a27

इस शैली के सभी खेल दो सशर्त अनंत खेल चक्रों पर आधारित हैं।
पहला चक्र संसाधनों का संचय है।
दूसरा चक्र संसाधनों की बर्बादी है।

पहले चक्र को लागू करते हैं।

   : <span id="spnCoppersValue">0</span><br> <script> let coppers = 0; let copperGrowth = 1; myTimer = setInterval(endOfTurnCalc, 2000); function endOfTurnCalc() { coppers = coppers+copperGrowth; document.getElementById("spnCoppersValue").innerHTML = coppers; } </script>

पहली पंक्ति

 <span id="spnCoppersValue">0</span><br>

हमें इसकी आईडी द्वारा इसे एक्सेस करने की क्षमता प्रदान करता है, और टैग के अंदर की सामग्री को बदल देता है, हमारे मामले में, नकद सिक्कों का मूल्य।

दूसरी बात, एक स्क्रिप्ट दिखाई दी।

हम कॉपर्स वेरिएबल बनाते हैं और लेट कीवर्ड के साथ इसका दायरा सेट करते हैं। कॉपरग्रोथ की घोषणा के समान, जो तांबे के सिक्कों की वृद्धि दर के लिए जिम्मेदार होगा।

इसके बाद, एक ऑब्जेक्ट बनाएं जिसमें हम अपना टाइमर लगाते हैं, जो हर 2000 एमएस (2 सेकंड) के एंडऑफटर्नकाल समारोह को खींच लेगा। फ़ंक्शन तांबे के सिक्कों में वृद्धि और इंटरफ़ेस के लिए एक अपडेट प्रदान करता है। हुर्रे, आधा खेल किया जाता है: हमारे पास संसाधनों के संचय का एक चक्र है। अगला कार्य यह सीखना है कि इसे कैसे खर्च किया जाए।

वर्तमान स्थिति में खेल के लिए लिंक: e5d96e1 ।

आइए एक बटन जोड़ें जो हमें तांबे की खान में सुधार करने पर तांबे के सिक्के खर्च करने की अनुमति देगा, मैं सुझाव देता हूं कि इसे सिक्कों के साथ हमारी रेखा के सामने रखें। एक बटन, उसका नाम, फ़ंक्शन जिसे बटन कहते हैं, बटन का नाम टैग के अंदर की सामग्री है।

 <button id="btnUpgCopperMine" onclick="upgCopperMine()">  , 10  </button><br>

एक कोड जोड़ें जो अपग्रेड बटन को काम करने की अनुमति देता है:

  let coppersUpgCost = 10; let coppersUpgLevel = 1; function upgCopperMine() { if (coppers>coppersUpgCost){ coppers = coppers-coppersUpgCost; coppersUpgLevel = coppersUpgLevel + 1; coppersUpgCost = coppersUpgCost*2; document.getElementById("spnCoppersValue").innerHTML = coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost.toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; } }

और एक कोड जो नए सिक्कों के निष्कर्षण की दर को प्रभावित करेगा:

  function endOfTurnCalc() { coppers = coppers+copperGrowth*coppersUpgLevel;; document.getElementById("spnCoppersValue").innerHTML = coppers; }

हम खदान में सुधार के लिए मूल्य निर्धारित करते हैं, डिफ़ॉल्ट खदान स्तर को परिभाषित करते हैं, और फ़ंक्शन में खदान के उन्नयन के लिए सिक्कों की पर्याप्तता की जांच करते हैं।

यदि पर्याप्त धन है, तो अपग्रेड की कीमत लिखें, खानों के वर्तमान स्तर में वृद्धि करें, अगले सुधार के लिए मूल्य की गणना करें; तांबे के सिक्कों के वर्तमान मूल्यों और अगले सुधार की लागत प्रदर्शित करें।

वर्तमान स्थिति में खेल के लिए लिंक: c731ec5

ठीक है, आप पहले से ही खेल सकते हैं - आप बचा सकते हैं, और, अधिक सुखद तरीके से, संचित खर्च कर सकते हैं। लेकिन हमें सफलता को सुदृढ़ करने की आवश्यकता है - खिलाड़ी न केवल सिक्कों के संचय की दर में वृद्धि की गणना करता है, पुराने के नए मूल्य से घटाकर, बल्कि, एक अच्छे तरीके से, तुरंत सिक्कों के संचय की वर्तमान दर को देखता है। करेंगे क्या?

इंटरफ़ेस में एक और पंक्ति जोड़ें:

    : <span id="spnCoppersRate">1</span>  2 <br>

अब हमारा इंटरफ़ेस निम्नलिखित पंक्तियों द्वारा वर्णित है:

  <button id="btnUpgCopperMine" onclick="upgCopperMine()" style="width: 240px;">  , 10  </button><br>  : <span id="spnCoppersValue">0</span><br>    : <span id="spnCoppersRate">1</span>  2 <br>

हम upgCopperMine () फ़ंक्शन के लिए स्क्रिप्ट में बदलाव करते हैं:

  if (coppers>coppersUpgCost){ coppers = coppers-coppersUpgCost; coppersUpgLevel = coppersUpgLevel + 1; coppersUpgCost = coppersUpgCost*2; document.getElementById("spnCoppersValue").innerHTML = coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost.toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = copperGrowth*coppersUpgLevel; }

वर्तमान स्थिति में खेल के लिए लिंक: 3ac06b6

बहुत बढ़िया! हमारे पास सशर्त रूप से अनंत खेल है। अब हमें एक सेकंड के लिए रुकने की ज़रूरत है, और इसके बारे में सोचना चाहिए - कुछ लोग इसे पसंद करते हैं जब कोई अंतिम लक्ष्य नहीं होता है, और आप तब तक खेल सकते हैं जब तक आप थक नहीं जाते, दूसरे भाग का मानना है कि खेल की परिमितता, पुनरावृत्ति की स्थिति होनी चाहिए। हम पहले से ही पूर्व के लिए एक खेल बना चुके हैं, लेकिन क्या हमें एक छोटा बदलाव करने से रोकता है ताकि खेल में एक लक्ष्य और एक जीत की स्थिति हो? चलो करते हैं।

  let win_condition = 50; myTimer = setInterval(endOfTurnCalc, 2000); function endOfTurnCalc() { if (coppers < win_condition) { coppers = coppers+copperGrowth*coppersUpgLevel; document.getElementById("spnCoppersValue").innerHTML = coppers; } else { clearTimeout(myTimer); alert("  !   "+win_condition.toString()); } }

हमने एक वैरिएबल जोड़ा जिसमें हमने वह मान डाला जिसे हमें लूप से फ़ंक्शन को प्राप्त करने और बदलने की आवश्यकता है, लक्ष्य को प्राप्त करने के लिए एक चेक जोड़कर। लक्ष्य तक पहुंचने पर, हम टाइमर के साथ अपनी वस्तु से अंतराल को साफ करते हैं और ब्राउज़र में एक पॉप-अप संदेश प्रदर्शित करते हैं।

एक छोटा बिंदु है: कुछ एंटीवायरस अलर्ट पसंद नहीं करते हैं और उनके उपयोग के लिए पृष्ठ को ब्लॉक करते हैं।

वर्तमान स्थिति में खेल के लिए लिंक: 8fa4041

अगली कार्यक्षमता जो लोग पांच मिनट से अधिक समय तक गेम से उम्मीद करते हैं, वह गेम को बचाने और लोड करने की क्षमता है। चलो उसे दे दो!

हम इंटरफ़ेस में दो पंक्तियाँ जोड़ते हैं, पिछली पंक्ति में पंक्ति फ़ीड टैग जोड़ना नहीं भूलते:

  <button id="btnSaveGame" onclick="saveGame()" style="width: 240px;"> </button><br> <button id="btnLoadGame" onclick="loadGame()" style="width: 240px;"> </button><br>

और अब हम अपनी स्क्रिप्ट का विस्तार करेंगे ताकि बटन काम करें:

  function saveGame() { localStorage.setItem('coppers', coppers); localStorage.setItem('coppersUpgCost', coppersUpgCost); localStorage.setItem('coppersUpgLevel', coppersUpgLevel); } function loadGame() { coppers = parseInt(localStorage.getItem('coppers')); coppersUpgCost = parseInt(localStorage.getItem('coppersUpgCost')); coppersUpgLevel = parseInt(localStorage.getItem('coppersUpgLevel')); document.getElementById("spnCoppersValue").innerHTML = coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost.toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = copperGrowth*coppersUpgLevel; }

हम सहेजते समय ब्राउज़र के सभी संग्रहण योग्य संसाधनों को ब्राउज़र के स्थानीय भंडारण में डाल देते हैं और पढ़ते समय हम उन्हें वापस पढ़ते हैं और इंटरफ़ेस को अपडेट करते हैं।

वर्तमान स्थिति में खेल के लिए लिंक: 54b1ea0 ।

सब कुछ, खेल का मुख्य हिस्सा तैयार है।

आज तक, हमने समीक्षा की है:

- एक संसाधन का निर्माण;
- संसाधन निष्कर्षण;
- इसकी उत्पादन प्रणाली के उन्नयन पर संसाधनों की बर्बादी;
- संसाधन के निष्कर्षण की गति का प्रतिबिंब;
- जीत की स्थिति;
- ब्राउजर के लोकल स्टोरेज में गेम को सेव करने और पढ़ने के लिए।

हम जारी रहेगा? अगले विषय पर आगे बढ़ने से पहले, अर्थात्, हमारे सिस्टम (चांदी) में एक दूसरा संसाधन जोड़कर, मैं वर्तमान कोड की एक छोटी रीफैक्टरिंग आयोजित करने का सुझाव देता हूं।

रिफैक्टरिंग के हिस्से के रूप में क्या करने की आवश्यकता है?

पहले, चलो एक गेम ऑब्जेक्ट बनाते हैं, और तांबे के सिक्के, तांबे की खानों के स्तर, और इसी तरह, इस ऑब्जेक्ट के गुणों के रूप में अंदर डालते हैं। यह भविष्य में बहुत मदद करेगा क्योंकि हम नई गेम संस्थाओं में भंडारण और लोडिंग का विस्तार करते हैं।

दूसरे, हम अपग्रेड मूल्य की गणना को गतिशील बनाएंगे।

तीसरा, हमें कोड के दोहराव से छुटकारा मिलता है, जो इंटरफ़ेस को अपडेट करने के लिए जिम्मेदार है।

कोड निम्न रूप लेगा:

  let game = { coppers: 1, copperGrowth: 1, coppersUpgCost: 10, coppersUpgLevel: 1, } let win_condition = 50; myTimer = setInterval(endOfTurnCalc, 2000); function endOfTurnCalc() { if (game.coppers < win_condition) { game.coppers = game.coppers+game.copperGrowth*game.coppersUpgLevel; document.getElementById("spnCoppersValue").innerHTML = game.coppers; } else { clearTimeout(myTimer); alert("  !   "+win_condition.toString()); } } function upgCopperMine() { if (game.coppers>game.coppersUpgCost){ game.coppers = game.coppers-game.coppersUpgCost; game.coppersUpgLevel = game.coppersUpgLevel + 1; game.coppersUpgCost = game.coppersUpgCost*2; document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += game.coppersUpgCost.toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; } } function saveGame() { localStorage.setItem('coppers', game.coppers); localStorage.setItem('coppersUpgCost', game.coppersUpgCost); localStorage.setItem('coppersUpgLevel', game.coppersUpgLevel); } function loadGame() { game.coppers = parseInt(localStorage.getItem('coppers')); game.coppersUpgCost = parseInt(localStorage.getItem('coppersUpgCost')); game.coppersUpgLevel = parseInt(localStorage.getItem('coppersUpgLevel')); document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += game.coppersUpgCost.toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; } </script>

यह काफी स्पष्ट है कि हमने गेम ऑब्जेक्ट बनाया है, और ऑब्जेक्ट के अंदर हमने इसके गुण और संपत्ति मान दर्ज किए हैं। इसके अलावा, जहाँ भी हम सीधे चर का उपयोग करते थे, अब हम गेम ऑब्जेक्ट के समान गुणों का उल्लेख करते हैं।

वर्तमान स्थिति में खेल के लिए लिंक: 8a07f4d

आइए अब सेव एंड लोड सिस्टम को अपडेट करें।

  function saveGame() { localStorage.setItem('gameTutorial', JSON.stringify(game)); } function loadGame() { game = JSON.parse(localStorage.getItem('gameTutorial')); document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += game.coppersUpgCost.toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; }

अब, हम व्यक्तिगत गुणों को बचाने के बजाय, संपूर्ण वस्तु को संपूर्ण रूप से सहेजते हैं। लेकिन सावधान रहें: यदि आप ऑब्जेक्ट में विधियाँ जोड़ते हैं, तो वे इस तरह से सेव नहीं होंगे, और बाद में सेव से ऑब्जेक्ट को फिर से लिखना सभी तरीकों को हटा देगा ...

वर्तमान स्थिति में खेल के लिए लिंक: 8eba059

आइए अनावश्यक संपत्ति को हटा दें - खदान के उन्नयन की कीमत और उन्नयन की गणना के लिए एक फ़ंक्शन बनाएं और हम इसे आवश्यक स्थानों पर कॉल करेंगे।

  function coppersUpgCost() { return game.coppersUpgLevel*10; } function upgCopperMine() { if (game.coppers>=coppersUpgCost()){ game.coppers = game.coppers-coppersUpgCost(); game.coppersUpgLevel = game.coppersUpgLevel + 1; document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost().toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; } } function saveGame() { localStorage.setItem('gameTutorial', JSON.stringify(game)); } function loadGame() { game = JSON.parse(localStorage.getItem('gameTutorial')); document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost().toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; }

वर्तमान स्थिति में खेल के लिए लिंक: 4007924

अंत में, हमने इंटरफ़ेस अपडेट कोड के दोहराए गए हिस्सों को एक अलग फ़ंक्शन में रखा।

  function updateUI() { document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost().toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; }

बदले में, अन्य सभी स्थानों पर जहां हमने कुछ DOM ऑब्जेक्ट एक्सेस किए हैं, अब हम updateUI () फ़ंक्शन को कॉल करेंगे:

  function endOfTurnCalc() { if (game.coppers < win_condition) { game.coppers = game.coppers+game.copperGrowth*game.coppersUpgLevel; updateUI(); } else { clearTimeout(myTimer); alert("  !   "+win_condition.toString()); } } function upgCopperMine() { if (game.coppers>=coppersUpgCost()){ game.coppers = game.coppers-coppersUpgCost(); game.coppersUpgLevel = game.coppersUpgLevel + 1; updateUI(); } } function loadGame() { game = JSON.parse(localStorage.getItem('gameTutorial')); updateUI(); }

वर्तमान स्थिति में खेल के लिए लिंक: 2245f97

अब मैं एक दूसरा संसाधन प्रस्तुत करने का प्रस्ताव करता हूं: चांदी, निर्माण और चांदी की खानों का सुधार।

  <button id="btnUpgCopperMine" onclick="upgCopperMine()" style="width: 240px;">  , 10  </button><br>  : <span id="spnCoppersValue">0</span><br>    : <span id="spnCoppersRate">1</span>  2 <br> <button id="btnUpgSilverMine" onclick="upgSilverMine()" style="width: 240px;">  , 50  </button><br>  : <span id="spnSilversValue">0</span><br>    : <span id="spnSilversRate">1</span>  2 <br> <button id="btnSaveGame" onclick="saveGame()" style="width: 240px;"> </button><br> <button id="btnLoadGame" onclick="loadGame()" style="width: 240px;"> </button><br> <script> let game = { coppers: 1, copperGrowth: 1, coppersUpgLevel: 1, silvers: 0, silverGrowth: 1, silversUpgLevel: 0, } let win_condition = 50; let silverMineBasePriceCoppers = 100; myTimer = setInterval(endOfTurnCalc, 2000); function endOfTurnCalc() { if (game.silvers < win_condition) { game.coppers = game.coppers+game.copperGrowth*game.coppersUpgLevel; game.silvers = game.silvers+game.silverGrowth*game.silversUpgLevel; updateUI(); } else { clearTimeout(myTimer); alert("  !   "+win_condition.toString()); } } function coppersUpgCost() { return game.coppersUpgLevel*10+5; } function silversUpgCost() { return game.silversUpgLevel*10+5; } function upgCopperMine() { if (game.coppers>=coppersUpgCost()){ game.coppers = game.coppers-coppersUpgCost(); game.coppersUpgLevel = game.coppersUpgLevel + 1; updateUI(); } } function upgSilverMine() { if (game.silversUpgLevel===0){ if (game.coppers>=silverMineBasePriceCoppers){ game.coppers = game.coppers-silverMineBasePriceCoppers; game.silversUpgLevel = 1; updateUI(); } } else { if (game.silvers>=silversUpgCost()){ game.silvers = game.silvers-silversUpgCost(); game.silversUpgLevel = game.silversUpgLevel + 1; updateUI(); } } } function updateUI() { document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost().toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; document.getElementById("spnSilversValue").innerHTML = game.silvers; if (game.silversUpgLevel===0) { document.getElementById("btnUpgSilverMine").innerHTML = "  , "; document.getElementById("btnUpgSilverMine").innerHTML += silverMineBasePriceCoppers.toString(); document.getElementById("btnUpgSilverMine").innerHTML += "  "; } else { document.getElementById("btnUpgSilverMine").innerHTML = "  , "; document.getElementById("btnUpgSilverMine").innerHTML += silversUpgCost().toString(); document.getElementById("btnUpgSilverMine").innerHTML += "  "; } document.getElementById("spnSilversRate").innerHTML = game.silverGrowth*game.silversUpgLevel; } function saveGame() { localStorage.setItem('gameTutorial', JSON.stringify(game)); } function loadGame() { game = JSON.parse(localStorage.getItem('gameTutorial')); updateUI(); } </script>

क्या किया है? चांदी के सिक्कों को प्रदर्शित करने के लिए फ़ील्ड, उनके निष्कर्षण की गति, एक चांदी की खान के निर्माण या सुधार के लिए एक बटन इंटरफ़ेस में जोड़ा गया है।

गुण सिल्वर, सिल्वरग्राउट, साइलवरUpgLevel को गेम ऑब्जेक्ट के अंदर डुप्लिकेट किया गया है, लेकिन उत्तरार्द्ध 0 पर सेट है, क्योंकि हमारे पास डिफ़ॉल्ट रूप से चांदी की खान नहीं है।
जोड़ा गया SilverMineBasePriceCoppers वैरिएबल, जो तांबे के सिक्कों में चांदी की खान बनाने की कीमत को दर्शाता है (क्योंकि हम चांदी के साथ चांदी की खान के लिए भुगतान नहीं कर सकते हैं, जो हमारे पास अभी तक नहीं है)।

CoppersUpgCost फ़ंक्शन को संशोधित किया गया है और silversUpgCost के रूप में डुप्लिकेट किया गया है ताकि वर्तमान खदान स्तर 0 हो, तो अपग्रेड मूल्य गैर-शून्य हो।
हमने मोड़ की समाप्ति की गणना के कार्य को बदल दिया, वहां चांदी की खान से आय की गणना को जोड़ा, और जीत की स्थिति को भी बदल दिया - अब हमें तांबे के सिक्कों की संख्या की तुलना करने की आवश्यकता नहीं है, लेकिन चांदी के सिक्कों की संख्या।

हमने upgSilverMine फंक्शन बनाया, जिसमें हम डिबेटिंग फंड्स के तर्क को दर्शाते हैं (अगर अभी तक कोई खदान नहीं है, तो तांबे के सिक्के बंद कर दें, अगर खदान पहले से बनी है, तो खदान को बेहतर बनाने के लिए चांदी से लिखें)।
रजत के लिए आवश्यक लाइनों को अपडेटयूआई फ़ंक्शन में जोड़ा गया, साथ ही साथ पाठ आउटपुट के तर्क को चांदी की खान में सुधार करने के लिए एक बटन में विभाजित किया गया था, इसलिए एक बटन खदान के निर्माण और सुधार दोनों के लिए काम करता है।

सहेजें और लोड फ़ंक्शन अपरिवर्तित रहे।

वर्तमान स्थिति में खेल के लिए लिंक: 03eb0eb

ऐसा हो सकता है कि आवश्यकता से अधिक संचय करने के लिए बहुत अधिक तांबे के सिक्के हैं, जबकि चांदी अभी भी अर्जित करने की आवश्यकता है। इसके लिए, ऐसे खेलों में, एक नियम के रूप में, एक दूसरे के लिए विभिन्न संसाधनों के आदान-प्रदान की संभावना है।

आइए इंटरफ़ेस में कुछ बटन जोड़ें:

 <button id="btnUpgCopperMine" onclick="upgCopperMine()" style="width: 240px;">  , 15  </button><br>  : <span id="spnCoppersValue">0</span><br>    : <span id="spnCoppersRate">1</span>  2 <br> <button id="btnBuySilver" onclick="buySilver()" style="width: 240px;"> 1   100 </button><br> <hr> <button id="btnUpgSilverMine" onclick="upgSilverMine()" style="width: 240px;">  , 50  </button><br>  : <span id="spnSilversValue">0</span><br>    : <span id="spnSilversRate">0</span>  2 <br> <button id="btnBuySilver" onclick="buyCoppers()" style="width: 240px;"> 100   1  </button><br> <hr> <button id="btnSaveGame" onclick="saveGame()" style="width: 240px;"> </button><br> <button id="btnLoadGame" onclick="loadGame()" style="width: 240px;"> </button><br>

और इन बटनों में कुछ फ़ंक्शन जोड़ें:

  function buySilver() { if (game.coppers>=100) { game.coppers = game.coppers - 100; game.silvers = game.silvers + 1; updateUI(); } } function buyCoppers() { if (game.silvers>=1) { game.coppers = game.coppers + 100; game.silvers = game.silvers - 1; updateUI(); } }

वर्तमान स्थिति में खेल का लिंक: 92219b2

तो वृद्धिशील खेल में और क्या जोड़ा जा सकता है? प्रेस्टीज गियर! बेशक, अब यह अधिकता से अधिक है, लेकिन यदि खेल आगे विकसित होता है, तो यह आपके लिए काम आएगा। खिलाड़ी उससे प्यार करते हैं!

विभिन्न खेलों में, यह अलग तरीके से किया जाता है, लेकिन सामान्य रूप से - तंत्र खेल के सफल समापन (पास) के बाद प्रेस्टीज अंक देता है, या एक निश्चित लक्ष्य सीमा तक पहुंचने के बाद खेल के दौरान अनलॉक करता है।

प्रेस्टीज पॉइंट की मदद से, खिलाड़ी को उसी गेम में जल्दी से शुरू करने या एक स्थायी बोनस प्राप्त करने का अवसर मिलता है (यह संभव है कि अगले मिशन में, यदि गेम उन में विभाजित है), ताकि वह कुछ अन्य रणनीति आज़मा सके, लेकिन कम समय फिर से गुजर रहा है । इस प्रकार, कई कांटे का अध्ययन करना संभव है, अलग-अलग समाधानों का परीक्षण किया गया है, और इस तरह से कम समय खर्च करने की तुलना में अगर ऐसा कोई तंत्र नहीं था।

इसके लिए हमें क्या चाहिए? डिफ़ॉल्ट मानों के साथ गेम रीस्टार्ट मैकेनिज्म चाहिए। एक स्थायी बोनस के रूप में, हम कॉपरग्रथ और सिल्वरग्रो के पहले से अपरिवर्तित गुणों में प्रेस्टीज पॉइंट जोड़ देंगे।

निम्नलिखित फ़ंक्शन जोड़ें winGame, restartGameDialog, restartGame, और नए कार्यों को कॉल करने और अद्यतन करने के लिए endOfTurnCalc को भी बदलें:

  function endOfTurnCalc() { if (game.silvers < win_condition) { game.coppers = game.coppers+game.copperGrowth*game.coppersUpgLevel; game.silvers = game.silvers+game.silverGrowth*game.silversUpgLevel; updateUI(); } else { winGame(); } } function winGame() { clearTimeout(myTimer); alert("  !   "+win_condition.toString()); myRestartTimer = setInterval(restartGameDialog, 2000); } function restartGameDialog() { if (confirm('      ?')) { restartGame(); } else { clearTimeout(myRestartTimer); } } function restartGame() { game.coppers = 1; game.copperGrowth = game.copperGrowth+1; game.coppersUpgLevel = 1; game.silvers = 0; game.silverGrowth = game.silverGrowth+1; game.silversUpgLevel = 0; clearTimeout(myRestartTimer); myTimer = setInterval(endOfTurnCalc, 2000); updateUI(); } function updateUI() { ... if (game.copperGrowth!==1) { document.getElementById("divLblPrestige").innerHTML = "     "+game.copperGrowth.toString(); document.getElementById("divLblPrestige").style.display = "block"; } else { document.getElementById("divLblPrestige").style.display = "none"; } }

WinGame फ़ंक्शन एक टाइमर शुरू करता है, जिसके बाद एक पुष्टिकरण संवाद कहा जाता है। पुष्टिकरण के मामले में, पुनरारंभ फ़ंक्शन कहा जाता है, जो सभी मानों को डिफ़ॉल्ट रूप से रीसेट करता है, लेकिन सिक्कों की मूल वृद्धि के गुणों को बढ़ाता है।

सामान्य तौर पर, खेल तैयार है:

- एक संसाधन का निर्माण;
- संसाधन निष्कर्षण;
- इसकी उत्पादन प्रणाली के उन्नयन पर संसाधनों की बर्बादी;
- संसाधन के निष्कर्षण की गति का प्रतिबिंब;
- जीत की स्थिति;
- ब्राउज़र के स्थानीय भंडारण में गेम को बचाने और पढ़ने के लिए;
- उत्पादन के साथ एक और संसाधन जोड़ना और इसके उत्पादन का उन्नयन;
- संसाधनों का आदान-प्रदान;
- खेल पुनरारंभ तंत्र और प्रेस्टीज तंत्र।

वर्तमान स्थिति में खेल के लिए लिंक: 92219b2

अंत में, इस लेख में आखिरी चीज जो मैं दिखाना चाहता हूं वह एक अलग भंडारण तंत्र है, क्योंकि वर्तमान तंत्र में एक है, लेकिन एक महत्वपूर्ण समस्या है।

कल्पना कीजिए कि आप एक गेम विकसित कर रहे हैं, इसे एक वेब सर्वर (संभवतः जीथब पृष्ठ पर) प्रकाशित कर रहे हैं, और लोग इसे खेल रहे हैं। समय के साथ, आप गेम में बदलाव करते हैं जो गेम की गेम ऑब्जेक्ट में नए गुण जोड़ते हैं।

अब अपने हाथ देखो।

, coppers silvers, , , gold. game , -, , . - ! , . , , . , , :

  function loadGame() { gameTemp = JSON.parse(localStorage.getItem('gameTutorial')); for (var propertyName in gameTemp) { game[propertyName] = gameTemp[propertyName]; } updateUI(); }

, game = { gold: 1, } , , .
: 83c258d .

. , .

  <hr> <button id="btnSaveGame" onclick="saveGame()" style="width: 240px;"> </button><br> <br> <button id="btnExportGame" onclick="exportGame()" style="width: 240px;"> </button><br> <div id="divLblExport" style="display: none"></div> <br> <hr> <button id="btnLoadGame" onclick="loadGame()" style="width: 240px;"> </button><br> <br> <button id="btnImportGame" onclick="importGame()" style="width: 240px;"> </button><br>

  let countdown = 30; let showExport = 0; function updateUI() { ... if (showExport===1){ document.getElementById("divLblExport").style.display = "block"; } else { document.getElementById("divLblExport").style.display = "none"; } } function exportGame() { exportTimer = setInterval(exportCountdown, 1000); document.getElementById("divLblExport").innerHTML = btoa(JSON.stringify(game)); showExport = 1; updateUI(); } function exportCountdown() { if (countdown > 0) { countdown = countdown - 1; } else { clearTimeout(exportTimer); countdown = 30; showExport = 0; updateUI(); } } function importGame() { let importString = prompt('   '); gameTemp = JSON.parse(atob(importString)); for (var propertyName in gameTemp) { game[propertyName] = gameTemp[propertyName]; } updateUI(); }

, updateUI(), — , , , , «» 30 .

.

[ट्यूटोरियल] कैसे अपना पहला वृद्धिशील आईडीएल जावास्क्रिप्ट खेल बनाने के लिए

More articles: