जावास्क्रिप्ट टाइल खेल विकास (रोबो)

हेब्राह्रा के प्यारे निवासियों!

इस बार मैं आपके लिए जावास्क्रिप्ट, अटारी और कैनवास के बारे में एक कहानी लाया! खेल को रोबो कहा जाता है और 1989 में इसी नाम के निर्माण का एक बंदरगाह है।


खिलौना ही । मौन ध्वनि के साथ खिलौना । काम पर खेलने के लिए संस्करण । जीथब से लिंक करें ।
प्रबंधन तीर द्वारा किया जाता है। यदि कारतूस हैं, तो शिफ्ट + तीर सही दिशा में शूट करेगा।

कहानी

यदि आप पृष्ठभूमि में रुचि नहीं रखते हैं, तो अगले कुछ पैराग्राफों के माध्यम से तुरंत "तकनीकी कार्यान्वयन" अनुभाग पर स्क्रॉल करें।

एक बच्चे के रूप में, मेरे पास अटारी 130 एक्सई कंप्यूटर था। जब मैं 2 साल का था, तब माता-पिता ने इसे खरीदा था। उनकी कहानियों के अनुसार, यह इस उम्र में था कि मैं एक जॉयस्टिक के साथ एक कुर्सी से गिर गया, रोबो के दूसरे स्तर पर एक उल्लू से दूर भाग रहा था।

Robbo

यह खेल पोलिश प्रोग्रामर जानुस पेलेक द्वारा लिखा गया था और 1989 में जारी किया गया था। यह मेरा पसंदीदा बचपन का खेल था।

संस्थान में, मेरी मां को प्रोग्रामिंग सिखाई गई और 4 साल की उम्र में उन्होंने मुझे बुनियादी सिखाने का फैसला किया। तब स्वतंत्र रूप से रॉबो को फिर से लिखने का पहला प्रयास किया गया था। बुरी खबर यह थी कि मैं केवल PRINT, INPUT और POKE स्टेटमेंट जानता था। इससे कुछ भी अच्छा नहीं हुआ / Z यह कल्पना भी नहीं की जा सकती कि इस तरह के खेल को लिखना कैसे संभव है, मैंने जो किया वह सभी चालों में bruteforce की तरह था। उपयोगकर्ता दाईं ओर दबाया गया और उस स्थिति को जहां वर्ण को एक कक्ष में दाईं ओर स्थानांतरित किया गया है, पुनर्मुद्रित किया गया है, अर्थात यह अपने शुद्धतम रूप में एक आस्कर राज्य मशीन थी। अगर मुझे टेक्स्ट क्वैस्ट के बारे में पता था, तो उन्हें इस तरह से लागू करना संभव होगा, लेकिन मुझे नहीं पता था।

अगली पुनरावृति नौवीं कक्षा में थी। यह पहले से ही विज़ुअल बेसिक और AMD-K6 II 500 था। उस समय, अपग्रेड पत्रिका ने एक डिस्क के साथ अपना पहला अंक जारी करने का फैसला किया था, और मेरे पास खेल का कुछ कार्यान्वयन था। एमएस पेंट ने अपने हस्ताक्षर अग्रदूतों के साथ स्प्राइट्स का एक गुच्छा चित्रित किया, जिसके बाद मैंने उन्हें यह खिलौना भेजा। कुछ महीनों के बाद, पेंच मर गया और कोड खो गया। कोड में केवल सरणियाँ थीं, यहां तक ​​कि संरचनाओं का उपयोग नहीं किया गया था, दाएं हाथ के एनपीसी के नियम के अनुसार भूलभुलैया को दरकिनार करने के लिए एक एल्गोरिथ्म ने कोड के आठ ए 4 पृष्ठ ले लिए (मैं मजाक नहीं कर रहा हूं)। तब कोई सामान्य इंटरनेट नहीं था, केवल डायलअप था।

ग्रेड 11 में, उसी विज़ुअल बेसिक पर एक नया संस्करण लिखा गया था। यहां कोड काफ़ी बेहतर हो गया, मैंने आंदोलन की 4 दिशाओं के लिए अलग-अलग व्यवहार को चित्रित नहीं किया।

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

GnuRobbo।

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

तकनीकी रूप से लोकप्रिय हिस्सा है।

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

खेल की समीक्षा करने के बाद, मैंने महसूस किया कि इस दुनिया में कई वस्तुएं समान व्यवहार को लागू करती हैं। तो एक बम, एक पत्थर, कुछ तोपें, एक अंतरिक्ष यान ले जाया जा सकता है, उन पर आराम करते हुए।

वस्तुएं स्वयं बहुत ही सरल थीं। यहाँ, उदाहरण के लिए, दरवाजा कोड (door.js):

(function( R ){ 'use strict'; R.objects.Door = { //    explodable: true, //    ,      eatable: true, eat: function( eater ){ //             if( eater.keys > 0 ){ //      eater.set( 'keys', eater.keys - 1 ); //   this.game.setCell( this, 'Empty' ); //      this.game.playSound('door_default') } //  eat  ,     false,    //       .       , //           ,    . return false; } }; } )(window.R); 

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

बम और विस्फोट

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

संख्याओं को पर्याप्त रूप से देखने के बाद, मैंने विस्फोटों के पैटर्न और दो मैट्रिक्स को घटा दिया। मैट्रिक्स को पड़ोसी कोशिकाओं पर आरोपित किया जाता है, और जहां संख्या शून्य से अधिक होती है, एक विस्फोट वस्तु मैट्रिक्स से संख्या के अनुरूप एनीमेशन के साथ रखी जाती है। यदि पहले से ही एक विस्फोट हुआ था, तो उसके एनीमेशन में मैट्रिक्स से एक नंबर जोड़ा जाता है, जिसके बाद अधिकतम (5, एनीमेशन) किया जाता है।
1) बम के बाद क्षण का मैट्रिक्स गोली या पड़ोसी विस्फोट से छुआ है:

 0, 0, 0, 0, 0, 2, 5, 4, 5 

इस समय, बम अभी भी एक वस्तु और नेत्रहीन के रूप में जीवित है।

2) अगले उपाय में, मैट्रिक्स को सुपरिम्पोज किया गया है:

 5, 4, 5, 4, 3, 2, 0, 0, 0 

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

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

वास्तव में, खेल में कई विस्फोट होते हैं:
एक विस्फोट कारतूस से धुआँ, एक वस्तु का विनाश, बम विस्फोट, से टेलीपोर्टेशन, (यहाँ विस्फोट का एनीमेशन रिवर्स ऑर्डर में जाता है)

टेलीपोर्ट

Teleport वास्तव में एक Teleport की तरह काम करता है। नक्शे के एक हिस्से से दूसरे हिस्से में रोबो ले जाता है। रोबो इनपुट बिंदु पर भौतिक हो जाता है, और आउटपुट बिंदु पर वापस भौतिक हो जाता है। यदि यह दाईं ओर से प्रवेश करता है, तो यह बाईं ओर से बाहर निकलता है। दिलचस्प मामले तब शुरू होते हैं जब निकास बिंदु पर वांछित निकास अवरुद्ध हो जाता है, कभी-कभी निकास के सभी पक्ष बंद हो जाते हैं, और कभी-कभी निकास बिंदु विस्फोट हो सकता है। टेलीपोर्टर्स आवश्यक रूप से जोड़े में जुड़े नहीं हैं, उन्हें लूप किया जा सकता है और बड़ी संख्या में आउटपुट। मेरे कार्यान्वयन में, मैंने दूसरे टेलीपोर्ट में बाहर निकलने और नहीं करने का अवसर बनाया, लेकिन यह भविष्य के लिए है, जब मैं अपने विचार से खेल बनाऊंगा। एमुलेटर पर, मैंने इन सभी राज्यों की जाँच की और लिखा कि क्या होता है। अनुकूलन का प्यार मुझे कोडांतरक से मिला, इसलिए मैंने प्रारंभिक अवस्था -> प्रारंभिक स्थिति का निर्माण किया और एक सशर्त संचालक के बिना एक अभिव्यक्ति के आउटपुट सेल की पसंद को कम कर दिया। यह एक अभिव्यक्ति लेने का खेल था, इस मामले में यह उचित नहीं है, लेकिन जब से मैंने समय बिताया, मैंने इसे छोड़ दिया। वास्तव में, यह पता चला है कि हमें वर्तमान दिशा के xor संचालन को 11 | 11 | 11 | 10 के साथ करने की आवश्यकता है।
हमारे पास एक इनपुट दिशा है। मान लीजिए हमने दाईं ओर प्रवेश किया, जो दिशा 2 से मेल खाती है (दाईं ओर प्रवेश किया, फिर बाईं ओर गया)। एल्गोरिथ्म कोशिकाओं 2 (बाएं), 1 (नीचे) (10 ^ 11 = 01), 3 (ऊपर) (01 ^ 10 = 11), 0 (दाएं) (11 ^ 11 = 0) की कोशिश करेगा, जिसके बाद यह मूल को दिशा लौटाएगा राज्य (मामले में सभी आउटपुट अवरुद्ध हैं)।

एक एल्गोरिथ्म के रूप में, यह इस तरह दिखता है:

 var tryCell, i; for( i = 0; i < 4; i++ ){ tryCell = this.game.getCell( R.addDirection( this.teleportX, this.teleportY, obj.direction ) ); if( tryCell.is( 'Empty' ) ) break; obj.direction = obj.direction ^ ( 3 - i % 2 ); } 

लावा।

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

तकनीकी हिस्सा है

गेम कोड को तार्किक मॉड्यूल में विभाजित किया गया है, जिनमें से मुख्य हैं: नियंत्रक, दृश्य, स्प्राइट मैनेजर, कीबोर्ड हैंडलर, ऑब्जेक्ट्स (प्रत्येक व्यक्तिगत ऑब्जेक्ट और ऑब्जेक्ट फैक्ट्री)।

मॉडल को मुख्य नियंत्रक के साथ मिलाया जाता है, और ऑब्जेक्ट स्वयं छोटे नियंत्रक होते हैं जो केवल उनके व्यवहार के लिए जिम्मेदार होते हैं। अलग-अलग, एक दृश्य है जो कैनवस को इनिशियलाइज़ करता है, स्प्राइट अपडेट को मॉनिटर करता है, प्लेइंग फील्ड को स्क्रॉल करता है और वांछित स्थिति में आवश्यक छवि खींचने के लिए R.sprites से अनुरोध करता है।

प्रारंभ में, यह मुझे लगा कि पूरे खेल के मैदान को छांट कर देख रहा हूं कि कोई वस्तु जीवित थी या नहीं, यह सर्वोत्तम दृष्टिकोण नहीं है। तो सक्रिय वस्तुओं की सूची का जन्म हुआ। दुनिया के कदम में, केवल उनके व्यवहार को संसाधित किया जाता है।

कार्ड के साथ काम करने के लिए सामान्य कार्य, जैसे:
स्वैप - दो वस्तुओं की अदला-बदली। सक्रिय रूप से इस्तेमाल किया जब एकल वस्तुओं (कदम, एकल शॉट, एनपीसी) चलती
getCell (x, y) - दिए गए पद के साथ एक वस्तु लौटाएगा
getCell (obj) -> निर्देशांक obj.x, obj.y में स्थित ऑब्जेक्ट लौटाएगा

setCell (x, y, obj, data) - दी गई स्थिति में ऑब्जेक्ट डालता है। ओब्ज या तो एक अन्य वस्तु या एक वस्तु का नाम हो सकता है (उदाहरण के लिए, 'विस्फोट')। वस्तु के नाम के मामले में, वस्तुओं का कारखाना कहा जाएगा।
setCell (obj1, obj2, data) -> वही करता है, केवल निर्देशांक obj1.x से बाहर फाड़ दिए जाते हैं, obj1.y

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

स्प्राइट

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

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

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

एक अलग अध्याय एक स्प्राइट पैलेट का हकदार है।

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

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

निष्कर्ष

खेल में अभी भी कुछ खामियां हैं।

योजनाएं:

• बमों के एक समूह के विस्फोट को समाप्त करने के लिए।
• पुराने ब्राउज़रों के लिए समर्थन करें।
• मूल खेल से खेल मैदान और संख्याओं के आसपास सामान्य पृष्ठभूमि के रंगों को बढ़ाएं।
• जीवन का अंत करें (अब यह पहले से ही एक पुराना स्कूल है, लेकिन खिलौना स्वयं उन दिनों से है)।
• मोबाइल प्लेटफ़ॉर्म के लिए टच कंट्रोल सपोर्ट खत्म करें, टीवी रिमोट कंट्रोल से खेलने के लिए स्मार्ट टीवी सपोर्ट बनाएं।
• ठीक है, ज़ाहिर है, अंतिम कार्टून को पोर्ट करें।

दूर की योजनाओं में:

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

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