2012-11-17 12 views
8

में टेक्स्ट टाइप करने की अनुमति देना मैं कैनवास और उत्कृष्ट किनेटिकजेएस लाइब्रेरी के संयोजन का उपयोग करके अपना पहला HTML5 गेम लिखने की कोशिश कर रहा हूं और मैंने कुछ दीवारों को जल्दी ही मारा है।उपयोगकर्ता को HTML5 कैनवास गेम

मैं क्या करना चाहता हूं वह उपयोगकर्ता को गेम में एक बॉक्स में अपना नाम दर्ज करने के लिए कहें। कुछ शोध करने के बाद, मैं उपयोग कर रहे कैनवास के उस हिस्से पर एक फ़्लोटिंग HTML तत्व प्राप्त करने के बाहर ऐसा करने का कोई तरीका नहीं देख सकता।

क्या यह सही है?

बहुत सारे फ्लैश और वेब गेम पर बड़े होने के बाद, मुझे यकीन है कि हर बार मुझे नाम इनपुट करना होगा या फ़ाइल नाम सहेजना होगा, यह सीधे गेम में ही किया जाता है और यह HTML पर निर्भर नहीं है इसे उत्पन्न करें?

ऐसा करने के तरीके पर कोई सलाह आभारी रूप से प्राप्त की जाएगी।

+0

मुझे नहीं लगता कि वहाँ के लिए कुछ भी प्राप्त नहीं कर रहा हूँ काइनेटिक में बॉक्स क्षमता से बाहर किसी भी टेक्स्ट बॉक्स जोड़ने के लिए जेएस। कृपया इसके लिए KineticJS दस्तावेज़ देखें: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/ यह आपके अधिकांश प्रश्नों का उत्तर देगा। आयत पर कुंजी स्ट्रोक पर ईवेंट हैंडलर जोड़कर आपको कैनवास में एक टेक्स्ट क्षेत्र बनाना होगा। फिर विशिष्ट प्रारूप में कैनवास में उपयोगकर्ता से प्राप्त पाठ प्रदर्शित करें। – Amber

+0

यह कैनवास पर टेक्स्ट रखने पर चर्चा करता है, न कि किसी उपयोगकर्ता से टेक्स्ट कैप्चर करना। मैं अपने बटन बनाने के लिए पहले से ही कई KineticJS टेक्स्ट का उपयोग कर रहा हूं, जो मैं चाहता हूं वह कहने का एक तरीका है, कृपया अपना नाम दर्ज करें: (जो टेक्स्ट विशेषता का उपयोग करेगा) और फिर कैनवास जेएस funciton के भीतर पाठ को कैप्चर करें। – Craigeve

+0

मैंने अभी अपना जवाब संपादित कर लिया है। Kinetic JS में HTML टेक्स्ट क्षेत्र जैसी कोई चीज़ नहीं है। – Amber

उत्तर

3

आप निम्न सीएसएस तकनीक का उपयोग कर कैनवास के शीर्ष पर एक फ़्लोटिंग HTML तत्व प्राप्त कर सकते हैं।

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

  • एक आवरण div स्थिति बनाओ: रिश्तेदार

  • स्थिति का उपयोग कर अंदर कैनवास जोड़ें: पूर्ण

  • स्थिति का उपयोग कर के अंदर अन्य HTML नियंत्रण जोड़ें: पूर्ण

यह एप्ली सभी एचटीएमएल तत्वों के लिए, सिर्फ कैनवास नहीं।

+0

मैं ईमानदार रहूंगा, मैं एक HTML से अधिक जावास्क्रिप्ट/जावा प्रोग्रामर हूं। इसलिए मूल रूप से मैंने इस समय सीएसएस को अनदेखा कर दिया है (इसलिए दस्तावेज़ का कोई