अच्छे जावास्क्रिप्ट / HTML5 आधारित खेलों के उदाहरण [बंद]


37

अब जब फ्लैश को बड़े पैमाने पर एचटीएमएल 5 तत्वों (वीडियो, ऑडियो, कैनवस, आदि) के साथ बदल दिया जा रहा है, तो क्या वेब-आधारित गेमों का कोई अच्छा उदाहरण पूरी तरह से खुले मानकों (मतलब जावास्क्रिप्ट, एचटीएमएल और सीएसएस) पर बनाया गया है? मैं शुद्ध एचटीएमएल 5 के बहुत से उदाहरणों को देखता हूं जो केवल एक बार फ्लैश में थे (जैसे यहां सामान: http://www.html5rocks.com/ ) लेकिन कई गेम नहीं, एक डोमेन जो अभी भी फ्लैश पर हावी है। मैं उत्सुक हूं कि क्या संभव है और क्या सीमाएं हैं।


6
मैं आपको पहली पंक्ति छोड़ने की सलाह देता हूं - शीर्ष रेटेड उत्तर आपके प्रश्न का उत्तर नहीं देता है लेकिन आपके आधार से नाराज है;)
oberhamsi

जवाबों:


14

HTML5 के आसपास बहुत प्रचार है, लेकिन यह कहना है कि फ्लैश को बड़े पैमाने पर प्रतिस्थापित किया जा रहा है, यह एक ओवरस्टेटमेंट है। हालांकि वीडियो और ऑडियो टैग कर्षण प्राप्त कर सकते हैं, गेमिंग एक ऐसा क्षेत्र होगा जो लंबे समय तक चलता है, न केवल बेहतर टूलींग और प्रदर्शन के कारण, बल्कि इसलिए भी कि स्वफ़ फ़ाइलों को वितरित करने के आसपास बनाया गया एक व्यावसायिक ढांचा है, जो आसानी से नहीं होगा HTML और js के अनुकूल। एचटीएमएल 5 गेम जो मैंने कैनवस का उपयोग करते हुए देखे हैं, वे लगभग 7 साल पहले फ्लैश थे, और तब तक यानी 9 को व्यापक रूप से वितरित किया जाता है कि कैनवस एक व्यवहार्य विकल्प है, फ्लैश ने पहले से ही इसकी योजना बनाई है 3 डी और संभवतः हार्डवेयर त्वरण सुविधाएँ।


12
अगर Adobe को उनका एक्ट एक साथ नहीं आता है तो Flash को HTML5 द्वारा बदल दिया जाएगा और मैं व्यक्तिगत रूप से आंसू नहीं बहाऊंगा।
सिमोर जूल

@Simuri - मैं सहमत हूँ। मैंने पेशेवर रूप से उनके फ्लेक्स सामान का उपयोग किया है, और जिस तरह से सूरज जावा का प्रबंधन करता है, उसकी तुलना में, मैं कहूंगा कि Adobe बहुत अधिक है ... मैला (बेहतर शब्द की कमी के लिए)।
वीजी

2
मैं निश्चित रूप से सहमत हूं कि एडोब को अपने कार्य को एक साथ करने की आवश्यकता है। लेकिन HTML5 स्पष्ट रूप से केवल नवीनतम buzzword है (जैसे AJAX, Web2.0 पहले) और वास्तविक तकनीक नहीं जिसे आप अभी बाहर जाना चाहते हैं और अभी उपयोग करना चाहते हैं।
इयान

1
मैं असहमत हूं। IE9 के बारे में Microsoft की हाल ही में घोषणाओं के साथ IE5 HTML5 तकनीकों को गले लगाते हुए, केवल एक चीज जो वास्तव में गायब है वह एक सभ्य IDE है। और मैं आपको गारंटी देता हूं कि ड्रीमविवर और विजुअल स्टूडियो दोनों के पीछे के लोग यह जानने की कोशिश कर रहे हैं। यह शुरुआती दिन हो सकते हैं, लेकिन इन तकनीकों का उपयोग करने के बारे में सोचना शुरू करना है - और सर्वोत्तम प्रथाओं की स्थापना - अब है।
राइली कोराडिनी जूल

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

12

केवल ब्राउज़रों की नवीनतम फसल को आप कितनी दूर तक ले जा सकते हैं, यह जानने के हित में, मैंने और कुछ सहयोगियों ने क्वेक II के ओपन-सोर्स जावा पोर्ट को सफारी / क्रोम से क्रॉस-संकलित किया (यह कुछ बिंदु पर फ़ायरफ़ॉक्स पर भी काम करना चाहिए,) हालांकि यह शुरुआत में नहीं था, मोटे तौर पर प्रदर्शन कारणों से)। परियोजना यहां है: http://code.google.com/p/quake2-gwt-port/

इसे चलाने और इसे चलाने के लिए अभी भी कुछ देखभाल और खिलाने की आवश्यकता है (जैसे, WebGL अभी भी किसी भी शिपिंग ब्राउज़र में डिफ़ॉल्ट रूप से सक्षम नहीं है), लेकिन हमने यहां एक वीडियो अपलोड किया है: http://www.youtube.com/watch?v = XhMN0wlITLk (खेद है कि यह बहुत गहरा है - गामा मुद्दे बने हुए हैं) और आप हमारे Google I / O को यहां देख सकते हैं: http://code.google.com/intl/fr-FR/events/io/2010/session/gwt -html5.html

मुझे नहीं पता कि यह कब तक होने वाला है, इससे पहले कि हम वास्तविक रूप से इन सभी नए ब्राउज़र सुविधाओं (WebGL, WebSocket, ऑडियो / वीडियो, स्थानीय भंडारण, एट अल) पर निर्भर हों, लेकिन अगर यह सब एक साथ आता है तो यह बहुत बड़ा बदलाव ला सकता है। वेब पर सीधे गेम शिप करने की क्षमता में। लेकिन अभी भी बहुत सारी बाधाएं हैं जो बनी हुई हैं (उदाहरण के लिए, IE10 में WebGL को लागू करने के लिए Microsoft के लिए अपनी सांस न रोकें)।


1
यह एक बहुत अच्छा डेमो है, लेकिन तकनीकी रूप से सवाल का जवाब नहीं है। उन्होंने HTML5 के बारे में पूछा, न कि WebGL; जबकि दोनों अक्सर भ्रमित होते हैं, वे अलग-अलग होते हैं (जैसे। इंटरनेट एक्सप्लोरर एचटीएमएल 5 को लागू कर रहा है, लेकिन
वेबजीएल

6

ईए का लॉर्ड ऑफ अल्टिमा संभवत: सबसे अधिक प्रभावशाली जावास्क्रिप्ट / एचटीएमएल आधारित गेम है जिसे मैंने देखा है।

नोट: यह एक रणनीति का खेल है और कार्रवाई का शीर्षक नहीं है, जबकि इसमें एक अच्छा चिकनी स्क्रॉल मानचित्र है, जहां तक ​​बटन पर क्लिक करने से परे कुछ भी नहीं है, जहां तक ​​प्रत्यक्ष अन्तरक्रियाशीलता जाती है।


बस यह कोशिश की - काफी प्रभावशाली!
टिम होल्ट

आपके द्वारा प्रदान किया जाने वाला लिंक मुझे खेलों के सूचकांक में ले जाता है।
एक्सपिनिन्जा

5

"मैं उत्सुक हूं कि क्या संभव है और क्या सीमाएं हैं।"

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

  • रोटेशन, स्केलिंग, अपारदर्शिता, आदि के साथ 2d ग्राफिक्स (कैनवास के माध्यम से)
  • 3 डी (कैनवास और वेबजीएल के माध्यम से)
  • ऑडियो (ऑडियो टैग के माध्यम से, हालांकि यह वर्तमान में इसका समर्थन करने वाले ब्राउज़रों में भी बेकार है)
  • HTTP (XMLHTTPRequest के माध्यम से)
  • स्थानीय संग्रहण (स्थानीयस्टोर एपीआई के माध्यम से)
  • सॉकेट (वेब ​​सॉकेट के माध्यम से)
  • एसवीजी
  • वीडियो (वीडियो टैग के माध्यम से)

AFAIK यह सब Google क्रोम में संभव है (और यदि यह नहीं है, तो यह जल्द ही होगा)। मेरे लिए एक पूर्ण गेमिंग वातावरण की तरह लगता है :)

(मैं अपने पहले मसौदे में इस सारे सामान के लिंक शामिल करता हूं लेकिन StackExchange मुझे तब तक पोस्ट नहीं करने देगा जब से मैं नया हूं, क्षमा करें!)


सभी सुविधाएँ वहाँ हैं, लेकिन उन्हें एक्सेस करने का तरीका, जावास्क्रिप्ट, एक्शनस्क्रिप्ट 3 की तुलना में कमी है
बार्ट वैन ह्युकेलोम

ऐसा कैसे? कृपया जोर दें।
रिचतौर

