2010-10-03 12 views
6

मैं HTML5 कैनवास का उपयोग कर एक साधारण जावास्क्रिप्ट गेम पर काम कर रहा हूं। यह एक बहुत ही विशिष्ट खेल-पाश को शामिल सेटअप है:कैनवास ड्रा इमेज पहली बार छवियों को आकर्षित नहीं करता

  • init() फ़ंक्शन है कि वस्तुओं initializes खेलने का मैदान प्रयोग की जाने वाली, randomizing कुछ x/y पदों और इसी तरह के सेटअप कार्यों
  • ड्रा() फ़ंक्शन कि सभी ड्रॉ शुरू खेल वस्तुओं, कुछ सरल कैनवास आकार और कुछ चित्र
  • हर 25 मिलीसेकंड

आकर्षित जबकि हो रही इस परियोजना के शुरू कर दिया, मैं init() फ़ंक्शन के अंत में setInterval कॉल किया था कॉल करने के लिए setInterval सहित, तो यह जल्द ही ड्राइंग और एनिमेटिंग शुरू कर देगा जैसा कि आपने पृष्ठ लोड किया था, और सबकुछ ठीक काम करता था। अब जब मैं आगे बढ़ रहा हूं, तो मैं लोड पर पूरी तरह से आबादी वाला, स्थिर प्लेफील्ड आकर्षित करना चाहता हूं और फिर मुख्य गेम लूप अंतराल को लात मारने के लिए एक बटन का उपयोग करना चाहता हूं। इसलिए मैंने init() के अंत में ड्रॉ() को एक एकल कॉल जोड़ा, और मुद्दा यह है कि जब मैं ऐसा करता हूं, तो सभी कैनवास आकार ठीक से खींचे जाते हैं लेकिन छवियों में से कोई भी कैनवास पर प्रस्तुत नहीं होता है।

वे अगर मैं() आकर्षित करते हैं कई बार की तरह चलाने के लिए, प्रस्तुत करना करना ...

var previewDraw = setInterval(draw, 25); 
    var stopPreviewDraw = function() { clearInterval(previewDraw) } 
    setTimeout(stopPreviewDraw, 100) 

... लेकिन यह है कि गूंगा लगता है। ड्रॉ() काम करने के लिए एक भी कॉल क्यों नहीं है? मैंने क्रोम और फ़ायरफ़ॉक्स के कंसोल में ऑब्जेक्ट्स लॉग कर दिए हैं और उनके बारे में सबकुछ ठीक दिखता है; उनके पास पहले से ही उपयुक्त img src पथ हैं और नई छवि() को असाइन करने के लिए पास करने के लिए उपलब्ध x/y मान प्रारंभ करें और फिर मेरे canvas.2dcontext.drawImage() विधि के माध्यम से बुलाया जाता है।

मैं क्रोम 6 और फ़ायरफ़ॉक्स 3.6.10 में इसका परीक्षण कर रहा हूं, और वे दोनों इस व्यवहार के साथ मुझे परेशान कर रहे हैं। कोई त्रुटि या मुद्दों Chrome की कंसोल में दिखाने लेकिन अगर मैं ड्रा() केवल एक बार फ़ायरफ़ॉक्स इस फेंक कॉल करने का प्रयास:

न आया हुआ अपवाद: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D: [अपवाद ... "घटक विफलता कोड लौट आए। drawImage] "nsresult:" 0x80040111 (NS_ERROR_NOT_AVAILABLE) "स्थान:" जे एस फ्रेम :: http://localhost/my-game-url/ :: drawItem :: लाइन 317 "डेटा: कोई]

कि त्रुटि के लिए मेरे Google खोजों का एक भ्रष्ट छवि का सुझाव है, लेकिन वे बिना किसी समस्या के पूर्वावलोकन और फ़ोटोशॉप में सभी खुले हैं।

उत्तर

8

मुझे लगता है कि आप विंडो ऑब्जेक्ट की ऑनलोड घटना के बाद init() को कॉल कर रहे हैं। समस्या यह है कि यह आपको गारंटी नहीं देता है कि छवि डेटा वास्तव में उस बिंदु पर उपलब्ध है। नेटवर्क से छवियों को प्राप्त करने के बाद AFAIR आग लग जाएगी लेकिन फिर भी उन्हें डीकोड करने की आवश्यकता है।

आपकी सर्वश्रेष्ठ शर्त छवियों के ऑनलोड ईवेंट की प्रतीक्षा करना होगा।

+0

डीयूएच ... नहीं, क्योंकि यह एक प्रैक्टिस प्रोजेक्ट है और मैं नई चीजों पर इतना ध्यान केंद्रित कर रहा हूं कि मैं सीख रहा हूं, मैं पूरी तरह से स्पष्ट भूल गया था (मैं इसे पृष्ठ के निचले भाग में केवल इनलाइन चला रहा था)। चूंकि वहां कई छवि संपत्तियां नहीं हैं और वे खिड़की पर सभी छोटे, चल रहे init() चल रहे हैं। इस लोड को ठीक से संभालता है। बहुत धन्यवाद, Jakub। – RwwL

+0

आखिरकार मुझे लगता है कि मैं सभी बाहरी छवियों को डेटा यूआरएल के साथ बदल दूंगा। – RwwL

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