🛥️ 🔖 ☪️ गेम प्रोजेक्ट के उदाहरण पर AngularJS के साथ अनुभव 🧑🏾 🎒 🏭

"मैं खुद को मारूंगा जब तक कि स्टेट काम नहीं करता"
- अगले अद्यतन की प्रत्याशा में अग्रणी डेवलपर

परिचय

AngularJS लोकप्रियता हासिल करना जारी रखता है, और अधिक से अधिक लेख और पाठ हैं जो बताते हैं कि इस रूपरेखा के साथ सबसे प्रभावी ढंग से कैसे काम किया जाए। दुर्भाग्य से, वे शायद ही कभी वास्तविक परियोजनाओं से उदाहरण देते हैं, और इस प्रक्रिया में सामना करने वाली सूक्ष्मताओं का कोई विवरण नहीं है। मैं इस लेख को केवल ऐसी चीजों के लिए समर्पित करना चाहता हूं, इसलिए यदि आप सिर्फ "कोणीय" के साथ काम करने जा रहे हैं, तो कुछ चीजों को समझना मुश्किल हो सकता है।

जैसा कि अक्सर होता है, मैंने एंगुलरजेएस के साथ अपना परिचय शुरू किया, एक नई नौकरी प्राप्त की। मुझे सामने के छोर को जल्दी से अध्ययन करने का काम दिया गया था। और चूंकि प्रोजेक्ट एक गेम है, इसलिए सिंगल-पेज एप्लिकेशन की आवश्यकता थी। इसलिए, वास्तव में, "कोणीय"। मुझे काम मिल गया।

एनजी एक तेजी से पुस्तक दुनिया में दोहराएँ

मुझे मैच के दौरान सर्वर पर खिलाड़ियों की सूची में दिलचस्पी थी। सभी कोड, बेशक, एक नियंत्रक में पैक किया गया था, लेकिन अंदर यह एक गड़बड़ था। बेशक, टिप्पणियाँ नहीं थीं। नीचे की रेखा लगभग निम्नलिखित थी:

एन सूची आइटम बनाएँ
उनमें स्पैन जोड़ें, वहां शैलियों को नीचे रखें
हर 5 सेकंड में अपडेट करें

मेरा अपना स्क्रॉलबार भी इस सब से प्रभावित था, जिसने मुझे कुछ हद तक आश्चर्यचकित किया।

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

वैरिएबल currentPage, pageSize और pageCount को स्कोप में जोड़ें।
करंटपेज़ बदलने वाले टेम्पलेट के एनजी-क्लिक निर्देश के साथ बटन जोड़ें
PageTize के एनजी-रिपीट करने के लिए बराबर सीमा सीमा फ़िल्टर जोड़ें।

देखा। नतीजा थोड़ा बेहतर लगने लगा। ब्राउज़र अब मर नहीं रहा था, लेकिन छोटे अंतराल अभी भी बने हुए हैं। मैंने अभी भी मुख्य समस्या का समाधान नहीं किया है।

और फिर यह मुझ पर चढ़ा। इस तथ्य के कारण कि अद्यतन के दौरान मैंने खिलाड़ियों की सूची के साथ सरणी को फिर से परिभाषित किया, "कोणीय" का मानना था कि इसे नई वस्तुएं मिलीं, भले ही उनकी कुंजी में मान पूरी तरह से समान थे। यह बेवकूफ गलती मुझे एक घंटे से भी अधिक समय तक खोदने और एक भयावह निशान बनाने में खर्च हुई। केवल एक चीज जो मेरे लिए आवश्यक थी, वह थी सरणी की वस्तुओं के अंदर के मूल्यों को बदलना।
अंत में, मैंने एक हाइब्रिड संस्करण बनाने का फैसला किया: मैंने स्क्रॉल वापस कर दिया, लेकिन मैंने तत्वों को बाइंडरों में अपडेट किया, और आखिरकार मुझे वह मिला जो मैं चाहता था: एक तेज़ और संक्षिप्त नियंत्रक, जिसे बाद में आसानी से विस्तारित किया जा सकता है।