1
एक्शनस्क्रिप्ट 3 में कक्षाएं हैं, जिन्हें मैं व्यक्तिगत रूप से प्रोटोटाइप की तुलना में उपयोग करने के लिए अधिक सहज पाता हूं। इसमें स्टैटिक टाइपिंग है (लेकिन जरूरत पड़ने पर JS जितनी डायनैमिक हो सकती है) जो बेहतर परफॉरमेंस को सक्षम करती है और ऑटोकेम्प्लिमेंटेशन के साथ शानदार IDE की अनुमति देती है, साथ ही रनटाइम के बजाय कंपाइल टाइम में कई त्रुटियों का पता लगाती है। संकुल कई परियोजनाओं से कोड के मिश्रण को आसान बनाता है।
बार्ट वैन ह्युकेलोम

2
जिनमें से सभी व्यक्तिपरक लाभ हैं या स्वयं भाषा से संबंधित नहीं हैं ...
रश्यो

1
Imo, जावास्क्रिप्ट एक अच्छी और तरल भाषा है जब इसके अच्छे हिस्सों के लिए लिया गया ^ ^ Btw, "ऑडियो वर्तमान में बेकार है" भाग अभी एक प्रमुख मुद्दा है: 7
Oskar Duveborn


4

Jquascript / html का उपयोग करके Aves नामक एक गेम इंजन बना रहा है। इस वीडियो में कुछ चुनौतियों के बारे में बताया गया है जो उन्होंने विकास के दौरान चलाई थीं। उन्होंने इस बारे में बहुत बात की कि कैनवास कितना धीमा था और यह वर्तमान में hw नहीं है।

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

IMO एक js / html गेम विकसित करने की सबसे बड़ी सीमा ध्वनि है। टैग सफारी / फायरफॉक्स / क्रोम भर में अलग-अलग ईवेंट वार करता है, जिसका नवीनतम संस्करण होना चाहिए। अंतिम बार मैंने चेक किया कि सफारी केवल एमपी 3 के साथ काम करती है और फायरफॉक्स केवल ओजीजी के साथ काम करता है। हालांकि इसकी पूरी तरह से सर्वराइड तर्क के कॉम्बो के साथ इसे पार करने के लिए संभव है।

वर्तमान में मैं फ़्लैश गेम्स लिखने का शौक रखता हूँ और उस डोमेन को एचटीएमएल 5 (js / css / html) से दूर नहीं कर सकता, जब तक कि पोर्टल उन्हें स्वीकार नहीं करना शुरू कर देते या वेब ऐप स्टोर ऑनलाइन नहीं हो जाते।


4

वैकल्पिक शब्द

Contrasaurus

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

कोई फ्लैश नहीं, सभी एचटीएमएल 5 कैनवस और ऑडियो। क्रोम में सबसे अच्छा काम करता है।


4

आपको वास्तव में CAAT लाइब्रेरी की जाँच करनी होगी - यह बहुत बढ़िया है! यह कैनवास के लिए एक दृश्य (उदाहरण के लिए। Ddchchild / thing2.removechild) पुस्तकालय है।

इसके इस डेमो ने मुझे उड़ा दिया, साथ ही खेल भी उस पेज पर सम्‍मिलित है: http://labs.hyperandroid.com/animation

इतना कि मैं इसे इस्तेमाल करने के लिए अपने खुद के खेल पर स्थानांतरित कर दिया, और यह केवल एक रात मुझे ले लिया।

में ड्रॉप करें, मल्टीप्लेयर स्नोबॉल फाइट http://holiday2010.ogilvy.com

इतना कि मैंने लिरारी में सुधार करने और उसमें सामान जोड़ने की कोशिश की है: http://github.com/onedayitwillmake/CAAT-Hello

जीथब पर उपलब्ध: http://github.com/onedayitwillmake/CAAT-Hello/tree/tirclepack



2

Google Pacman ने जितने भी प्रभावशाली JS / HTML गेम देखे हैं उनमें से एक है (दी गई, यह केवल वही है जिसे मैंने देखा है, लेकिन यह वास्तव में बहुत अच्छा है :)

स्रोत कोड स्थान


3
HTML5 नहीं, सिर्फ DHTML मैं मानता हूँ। इसके अलावा ध्वनि फ्लैश के माध्यम से किया गया था। यह सब अधिकतम संगतता प्राप्त करने के लिए था।
I’n


2

Biolab आपदा एचटीएमएल 5 और जेएस के साथ क्या किया जा सकता है यह दिखाते हुए एक बहुत अच्छा साइडक्रॉपरिंग प्लेटफ़ॉर्मर है। http://playbiolab.com/


2

मैंने अपना स्पेस स्ट्रैटेजी गेम सिल्वरलाइट / C # से शुद्ध एचटीएमएल 5 / जावास्क्रिप्ट / कैनवस पर पोर्ट करना समाप्त कर दिया है:

खगोलशास्त्री - सितारों का शासक

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

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

इस प्रकार के क्रॉस-प्लेटफॉर्म की आवश्यकता एक अच्छा कारण है कि कुछ लोग फ्लैश से हटकर एचटीएमएल 5 की ओर बढ़ रहे हैं, लेकिन नकारात्मक पक्ष यह है कि आपको एन अलग-अलग ब्राउज़रों और संस्करणों पर परीक्षण करना होगा और सभी सिरदर्द हैं जो विशिष्ट वेब विकास से जुड़े हैं। इन समस्याओं को jQuery और कुछ अन्य HTML5 गेम लाइब्रेरी / प्लेटफॉर्म जैसे पुस्तकालयों द्वारा दूर किया जाता है ( ImpactJS एक है जिसे मैंने देखा है लेकिन कोशिश नहीं की है)। जब फायरफॉक्स 7 बाहर हो जाता है और IE 9+ अधिक व्यापक हो जाता है तो भी ये समस्याएं उतनी समस्या नहीं होंगी।

अगर आपको सिल्वरलाइट से एचटीएमएल 5 कैनवस तक पोर्ट करने में आई कुछ समस्याओं में दिलचस्पी है, तो आपको अपने ब्लॉग पोस्ट को यहां देखना चाहिए: पोर्टिंग सिल्वरलाइट ऐप को HTML5 कैनवस टैग का उपयोग करके जावास्क्रिप्ट में


2

यहाँ ImpactJS इंजन का उपयोग करते हुए 3 बेहतरीन गेम हैं ।

प्रभाव एक जावास्क्रिप्ट गेम इंजन है जो आपको डेस्कटॉप और मोबाइल ब्राउज़र के लिए आश्चर्यजनक एचटीएमएल 5 गेम विकसित करने की अनुमति देता है।

यदि आप वर्तमान में HTML5 के साथ आप क्या कर सकते हैं, इसके बारे में अनिश्चित हैं, तो मैं कहूंगा कि ये वर्तमान में सबसे अच्छे उदाहरण हैं। हालांकि ध्यान रखें कि क्योंकि यह इतना गर्म विषय है, क्षेत्र जल्दी से बदल रहा है!


जेड-प्रकार

एक Space Shoot'em'Up जहां आप शूट करना चाहते हैं।

Biolab

इस जंप'रून में एक संक्रमित बायोलैब के माध्यम से अपना रास्ता लड़ें। चलता है कि सब कुछ शूट करने के लिए अपने प्लाज्मा गन का प्रयोग करें! दुश्मनों का पता लगाने के लिए 3 स्तर और लड़ने के लिए 6 प्रकार हैं।

जीव और महल

एक एक्शन-पज़ल गेम, जिसमें आप एक युवा खजाना शिकारी की मदद करते हैं, जो मध्ययुगीन महल से बड़ी मात्रा में खजाना चुराता है।


1

संयोग से, Slashdot पर आज html5 / जावास्क्रिप्ट गेमिंग के बारे में एक सवाल था:

http://ask.slashdot.org/story/10/07/14/0632238/JavaScriptHTML-5-Gaming

इसमें विशेष रूप से गेलेक्टिक लूट, एक साइड-स्क्रॉलिंग स्पेस शूटर का उल्लेख है:

http://dougx.net/plunder/plunder.html



0

हाल ही में रुका हुआ एक दिलचस्प HTML5 डेवलपमेंट फ्रेमवर्क Sencha है। यह मुख्य रूप से हैंडहेल्ड / टच डिवाइस के लिए है, लेकिन अब से कुछ साल बाद तक टच-आधारित क्या नहीं होने वाला है? कार्ड गेम सहित कुछ पेचीदा डेमो यहां दिए गए हैं:

http://www.sencha.com/products/touch/demos.php


0

इफेक्ट्स गेम्स पर कुछ HTML5 गेम्स यहां दिए गए हैं ... यहां तक ​​कि ऐसे प्रोजेक्ट भी हैं जिनमें आप शामिल हो सकते हैं। ज्यादातर अपने क्रिस्टल गैलेक्सी डेमो के साथ संकलन के बीच समय की हत्या हो गई


0

साइट से: "साइक्लोब्लोब को वेबजीएल और एचटीएमएल 5 कैनवास तत्वों का उपयोग करके लागू किया गया है और इसे पूरी तरह से जावास्क्रिप्ट में लिखा गया है।"

http://cycleblob.com/


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.