मैं जेएस गेम को कैसे डाउनलोड कर सकता हूं?

Question

मैं एक ही .htmlफाइल में HTML और जावास्क्रिप्ट को एक साथ रख सकता हूं , लेकिन छवियों को अलग-अलग फाइल करने की आवश्यकता है। मेरे दिमाग में आने वाला एकमात्र समाधान उपयोगकर्ता को एक .zipफ़ोल्डर देना है।

हालांकि यह बहुत सुंदर नहीं है ... मैं यह कैसे कर सकता हूं?

Comments

"मानक" जेएस गेम को डाउनलोड करने योग्य नहीं है; वे केवल एक ब्राउज़र में काम करते हैं। ऐसा करने के लिए कुछ अस्पष्ट तरीके हो सकते हैं, लेकिन स्पष्ट रूप से इसे मजबूर क्यों करें: नौकरी के लिए सही उपकरण का उपयोग करें।

— झॉकिंग

Answer 1

आप डेटा ड्यूरल-सिंटैक्स का उपयोग करके HTML दस्तावेज़ में छवियां एम्बेड कर सकते हैं जो एक छवि के src- विशेषता के रूप में द्विआधारी छवि डेटा के बेस 64 प्रतिनिधित्व को डालने की अनुमति देता है। यह किसी अन्य प्रकार की मीडिया फ़ाइल पर भी काम करता है।

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9EFBAoYMhVvMQIAAAAtSURBVHicY/z//z8DHoBH+v///yy4FDEyMjIwMDDhM3lgpaEuh7gTEzDiDxYA9HEPDF90e5YAAAAASUVORK5CYII=">

जब आप CSS स्टाइलशीट का उपयोग करते हैं, तो आप जावास्क्रिप्ट में इन पूरी तरह से प्रक्रियात्मक बना सकते हैं।

Comments

बेस 64 को अधिक जगह

— मिलती है

@TobiasKienzler: 64 * 4 = 256 का अर्थ यह नहीं है कि किसी एकल बाइट को एनकोड करने के लिए 4 गुना डेटा लिया जाए, बल्कि यह कि आप प्रत्येक बाइट में प्रत्येक 8 में से केवल 6 बिट्स (2 ** 6 = 64) का उपयोग करते हैं। इसका मतलब है कि 3 बाइट्स को एनकोड करने के लिए 4 बाइट्स लगते हैं, जो 33% साइज बढ़ाता है (जब जरूरी हो तो पैडिंग नहीं गिनना)। मुश्किल से चौगुनी। एकमात्र मामला जिसमें डेटा का आकार चौगुना होता है, जब एकल बाइट को एन्कोडिंग किया जाता है, जिसमें 2 डेटा बाइट्स और 2 पैडिंग बाइट्स की आवश्यकता होती है।

— पांडा पायजामा

@PandaPajama मेरा बुरा, मेरा कहना है कि "एक चौथाई बढ़ जाता है" (2/8 = 1/4 लहरों के कारण)। हालांकि जाहिर है मैंने वैसे भी एक गलती की है, जो 33% आप प्राप्त करते हैं वह सही है। फिर भी, यह एक ओवरहेड है, ईमेल अटैचमेंट्स से "प्रसिद्ध"

— टोबीस किंजलर

क्या आधार 64 इनलाइन एन्कोडिंग अन्य संसाधनों जैसे .wav, .ogg, .m4a और सामान्य रूप से किसी भी फ़ाइल के लिए काम करेगा?

— DrZ214

@ DrZ214 मैंने कोशिश नहीं की है, लेकिन AFAIK को कहीं भी काम करना चाहिए जहां एक URL काम करता है।

— फिलीपींस

Answer 2

बस सभी फाइलों को एक .zip फ़ाइल में रखना एक व्यवहार्य समाधान नहीं है क्योंकि अधिकांश वेब-एप्लिकेशन को एक वेब-सर्वर की आवश्यकता होती है ताकि वे HTTP- अनुरोधों के माध्यम से संसाधनों तक पहुंच सकें। कुछ सिस्टम पर आप file://URI- स्कीम के माध्यम से फाइल एक्सेस कर सकते हैं , लेकिन यह सुरक्षा-कारणों की वजह से हर जगह काम करने की गारंटी नहीं है और यह AJAX अनुरोध जैसी चीजों के लिए विफल हो जाएगा।

यह एक बहुत ही सरल ऐप के लिए काम कर सकता है जहां आपके पास अधिकांश संसाधन इनलाइन हैं, लेकिन यह वास्तव में वह तरीका नहीं है जिसे मैं किसी को सुझाऊंगा। हालांकि विकल्प हैं, जैसे:

एक देशी आवेदन बनाएँ

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

यह एक " पैकेज और किया गया " तरीका नहीं है, हालांकि .. आपको संभवतः अपने आवेदन के कुछ हिस्सों को फिर से लिखना होगा और विभिन्न लोडर लिखना होगा (उदाहरण के लिए। डेस्कटॉप ऐप के साथ आप फाइलों को सिस्टम के माध्यम से लोड करेंगे, जबकि आप HTTP का उपयोग करते हैं। एक ब्राउज़र / ऑनलाइन खेल में -Restsests)।

अपने ऐप की ऑफ़लाइन पहुंच की अनुमति देने के लिए HTML5 सुविधाओं का उपयोग करें

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

उन संसाधनों के लिए जिन्हें अतुल्यकालिक रूप से लोड किया जा रहा है (AJAX) आपको अलग-अलग लोडिंग तंत्र को लागू करना होगा। आप ऑफ़लाइन उपयोग के लिए इन संसाधनों को बचाने के लिए स्थानीय-भंडारण का उपयोग कर सकते हैं।

Comments

नोड-वेबकिट बहुत बड़ा है, और यदि आप इसे शामिल करते हैं, तो आप "हेल्लो वर्ल्ड" जेएस गेम के लिए 60 एमबी की तरह कुछ करेंगे।

— ashes999

यह सही उत्तर है यदि आपका आवेदन दूर से भी जटिल है।

— वॉन हिल्ट्स

@ ashes999 मैं आपसे सहमत हूं, फिर भी 60MB आजकल डेस्कटॉप ऐप के लिए बहुत छोटा है। बहुत सारे सामान्य-प्रयोजन के ढांचे कुछ फ़ाइल-आकार के ओवरहेड बनाते हैं (एकता को एक प्रमुख उदाहरण के रूप में लेते हैं)। भंडारण के बढ़ते स्थान के साथ, सुविधा फ़ाइल-आकार पर जीतती है;)

— 19

@bummzack मैं असहमत नहीं हूं। यह सिर्फ ~ 100 केबी जेएस गेम लेने के लिए निराशाजनक है और 60 एमबी बन जाता है, इससे पहले कि आप किसी भी कला या ऑडियो को जोड़ दें। उम्मीद है कोई बेहतर तरीका लेकर आएगा। +1 btw

— ashes999

हालांकि इस उत्तर में बहुत सी उपयोगी जानकारी है, लेकिन मुख्य वाक्य स्पष्ट नहीं है। आप जावास्क्रिप्ट फ़ाइलों में गेम डेटा डाल सकते हैं, आधुनिक ब्राउज़रों को कम से कम कुछ एमबी जावास्क्रिप्ट को संभालने में सक्षम होना चाहिए, और जब तक आप एक कैनवास से छवि डेटा को पढ़ने की कोशिश नहीं करते हैं, तब तक छवि फ़ाइलों का उपयोग करने में कुछ भी गलत नहीं है। । पिछली बार मैंने जाँच की थी, सभी आधुनिक ब्राउज़र file:///प्रोटोकॉल को एक्सेस करने की अनुमति देते हैं localStorage, जो बचत के लिए काम करता है। यह एक HTML गेम में कुछ भी करने के लिए स्केल करेगा, ऑनलाइन गेम को छोड़कर।

— आआआआआआआआआआआ आआआआआ

Answer 3

गेम को ऑफ़लाइन चलाने और कुछ मूल कार्यक्षमता का आनंद लेने के लिए क्रोम-आधारित समाधान के लिए, आप Chrome ऐप बनाने पर विचार कर सकते हैं ।

इस तरह, आप इसे क्रोम वेब स्टोर में जोड़ा दृश्यता के लिए वितरित कर सकते हैं, आप कुछ शक्तिशाली एपीआई का आनंद ले सकते हैं , और इसे स्टैंडअलोन ऐप की तरह बना सकते हैं ।

बेशक, क्रोम की आवश्यकता है।

Comments

फ़ायरफ़ॉक्स (और फ़ायरफ़ॉस ओएस) में OpenWebApps ( developer.mozilla.org/en/Apps/Quickstart/Build/… ) है, जो इस प्रकार है: वेब एप्लीकेशन आईडी जिसे एक एप्लीकेशन के रूप में इंस्टॉल किया गया है। दोनों समाधानों को एक सामान्य मानक में परिवर्तित किया जाना चाहिए: html5doctor.com/web-manifest-specification । साथ ही देखें: code.google.com/p/chromium/issues/detail?id=366145

— ysdx

@ysdx आपके द्वारा उल्लिखित कन्वर्ज़िंग मानक उस चीज़ के लिए है जिसे Chrome "होस्ट किए गए ऐप्स" के रूप में कहता है, एक सच्चे स्व-निहित, डाउनलोड करने योग्य ऐप के विपरीत, जिसे "पैकेज्ड ऐप" भी कहा जाता है। समान शब्दावली फ़ायरफ़ॉक्स पर लागू होती है। दुर्भाग्य से, पैक किए गए एप्लिकेशन आर्किटेक्चरल रूप से बहुत अलग हैं और अभिसरण की संभावना नहीं है।

— Xan

@Xan एक पैकेज्ड ऐप क्या है? क्या दोनों 'होस्टेड' और 'पैकेज्ड' ऐप फ़ायरफ़ॉक्स और क्रोम ऐप स्टोर में उपलब्ध हैं?

— 20

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

— Xan

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

— रेयान

Answer 4

वैसे यह इस बात पर निर्भर करता है कि आप वास्तव में कितना काम करना चाहते हैं। वेब एपीआई के वर्तमान सेट का उपयोग आप कर सकते हैं:

• बनाएँ प्रगतिशील वेब एप्लिकेशन (PWA) (दुर्भाग्य से PWAs केवल मोबाइल फोन और क्रोम ओएस के लिए हैं, लेकिन मैंने सुना है कि डेस्कटॉप के लिए Chrome जल्द ही यह जल्द ही समर्थन करना होगा। अभी के लिए, यह एक ध्वज के पीछे छुपाता है) के बाद से पुराने आवेदन कैश अब अपदस्थ है
• सब कुछ टेक्स्ट ( चित्र और ऑडियो ) में परिवर्तित करें । और या तो वेब पेज को बचाने के लिए उपयोगकर्ता को प्रोत्साहित करें (जैसे कि Cmd+Sया Ctrl+Sब्राउज़र में) या पेज को PWA के रूप में कैश करें। बस पता है कि, मोबाइल पर, dataURI बहुत अच्छा प्रदर्शन नहीं करते हैं।
• आप Chrome ऐप बना सकते हैं , लेकिन यह क्रोम ओएस पर चलने वाले किसी भी क्रोम संस्करण पर काम नहीं करेगा । इसका मतलब है कि आपके लिए इसके बजाय एक एक्सटेंशन बनाना बेहतर है
• अधिकांश गेम 10 एमबी के अंतर्गत आते हैं, इसके साथ ही आप अपने सभी गेम के डेटा को स्थानीय भंडारण में कैश कर सकते हैं। आप यह कैसे करते हैं यह आप पर निर्भर है: आप उपरोक्त कार्य कर सकते हैं (पाठ में सब कुछ बदल दें), बूँद आपी का उपयोग करें, आदि। हालांकि मैं इसे बहुत हतोत्साहित करता हूं, क्योंकि कुछ मोबाइल फोन स्मृति से आपके पूरे खेल को साफ कर सकते हैं। जिसका अर्थ है कि आपको यह जांचना होगा कि सब कुछ ठीक है (यदि आपका कोड अभी भी मेमोरी में है), जिसका अर्थ है कि अब लोड बार और उपयोगकर्ता फोन को क्रैश कर सकता है। यदि आप हालांकि इस रास्ते से नीचे जाने का विकल्प चुनते हैं, तो आप निश्चित रूप से लोकलफ्रेज का उपयोग करके लाभान्वित होंगे
• इलेक्ट्रॉन या NW.js का उपयोग करके , आप डेस्कटॉप ऐप बनाने के लिए अपने html, css, और js का उपयोग कर सकते हैं। इसी तरह के तरीकों का इस्तेमाल मोबाइल ऐप बनाने के लिए भी किया जा सकता है ( कॉर्डोवा या कॉर्डोवा पर निर्भर फोनगैप की तरह कुछ का उपयोग करके )। यदि आप चाहते हैं तो आप ऐसा करेंगे और उपयोगकर्ता को पूरा गेम डाउनलोड करने की अनुमति देगा।
• यदि आप अभी भी एक zipफ़ाइल के साथ जारी रखना चाहते हैं , तो JSZip चेकआउट करें । मुझे नहीं पता कि आप इसका उपयोग कैसे कर सकते हैं, लेकिन मुझे यकीन है कि कोई व्यक्ति एक अच्छा विचार ले सकता है (शायद आपकी फ़ाइल को ज़िप करें और फिर बाइनरी डेटा को स्ट्रिंग में परिवर्तित करें और इसे इनलाइन एचटीएमएल में रखें)।
• यह अजीब हैक आपको किसी भी टेक्स्ट डेटा को डेटा ब्लॉक के रूप में जाना जाता है। यह सिर्फ एक और उपकरण है जिसका उपयोग आप एक HTML फ़ाइल में परिसंपत्तियों को एम्बेड करने के लिए कर सकते हैं।