एचटीएमएल 5/Javascript एक कोण

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

नहीं बिल्कुल यकीन है कि ... किसी भी समाधान है, ठीक से काम करेंगे है, हालांकि एक गैर पुस्तकालय विशिष्ट विवरण को प्राथमिकता दी जाएगी!

धन्यवाद!

स्रोत

2012-11-28 Mark Hill

कौन ने कहा कि एक पिक्सेल पूरी संख्या होनी चाहिए? –

इसे साबित करने के लिए इसे आजमाएं। इस कोड को क्रोमस कंसोल में इस पेज के लिए दर्ज करें, और उसके बाद एंटर दबाएं और स्क्रीन के ऊपरी बाईं ओर देखें। 'var el = document.createElement (" div "); el.setAttribute ("शैली", "चौड़ाई: 50 पीएक्स; ऊंचाई: 50 पीएक्स; शीर्ष: 10 पीएक्स; बाएं: 10 पीएक्स; पृष्ठभूमि-रंग: लाल; स्थिति: पूर्ण; जेड-इंडेक्स: 20"); var doc = $ ("body") [0]; doc.appendChild (el); setInterval (function() { वर वैल = el.style.left; वैल = val.substring (0, val.length - 2); वैल = parseFloat (वैल); वैल + = 0.1; वैल + = "पीएक्स"; el.style.left = वैल; }, 25); ' –

ओह शूट! तुमने मेरे दिमाग को उड़ा दिया! हालांकि, क्या यह मेरी मदद करता है क्योंकि एक स्क्रीन पिक्सेल के अंश को प्रदर्शित नहीं कर सकती है? –

आप जो देखना चाहते हैं वह Linear Interpolation (या lerp) का जावास्क्रिप्ट कार्यान्वयन है। एक और नाम motion tween है, लेकिन मेरा मानना है कि खेल विकास से अधिक एनीमेशन शब्द है।

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

ढेर प्रश्न जुड़ा हुआ से, this article एक ब्राउज़र कार्यान्वयन है कि आप प्रक्षेप करने की अनुमति देगा बताते हैं।

स्रोत

2012-11-28 07:20:36 Alan

आपको बहुत बहुत धन्यवाद! मेरे मामले में हालांकि, मेरे पास एक सेट एंड नहीं है। मुझे लगता है कि मुझे यह उल्लेख करना चाहिए था कि इसका उपयोग थोड़ा परीक्षण गेम बनाने के लिए किया जा रहा है जहां आप तीर कुंजी "क्षुद्रग्रह" शैली के साथ 2 डी स्पेसशिप के आसपास उड़ सकते हैं। क्या यह एक समस्या होगी या क्या मैं "सैद्धांतिक" अंत बिंदु बनाने में सक्षम हूं? –

आपके पास "एंड" एंड पॉइंट नहीं होगा, लेकिन आपके पास प्रत्येक फ्रेम के लिए एक अंतिम बिंदु होगा।आपके पास "गति" और "कोण" होगा। प्रत्येक "फ्रेम" या गेम लूप के माध्यम से चलाए जाने पर, आपको वर्तमान प्रारंभ बिंदु, कोण और आपके जहाज की गति के आधार पर नया "अंत बिंदु" फिर से गणना करना होगा। अंत बिंदु की गणना करने के बाद, आप वास्तव में जहाज तत्व को कुछ समय-अंतराल पर समाप्त करने के लिए 'lerp' का उपयोग करेंगे। – Alan

ठीक है, मैं जवाब की सराहना करता हूं! मुझे निश्चित रूप से अपना शोध करना होगा, लेकिन आपकी व्याख्या बहुत समझ में आती है। –

सबसे पहले, आप एचटीएमएल 5 में एक खेल बना रहे हैं, तो आप बाहर Canvas element कोशिश करनी चाहिए। डीओएम तत्वों में हेरफेर करने के बजाय, अपने सभी गेम को कैनवास के अंदर खींचें। ऐसा कहा जा रहा है, एक छवि (कैनवास, या एक छवि टैग के अंदर) को स्थानांतरित करने के सिद्धांत, कैनवास/विंडो के ऊपरी बाएं कोने से पाप/कोस + दूरी के साथ स्थिति की गणना करना होगा।

उदाहरण:

160° (South by South-East, give or take), distance 130 pixels. 
sin(160)*130 
    = 44.462619 
cos(160)*130 
    = -122.160041

-> ऊपरी-बाएं कोने है एक्स = 44, वाई = 122 (44 के बाद से है: -122 एक 0 में: 0 निचले बाएं निर्देशांक प्रणाली 44 के लिए अनुवाद: 122 0: 0 शीर्ष-बाएं समन्वय प्रणाली में)।

स्रोत

2012-11-28 07:21:37 dda

आपके उत्तर के लिए धन्यवाद! मैं अनुमान लगा रहा हूं कि एलन द्वारा सुझाए गए रैखिक इंटरपोलेशन तकनीक को लागू करते समय पाप/कोस की गणना करने से मुझे अपना कोण मिल जाएगा, वास्तविक आंदोलन करेगा? –

आप त्रिकोणमिति :) उदाहरण के लिए की आवश्यकता होगी, तो आप माउस कर्सर को वस्तु ले जाना चाहते हैं, तो आप वस्तु निर्देशांक और माउस निर्देशांक है और आप एक्स और वाई कदम अवधि की गणना करना चाहिए (खेद मेरी अंग्रेजी के लिए)

स्रोत

2012-11-28 07:21:44 karaxuna

वैसे मैं इसे तीर कुंजी के साथ ले जा रहा हूं, इसलिए मुझे अंतिम स्थान पता नहीं है जैसे कि अगर मैं इसे क्लिक कर रहा था, तो मैं इसे स्थानांतरित कर रहा था। –

एचटीएमएल 5/Javascript एक कोण

उत्तर

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