अंतिम टेम्पलेट इस प्रकार था:

<ul id="list-players"> <li ng-repeat="player in listPlayers" ng-class-odd="'odd'" ng-class="{ 'highlighted': player.highlighted, 'obs': player.observing, 'empty': player.empty }" ng-click="ObservePlayer(player.nickname)"> <span class="place" ng-bind="player.place"> </span><span class="nickname" ng-bind="player.nickname"> </span><span class="kills" ng-bind="player.kills"> </span><span class="deaths" ng-bind="player.deaths"> </span> </li> </ul>

नियंत्रक में सब कुछ काफी सरल है:

 for (var i = 0, index, player, $li; i < $scope.listSize; i++) { index = startIndex + i; var $player = $scope.listPlayers[i]; $player.empty = !player; if (!$player.empty) { $player.highlighted = player.id == focusOnPlayer $player.observing = player.status == 3; $player.place = !$player.empty ? index + 1 : ''; $player.nickname = player.nickname || ''; $player.deaths = player.deaths !== undefined ? player.deaths : ''; $player.kills = player.kills !== undefined ? player.kills : ''; } }

एनजी-क्लास और एनजी-स्टाइल बनाम स्प्राइट्स

इस छोटी लेकिन बल्कि कठिन थकावट को समाप्त करने के बाद, मैं आखिरकार मुख्य बात पर आगे बढ़ा: सुविधाओं को जोड़ना। मेरा काम खिलाड़ी के उपनाम के आगे उसकी रैंक का एक आइकन प्रदर्शित करना था, और यदि वह पहले तीन स्थान जीतता तो राउंड के अंत में पदक भी। पदक के साथ, सब कुछ काफी सरल है, मैंने सिर्फ पदक का मूल्य $ खिलाड़ी में जोड़ा: 0 - कोई पदक, 1 - स्वर्ण, आदि, निम्न तत्व को टेम्पलेट में जोड़ा गया था:

 <i class="medal-icon-small" ng-class="{ 'medal-gold': player.medal == 1, 'medal-silver': player.medal == 2, 'medal-bronze': player.medal == 3 }"> </i>

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

 <i class="rank-icon-small" ng-style="getRankStyle(player.rank)"></i>

GetRankStyle बस रैंक मान को पास करता है, और यह पहले से ही वांछित शैली देता है:

 $scope.getRankStyle = function(index) { return { 'background-position': '0px ' + -(index * 16) + 'px' }; }

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

नुकसान

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

यह भी बाँध के संचालन के बारे में सावधान रहना चाहिए। पहले उदाहरण में, मैंने इसके तत्वों को नहीं, बल्कि एरे को एक्सेस करके एक मूर्खतापूर्ण गलती की। यह सब कुछ पर लागू होता है: गुंजाइश में बड़ी संख्या में मानों के बजाय, उन्हें अलग-अलग वस्तुओं (उदाहरण के लिए समान रूप) में श्रेणियों में समूह में रखना बेहतर होता है।

शायद इस बारे में बात करना सार्थक होगा कि परियोजना की संरचना को प्रभावी ढंग से कैसे व्यवस्थित किया जाए, लेकिन यह पहले से ही एक अलग लेख के लिए एक विषय है।

पुनश्च: किसी ने पहले से ही अनुमान लगाया था कि लेख बॉम्बरमाइन परियोजना के बारे में है, जिसमें, जैसा कि मैंने कहा, मैं हाल ही में काम कर रहा हूं।

गेम प्रोजेक्ट के उदाहरण पर AngularJS के साथ अनुभव

परिचय

एनजी एक तेजी से पुस्तक दुनिया में दोहराएँ

एनजी-क्लास और एनजी-स्टाइल बनाम स्प्राइट्स

नुकसान

More articles: