एक दो दिनों में जावास्क्रिप्ट में 3 डी शूटर कैसे बनाएं

छवि शनिवार को, आधी रात के करीब, मेरे पास खाली समय था और ब्राउज़र के लिए एक खिलौना बनाने की इच्छा थी, मज़े के लिए और अनुभव बढ़ाने के लिए। शैली को बहुत जल्दी निर्धारित किया गया था: इस बार मैंने निश्चित रूप से पर्याप्त समय नहीं दिया, मैंने सिर्फ एक मांस की चक्की करने का फैसला किया। खिलाड़ी और उसके विरोधियों को नियंत्रित करने के लिए एक मूल कोड लिखने में 20 मिनट का समय लगा। और फिर सवाल उठा - 2 डी या 3 डी (या बल्कि: कैनवस / एसवीजी या अभी भी पूर्ण वेबजीएल)?

यह देखते हुए कि मैं वर्तमान में एक परियोजना के विकास में शामिल हूं, जहां वेबजीएल 3 डी मोड के लिए बुनियादी तकनीक है, मैंने विकल्प को जानबूझकर बनाया। अब लगभग छह महीने के लिए मैं थ्री जी.जे. लाइब्रेरी के साथ काम कर रहा हूं, और इस बार यह फिर से मेरा सबसे अच्छा सहायक बन गया।

अगले घंटे में, एक दृश्य बनाया और स्थापित किया गया था, एक खिलाड़ी रिक्त को आदिम की एक जोड़ी के रूप में जोड़ा गया था, और विरोधियों का पहला संस्करण बनाया गया था।

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

इस स्थान के विकल्प ने हमारी बंदूक पर विरोधियों के आंदोलन को लागू करना काफी आसान बना दिया, क्योंकि दुश्मन के विक्षेपण कोण को जानते हुए, हम धीरे-धीरे इसे और बंदूक के बीच की दूरी को कम करते हुए, इसे निर्देशांक के केंद्र में ले जाते हैं।

दरअसल, रविवार की रात को, मेरे पास निम्न चित्र था:

छवि

रविवार मैंने सुखद पारिवारिक कामों में बिताया, और सोमवार को मैंने खुद को मुख्य परियोजना पर काम करने के लिए समर्पित किया। और फिर मंगलवार आया। कार्यालय के रास्ते में, मैं "खिलौना" पर स्विच करने में कामयाब रहा और एक और कार्यान्वयन योजना के बारे में सोचा।

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

कुछ ही मिनटों में, एक नाम का आविष्कार किया गया था (इसका अर्थ बाद में पता चलेगा), और फिर मैंने एक स्प्लैश स्क्रीन, बटन, फ्रेम और स्वास्थ्य आइकन बनाने के लिए कहा, यह हमारे डिजाइनर द्वारा खुशी के साथ किया गया था।

छवि

तब मुझे लगा कि यार्ड में बर्फ के बिना सर्दी असहज होगी। किए गए कार्यों की तुलना में जल्दी नहीं, 10 मिनट में बर्फ कणों की एक प्रणाली के आधार पर खराब हो गई थी।

यह हमारे नायक को शूट करने का अवसर देने का समय है, और मैंने एक नया वर्ग जोड़ा - एक बुलेट।

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

छवि

थोड़ी देर बाद, कीबोर्ड संचालकों को विराम सेट करने और फ़ुल-स्क्रीन मोड पर स्विच करने के लिए जोड़ा गया, और फिर गेम प्रक्रिया के कामकाज के लिए रैपर ही। शायद, इस सब ने कोड में थोड़ा गड़बड़ कर दिया, लेकिन समय शाम को 8 बजे के लिए निर्धारित कॉर्पोरेट पार्टी के पास आ रहा था, और पहले से कुछ चीजें पहले से ही थीं :)

अंत में, पूरी चीज़ सर्वर पर चली गई, और हर कोई जो अपना लिंक प्राप्त करना चाहता था।

पहले फीडबैक का विश्लेषण करने के बाद, छोटे सुधार किए गए थे, मालिकों को जोड़ा गया था, विरोधियों की तुरंत मृत्यु नहीं हुई थी, और गोलियां अस्थायी क्षति का कारण बनने लगीं।

मुझे लगता है कि मेरे पास सप्ताहांत में कुछ खाली समय होगा, और मैं एआई को दुश्मन से बाँध सकता हूं (ताकि वह पेड़ों के पीछे छिप जाए और डैश में चला जाए), मैं पेड़ों को अभेद्य और अभेद्य बनाता हूं, अच्छी तरह से, और कुछ और।

सभी परियोजना स्रोत अनुसंधान के लिए खुले हैं। मैंने टिप्पणियों को नहीं जोड़ा, लेकिन मैंने अध्ययन के लिए संरचित और समझने योग्य कोड लिखने की कोशिश की।

PS और हाँ, मैं एक अनुकरणीय समाधान और आदर्श कार्यान्वयन का दिखावा नहीं करता, यह सिर्फ मज़े के लिए है जो Google Chrome, Safari और Mozilla Firefox में काम करता है।

Source: https://habr.com/ru/post/In164003/


All Articles