अर्कानॉइड डीएक्स-बॉल, या पुराने खेल के नए जीवन की रिवर्स इंजीनियरिंग

कंप्यूटर ग्राफिक्स के अनौपचारिक दिन के सभी निवासियों को बधाई! इस दिन मैं आपको एक पुराने खेल के ऑनलाइन संस्करण के बारे में बताना चाहता हूं।

शायद बहुत से लोग खेल डीएक्स-बॉल से परिचित हैं, मैंने इसे एक पूर्वस्कूली उम्र में खेला था, और स्कूल में रहते हुए मैं इसके बाद कंप्यूटर विज्ञान में सबक ले रहा था। इसलिए, मुझे इसे HTML5 में करने में दिलचस्पी थी।

काम के बारे में थोड़ा

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

आइए खेल की संरचना का विश्लेषण करें:

* .एसपीएक्स फाइलें खेल की रेखापुंज पृष्ठभूमि हैं, जैसे कि बोनस के विवरण के साथ प्रारंभिक छप स्क्रीन, और अंतिम "उच्च स्तरीय"। मैंने उन्हें अलग करना शुरू नहीं किया, लेकिन आप लेखों की एक दिलचस्प श्रृंखला में पीसीएक्स डिवाइस के बारे में पढ़ सकते हैं, वहीं हब पर
* .mds - MIDI संगीत फ़ाइलें, savex ने मुझे उन्हें * .mp3 में बदलने में मदद की।
Default.bds फ़ाइल सभी 50 स्तरों पर ईंटों के स्थान पर जानकारी संग्रहीत करती है
एक स्तर पर, 20 ² ईंटों को इस फ़ाइल में बाइट लिखा गया है।
इससे हमें 20 ² × 50 = 20 KB मिलता है
* .bbk - रेखापुंज फोंट की फाइलें, और अन्य ग्राफिक्स (ईंटें, रैकेट, आदि)
मुझे यह जानकारी नहीं मिली कि यह फ़ाइल कैसे व्यवस्थित की गई है, इसलिए मुझे इसे स्वयं पता लगाना था, और यहाँ मुझे पता चला है:
इस प्रकार की फ़ाइलों में कुछ इस तरह होता है:


^{छवि क्लिक करने योग्य है।}
इस फ़ाइल की संरचना Default.bds की तुलना में थोड़ी अधिक जटिल है, यह बदले में वर्णों का वर्णन करती है,
फ़ाइल का पहला 4 बाइट फ़ाइल हैडर है, इसमें फ़ाइल के कितने वर्ण (चित्र) हैं, इसके बारे में जानकारी है।

शीर्ष लेख के बाद वर्णों (चित्रों) का क्रमिक विवरण होता है, जैसा कि स्क्रीनशॉट में दिखाया गया है, Sysfont.sbk फ़ाइल में 94 वर्ण हैं। पहले चरित्र की चौड़ाई और ऊंचाई 4 वें और 8 वें बाइट्स में निर्दिष्ट हैं। 12 वीं बाइट एएससीआईआई तालिका से वर्ण संख्या है, 0x41 = ए, यदि यह 0x00 है, तो यह एक चरित्र नहीं है, लेकिन किसी प्रकार की तस्वीर है। अगले कुछ और बाइट्स हैं, हमारे मामले में 130 (13 × 10), 17 वें बाइट से शुरू - यह प्रतीक रेखापुंज है (आकृति में हरे रंग में दर्शाया गया है)। फिर यह सब 93 बार दोहराया जाता है (एक बाइट के साथ शुरू होता है जो चरित्र की चौड़ाई को दर्शाता है)।

छवियाँ (वर्ण) नीचे से ऊपर की ओर , बाएं से दाएं 1 बाइट = 1 पिक्सेल से खींची जाती हैं, बाइट मान रंग संख्या है।
जैसा कि मैं इसे समझता हूं, खेल 2 रंग मोड का उपयोग करता है, पहला गेम में ही उपयोग किया जाता है, और दूसरा केवल स्प्लैश स्क्रीन में।
यहां 2 योजनाएं हैं, प्रत्येक रंग में 2 नंबर हैं, शीर्ष रंग में दिसंबर है और हेक्स में नीचे है:


यहाँ पहली स्कीम का उपयोग करते हुए Sysfont.sbk फ़ाइल के पहले 3 वर्णों का एक उदाहरण दिया गया है:


अरे हाँ, दोनों तालिकाओं में शून्य एक पारदर्शी रंग है, और 224 से 231 तक की पहली योजना में रंग गतिशील हैं, अर्थात् ऐसा एनीमेशन बनाने के लिए प्रत्येक फ्रेम को एक रंग द्वारा स्थानांतरित किया जाता है।

लेकिन यहां एक समस्या उत्पन्न होती है, कुछ वर्ण, जैसे कि क्यूपज, बाकी की तुलना में कम होना चाहिए, और एपोस्ट्रोफ और अन्य वर्ण अधिक होने चाहिए, लेकिन चूंकि सभी वर्णों के अलग-अलग आकार होते हैं, वे नीचे से जुड़े होते हैं।



इस समस्या को हल करने के लिए, एक विशेष बाइट है जो प्रतीक के बाद जाता है, (पहले स्क्रीनशॉट में इसे नीले रंग में रेखांकित किया गया है)।
Gj वर्णों के लिए, यह बाइट 0xFD = 253 है। ^ '^' के लिए यह बाइट 0x08 = 8 है। यह ठीक चरित्र के ऑफसेट शेष के सापेक्ष है, लेकिन नकारात्मक ऑफसेट के बजाय इतनी बड़ी संख्या क्यों है? तथ्य यह है कि यह नकारात्मक संख्याएं लिखने का एक रूप है, एक बाइट में 128 नकारात्मक और 128 सकारात्मक संख्याएं हैं। यदि हमारी बाइट 128 से कम है, तो हम इसे नहीं छूते हैं, और यदि यह अधिक है, तो हम बस इसे 256 से घटाते हैं।
और हमें एक उत्कृष्ट परिणाम मिलता है:


खेल शुरू करने से पहले, सभी चित्र (प्रतीक) खेल के रूप में एक ही कैनवास में खींचे जाते हैं, मैं उन्हें चित्रों के रूप में सहेजता हूं,
वह है: char[...].img.src = canvas.toDataURL("image/png");
चूंकि putImageData () drawImage () की तुलना में बहुत धीमा है और यह केवल माइनस नहीं है।
putImageData, शीर्ष पर छवि को ओवरले नहीं करता है, लेकिन इसे पूरी तरह से बदल देता है।

खेल का विश्लेषण करने की प्रक्रिया में, मैंने दो गुप्त बोनस खोजे जो मूल खेल में उपयोग नहीं किए गए हैं :-)



खेल में सभी एनीमेशन requestAnimationFrame का उपयोग करके अनुकूलित किया गया है, लेकिन विभिन्न डिवाइस अलग-अलग FPS मान देते हैं। एक ही गति से गेंद को उड़ाने के लिए, एफपीएस की परवाह किए बिना, मैंने गुणांक डेल्टा द्वारा गेंद की गति को गुणा किया, जिसकी गणना निम्न सूत्र द्वारा की गई थी: delta = 1000/fps/60; , मेरा लैपटॉप प्रति सेकंड लगभग 55 फ्रेम खींचने में कामयाब रहा, लेकिन यह समय-समय पर लटका रहा, और एक समय में 30 से अधिक फ़्रेमों को निगल लिया, क्योंकि इस ठंड के कारण, डेल्टा गुणांक की गलत गणना की गई थी और गेंद ने एक अनियंत्रित गति हासिल कर ली थी, इसलिए मैंने इससे छुटकारा पाने का फैसला किया और औसतन 4 के लिए एफपीएस का फैसला किया। सेकंड, इसलिए यह शायद ही अपडेट किया जाता है।

पिछले गेम में, डूडल जंप, मैंने उपयोगकर्ताओं को किसी भी वेबसाइट पर अपने आइफ्रेम को एम्बेड करने का अवसर दिया, जिसके परिणामस्वरूप 7000 से अधिक उपयोगकर्ताओं ने व्यक्तिगत ब्लॉग से लेकर स्टूडियो तक रिकॉर्ड करने के लिए पूरी तरह से अलग-अलग विषयों की तृतीय-पक्ष साइटों पर इस गेम को खेला।
इसलिए, डीएक्स-बॉल में मैं इस अवसर को दूर नहीं करता हूं, इसके अलावा, गेम को फ्लेक्सिबल रूप से साइट पर डालने के लिए कॉन्फ़िगर किया गया है।

सब कुछ की तरह, अगर आपकी राय में मैंने पहले कुछ भी नहीं बताया, तो सवाल पूछें, मैं निश्चित रूप से जवाब दूंगा।

खेल के लिए लिंक: DX-Ball.ru

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