जावास्क्रिप्ट और CSS3 का उपयोग कर प्रोटोटाइप खेल

मैं खेल का एक प्रोटोटाइप साझा करना चाहता हूं, जो कुछ ही घंटों में बनाया गया है। आशा है कि यह आप में से कई को प्रेरित करता है! एकल-खिलाड़ी ब्राउज़र गेम उद्योग में, ऐसा लगता है कि मुझे वास्तव में कल्पना की कमी है और कहानियों को बताने की क्षमता है, हालांकि शायद मैंने इस तरह के खेल को नोटिस नहीं किया है;), लेकिन मुझे ग्रिम फैंडैंगो जैसे गेम याद हैं।

नीचे एक डेमो से एक स्क्रीनशॉट है जिसमें मुख्य चरित्र, पक्षियों और दृश्य के घटकों का प्रतिनिधित्व करने वाले कई DOM नोड्स हैं। अधिकांश एनिमेशन सीएसएस संक्रमण / एनिमेशन द्वारा किए जाते हैं, जिनमें से कुछ गतिशील हैं और चाल का उपयोग करते हैं। जेएस लाइब्रेरी।



मैंने अभी तक कोई प्रोफाइलिंग नहीं की है, लेकिन यह डेमो एक भी ब्रेक के बिना आसानी से पर्याप्त रूप से काम करता है, और ऐसे कई पहलू हैं जिन्हें बस jQuery फेंकने के साथ शुरू करके अनुकूलित किया जा सकता है।

IPhone खेल

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

ब्राउज़र में गेम

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

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

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

प्रदर्शन

आप कुछ इंटरेक्टिव फीचर्स देख सकते हैं, साथ ही इस वीडियो में एक दृश्य के निर्माण के लिए एक छोटा सा उपकरण: http://www.screenr.com/ZfMs ।

प्रदर्शन में जावास्क्रिप्ट कोड की लगभग 200 पंक्तियाँ और CSS की लगभग 200 पंक्तियाँ शामिल हैं, डिज़ाइन के लिए रूपांतरण के लिए CSS का उपयोग करता है, और जाहिर है, डिज़ाइन के लिए, जबकि जावास्क्रिप्ट बुनियादी उपयोगकर्ता बातचीत के लिए ज़िम्मेदार है, जैसे आँखों की पुतलियाँ और यादृच्छिक बिल्ली की गति। । प्रदर्शन में दृश्य बनाने के लिए छोटे उपकरण भी शामिल हैं, लेकिन यह पूरी तरह से अप्रभावी है।

स्रोत कोड

आप GitHub से स्रोत उठा सकते हैं। आप कुछ शांत प्रोटोटाइप बनाने अगर मुझे बीकन!

अवधारणाओं

एक और अधिक अवधारणा कला: