2010-06-11 24 views
13

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

  • एक्सिस & मित्र राष्ट्रों क्लोन,:

    मेरे मन में कुछ खेल है।

  • टेट्रिस क्लोन, संभवतः वास्तविक समय खिलाड़ी बनाम खिलाड़ी या खिलाड़ी बनाम कंप्यूटर मोड
  • ब्रेकआउट क्लोन, एक जोड़ी हथियारों और कण वेग

इन सब में साथ साथ , मेरे पास केवल कुछ उद्देश्यों हैं:

  • जावास्क्रिप्ट और एचटीएमएल 5 का उपयोग करें - इसे क्रोम, सफारी या शायद एक आईपैड पर चलाना चाहिए।
  • छोटे और सरल, फिर बिल्ड-अप सुविधाओं को शुरू करें।
  • गेम डिज़ाइन और कार्यान्वयन के बारे में कुछ नया सीखें।

तो मेरी प्रश्न हैं:

  1. आप इन खेलों कैसे लागू होगा?
  2. क्या आपके पास कोई तकनीकी सिफारिशें हैं?
  3. यदि आपने इन खेलों को लिखा है, तो सबसे कठिन हिस्सा क्या था?

N.B. मैं भी प्रथम सिद्धांतों से शुरू करना चाहता हूं - यदि आप ढांचे/पुस्तकालय की अनुशंसा करते हैं, तो मैं इसके पीछे कुछ सिद्धांत या कार्यान्वयन विवरण की सराहना करता हूं। ये खेल काफी अलग हैं कि मुझे प्रत्येक से कुछ नया सीखना चाहिए।

उत्तर

10

निर्भर करता है कि आप कितना स्क्रैच से शुरू करना चाहते हैं।अपने सीधा प्रश्नों का उत्तर देने के लिए:

1) आप इन खेलों को कैसे लागू करेंगे?

ए: जावास्क्रिप्ट + कैनवास। कैनवास एचटीएमएल 5 से 2 डी ड्राइंग सतह है। डेस्कटॉप मशीनों पर प्रदर्शन बहुत अच्छा है, आईओएस और एंड्रॉइड डिवाइस (इस पोस्ट की तारीख के अनुसार) पर इतना अच्छा नहीं है। यदि मोबाइल आपकी सबसे बड़ी चिंता है, तो आपको उन उपकरणों पर GPU को ट्रिगर करने वाले डीओएम और CSS3 3 डी ट्रांसफॉर्म का उपयोग करने की आवश्यकता है।

2) क्या आपके पास कोई तकनीकी सिफारिशें हैं?

ए: इस तरह के पहले प्रश्न से उत्तर दिया गया है। जावास्क्रिप्ट एक जरूरी है, लेकिन मैं jQuery को अनदेखा कर दूंगा। आप HTML5 डिवाइस को लक्षित कर रहे हैं, इसलिए विरासत ब्राउज़र की क्षतिपूर्ति करने की आवश्यकता नहीं है। जैसा कि आप शायद कैनवास का उपयोग कर रहे हैं, या तो डीओएम इंटरैक्शन पर सुचारू करने की आवश्यकता नहीं है। कुछ उच्च स्तरीय पुस्तकालय हैं जो आसानी से कैनवास के साथ बातचीत कर रहे हैं, जैसे Easel.js। वेबसाकेट द्वि-दिशात्मक स्ट्रीमिंग संचार के लिए उपयोगी हैं। और Box2D भौतिकी इंजन के लिए उपयोगी है। स्थानीय संग्रहण स्तर की प्रगति जैसी चीजों के लिए सरल कुंजी/मूल्य स्ट्रिंग डेटा है, लेकिन किसी भी जटिल के लिए, आप WebSQL डीबी चाहते हैं। बड़ी बाइनरी संपत्तियों के लिए आप फ़ाइल सिस्टम एपीआई देखना चाहेंगे। अंत में, वेबजीएल से डरो मत, क्योंकि यह 2 डी गेम के लिए बेहद तेज़ और उपयोगी है।

3) सबसे कठिन हिस्सा क्या है?

ए: लगभग निश्चित रूप से सबसे कठिन हिस्सा डिबगिंग है। वेबकिट के डेवलपर टूल्स इसे आसान बना सकते हैं, इसलिए उनके बिना घर न छोड़ें।

+3

यह पोस्ट पुराना है, इसलिए मैं अपडेट करना चाहता था। एचटीएमएल 5 + कैनवास अब मोबाइल उपकरणों पर बहुत अच्छा काम करता है जो एक या दो साल के भीतर हैं, मेरे पास एक आईफोन 4 है (जो आज के मानकों से पुराना हार्डवेयर है) लेकिन मैं अपने गेम को उचित चलाने के लिए प्राप्त कर सकता हूं। जब मैं कुछ भी नया चलाता हूं, तो मुझे शानदार प्रदर्शन मिलता है। – Unome

2

