2010-02-14 12 views
8

साथ जे एस/सीएसएस सममितीय ग्रिड मैं एक पक्ष पर 'सममितीय' दृश्य और पारदर्शी टाइल्स का उपयोग करता है एक वेब अनुप्रयोग/खेल बनाने के लिए कोशिश कर रहा हूँ। मैं उन्हें एक PHP सूत्र का उपयोग करके ठीक (लेकिन महान नहीं) प्रदर्शित कर सकता हूं जो प्रत्येक div (प्रत्येक टाइल) को स्थिति के रूप में सेट करता है: पूर्ण और शीर्ष और बाएं पैरामीटर सेट करें। समस्या यह है कि मैं टाइल पर क्लिक कैसे पकड़ूं और इसके नीचे टाइल पर पारदर्शी बिट्स क्लिक-थ्रू के साथ टाइल दें।HTML/अर्द्ध पारदर्शी क्लिक के माध्यम से टाइल्स

मेरी समस्या का एक उदाहरण http://stuff.adammw.homeip.net/other/fv/farmville_2.html

उत्तर

4

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

टाइल करने के लिए स्थिति का एक सममितीय मानचित्रण इस आसान होगा के लिए

, लेकिन वह 'जमीन पर' एक जगह के रूप बिंदु स्थिति लेना हो सकता है; यह आपको छवि के मुखौटा डेटा का उपयोग जमीन के सामने प्रस्तुत पेड़ जैसे हिट-टेस्ट ऑब्जेक्ट्स के लिए करने की अनुमति नहीं देगा।

एक:

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

बी। <canvas> और getImageData का उपयोग करके परीक्षण के लिए छवि डेटा निकालें। जिस बिंदु पर आप प्रतिपादन के लिए कैनवास का उपयोग करने पर विचार कर सकते हैं, यह देखते हुए कि आप पहले ही आईई उपयोगकर्ताओं को खो चुके हैं।

+1

यह शायद अच्छा होगा "हार" करने के लिए उन परेशान करने आईई

वाक्य रचना कुछ इस तरह दिखता उपयोगकर्ता imho =) – Chii

+0

कैनवास के साथ जाने के बाद इसे करने का एक अच्छा तरीका खोजने में थोड़ा मुश्किल है, लेकिन सौभाग्य से मुझे ऐसा कुछ मिला जो वास्तव में वही था पर - http://philip.html5.org/demos/canvas/spritepick/example.html इस विधि के साथ एकमात्र समस्या यह है कि यह बहुत जावास्क्रिप्ट/प्रोसेसर गहन है और मुझे यकीन नहीं है कि यह काम करेगा या नहीं मूल उद्देश्य जो आईफोन वेब ब्राउज़र के साथ संगतता प्रदान करना था। –

1

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

अन्यथा, मैं bobince से सहमत हैं। आप दृष्टिकोण हैं शायद आसानी से काम नहीं करेंगे।

+0

बहुत समझ में आता है – Jonno

4

आप मैट्रिक्स IE में परिणत css3 रूपांतरण का उपयोग करने की जरूरत है, या।

-webkit-transform: skew(0deg, -30deg) scale(1, 1.16); 
-moz-transform: skew(0deg, -30deg) scale(1, 1.16); 

अच्छा उदाहरण के एक जोड़े:

http://www.fofronline.com/experiments/cube/index.html

http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

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