HTML5 Canvas Game için başlangıç ​​ekranı oluşturma?

Question

Çoğumuz, HTML5 Canvas öğesinin Firefox, Safari ve Chrome'daki bu inanılmaz derecede hızlı Javascript Motorları ile çok daha iyi destek sağladığını biliyoruz.

Son zamanlarda Javascript ve Canvas ile oyun geliştirmeyi denedim ve bir Javascript Oyunu için Başlangıç ​​Ekranı oluşturmanın iyi bir yaklaşımı olacağını merak ediyorum.

Şimdiye kadar, sahip olduğum tek fikir, oyundan önce bir UI oluşturuyor ve Javascript ile ilgili şeyler yapıyor ve fareyi ve düğmelere tıkladıklarında Etkinlik Dinleyicilerini kullanıyor. Ama bunun bilge bir şey olup olmadığından emin değilim.

Javascript oyununda bir Başlangıç ​​Ekranı, vb. Hakkında iyi bir yol ne olurdu? Herhangi bir yardım yararlı olabilir, teşekkürler!

GÜNCELLEME: Çabuk yanıtlar için teşekkürler! Bir sürü oyun yüklenene kadar bir img koymanızı öneriyor. Bu yüzden, tüm resimlerin ne zaman yüklendiğini kontrol etmek için bir varlık yöneticisi veya bir çeşit yazı yazmam gerekiyor mu?

Answer 1

Sıçrama ekranınızla div etiketini doldurun. Sayfa yüklemesinde gösterilmesini ve tuvalinizi gizlemesini sağlayın. Div etiketine ve tıklama etkinliğine bir 'start' düğmesi ekleyin, splash ekran div etiketini gizleyin ve ya jQuery'yi veya klasik JavaScript'i kullanarak tuvali gösterin.

<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

Basit, her şey/Başlatıldı yüklenene kadar tuval 'yukarıdaki' bulunduğu normal bir HTML img kullanın: Burada

jQuery kullanarak bazı örnek kodudur.