एचटीएमएल 5 कैनवास गेम के लिए स्टार्ट स्क्रीन बनाना?

Question

हम में से अधिकांश जानते हैं कि HTML5 कैनवास तत्व फ़ायरफ़ॉक्स, सफारी और क्रोम से इन आश्चर्यजनक तेज़ जावास्क्रिप्ट इंजनों के साथ बहुत बेहतर समर्थन कर रहा है।

हाल ही में मैं जावास्क्रिप्ट और कैनवास के साथ गेम विकास के साथ प्रयोग कर रहा हूं, और मुझे आश्चर्य है कि जावास्क्रिप्ट गेम के लिए स्टार्ट स्क्रीन बनाने का एक अच्छा तरीका क्या होगा।

अभी तक, मेरे पास एकमात्र विचार है जो गेम और सामान से पहले यूआई बना रहा है और माउस को ट्रैक करने के लिए ईवेंट श्रोताओं का उपयोग करेगा और जब वे बटन क्लिक करेंगे। लेकिन मुझे यकीन नहीं है कि यह एक बुद्धिमान काम है या नहीं।

जावास्क्रिप्ट गेम में एक प्रारंभिक स्क्रीन आदि के बारे में जाने का अच्छा तरीका क्या होगा? कोई मदद उपयोगी होगी, धन्यवाद!

अपडेट: तेज तेज प्रतिक्रिया के लिए धन्यवाद! आप में से बहुत से गेम लोड होने तक एक आईएमजी रखने का सुझाव दे रहे हैं। तो क्या मुझे एक संपत्ति प्रबंधक या कुछ प्रकार लिखने की ज़रूरत है - यह जांचने के लिए कि सभी छवियां आदि कब लोड की जाती हैं?

Answer 1

अपनी स्प्लैश स्क्रीन के साथ एक div टैग पॉप्युलेट करें। यह पेज लोड पर दिख रहा है और अपने कैनवास छुपा है। Div टैग पर एक 'स्टार्ट' बटन जोड़ें और इसके क्लिक ईवेंट पर, स्पलैश स्क्रीन div टैग छुपाएं और jQuery या क्लासिक जावास्क्रिप्ट का उपयोग करके कैनवास दिखाएं।

<div id="SplashScreen"> 
<h1>Game Title</h1> 
<input id="StartButton" type="button" value="Start"/> 
</div> 

<canvas id="GameCanvas" style="display: none;">Game Stuff</canvas> 

<script> 
    $("#StartButton").click(function() { 
     $("#SplashScreen").hide(); 
     $("#GameCanvas").show(); 
    }); 
</script> 

Answer 2

सरल, एक नियमित HTML img कि 'ऊपर' अपने कैनवास स्थित है जब तक सब कुछ initialised भरी हुई है/का उपयोग करें:

यहाँ jQuery का उपयोग कर कुछ नमूना कोड है।