ChromeExperiments पर एक नज़र डालें उदाहरण एचटीएमएल 5, कैनवास, एसवीजी, और जावास्क्रिप्ट सहित नवीनतम खुले मानकों का उपयोग कर दुनिया भर से उदाहरण हैं।

3

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

उस समय कैनवास में पाठ के लिए कोई वास्तविक समर्थन नहीं था, इसलिए मेरा समाधान excanvas का उपयोग करके काम नहीं करता था, लेकिन सफारी और फ़ायरफ़ॉक्स पर ठीक काम करता था।

तो, आप देखना चाहते हैं कि आप किस HTML5 फीचर्स का समर्थन करना चाहते हैं, जैसे अंतर्निहित डेटाबेस, और फिर तय करें कि आप कौन से ब्राउज़र पर काम करने के इच्छुक हैं।

इन्हें कैसे कार्यान्वित किया जाए, इस पर निर्भर करता है कि आप ग्राफिक्स कैसे बनाना चाहते हैं, और यदि आप 3 डी ग्राफिक्स करना चाहते हैं, तो बिटमैप्ड स्प्राइट्स काम नहीं करेंगे।

4

स्क्रीन के चारों ओर बहुत सी चीजें और सुंदर, धीमी, वेक्टर ग्राफिक्स के लिए एसवीजी को स्थानांतरित करने के लिए बस कैनवास का उपयोग करें।

कैनवास के साथ क्या किया जा सकता है और फिर इसके साथ खेलने के लिए आपको सबसे पहले चीजों में से एक speed test प्रोग्राम लिखना है।

मैं Canvas & writing HTML5 games

+0

लिंक सड़कों के दो मामले ... क्या आप लिंक अपडेट कर सकते हैं? वे दोनों दिलचस्प लग रहा है। – Josien

+0

@ जोसियन लिंक अपडेट –

+0

ग्रेट, धन्यवाद !! – Josien

3

टॉम यहाँ Scirra से (Construct 2 game maker) के बारे में एक ब्लॉग पोस्ट में लिखा था। हम कन्स्ट्रक्ट 2 नामक एक HTML5 गेम इंजन बनाते हैं, यह पूरी तरह से एचटीएमएल 5 फ्लैश में निर्यात करता है!

निर्माण 2 आपके गेम में तर्क जोड़ने के लिए एक ईवेंट आधारित सिस्टम का उपयोग करता है और आपके लिए दोहराव/कठिन लेगवर्क करता है। उदाहरण के लिए कुछ विज़ुअल एडिटर के बिना ऑब्जेक्ट्स में पॉलीगॉन टकराव जोड़ना कभी-कभी करना मुश्किल होता है।

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

+0

धन्यवाद, भले ही यह कुछ समय हो गया है, क्योंकि मैंने सवाल पूछा था, फिर भी मैं खेल के अपने स्वयं के प्रतिलिपि लिख रहा हूं। एक नज़र डालेंगे! –

+0

@ जेफ कोई समस्या नहीं हमें बताएं कि आप इसके साथ कैसे चलते हैं –

3

processing.js को न भूलें, जो एक बहुत अच्छी तरह से परीक्षण किया गया पूर्ण-स्टैक ग्राफिक्स और इंटरएक्टिविटी जावास्क्रिप्ट फ्रेमवर्क है, जिसमें अधिकांश I/O, ध्वनियां, ग्राफिक्स और यहां तक ​​कि वेबजीएल के लिए पर्याप्त (यदि व्यापक नहीं है) समर्थन है। यदि आप वेनिला प्रोसेसिंग कोड लिखते हैं, जो मूल रूप से जावास्क्रिप्ट में संकलित जावा सिंटैक्स है, तो आप देशी Processing पर्यावरण सहित कई ओपन-सोर्स डीबगर्स का उपयोग कर सकते हैं। इसके अलावा, आप किसी भी अन्य जावास्क्रिप्ट कोड को एकीकृत कर सकते हैं जिसमें आपके पास शामिल करने का मन है।

यहां a guide for the JavaScript developer है, जो आप जानना चाहते हैं उससे अधिक समझाते हैं।

इसे देखें। अच्छी चीज़।

1

एक अच्छा सवाल जब मैंने एचटीएमएल 5 सीखना भी शुरू किया, तो मैं इस सवाल पर भी आया, आखिर में बहुत सारे शोध के बाद मुझे कुछ इंजन या ढांचे का उपयोग करके सबसे अच्छा तरीका मिला। मैंने कैनवास सीखा और अपना खुद का game बनाया लेकिन इसमें तर्क के घंटों और 100+ लाइन कोड शामिल थे।

स्किरा के साथ बेहतर जाना, यह आपके काम को कम कर सकता है।

2

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

http://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias%3Daps&field-keywords=html5%20game

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

0

मैं वर्तमान में ब्लॉग पोस्ट की एक श्रृंखला पर काम कर रहा हूं, यह बताते हुए कि भौतिकी के लिए EaselJS और Box2D का उपयोग करके जावास्क्रिप्ट गेम कैसे बनाया जाए। Here's Part 1

संबंधित मुद्दे