HTML5キャンバスゲームの開始画面を作成しますか？

Question

私たちのほとんどは、HTML5 Canvas要素がFirefox、Safari、Chromeのこれらの驚くほど高速なJavascriptエンジンではるかに優れたサポートを得ていることを知っています。

私は最近、JavascriptとCanvasを使ってゲーム開発を実験しています.Javascriptゲームの開始画面を作成するにはどうすればよいのでしょうか。

私が持っている唯一のアイデアは、ゲームの前にUIを作成し、Javascriptで処理し、イベントリスナーを使用してマウスを追跡し、ボタンをクリックするときです。しかし、私はこれが賢明なことかどうかは分かりません。

Javascriptのゲームでスタート画面などを表示するにはどうすればよいでしょうか？どんな助けも役に立つでしょう、ありがとう！

更新：すばらしい返信をありがとう！あなたの多くは、ゲームがロードされるまでimgを置くことを提案しています。だから、私は資産マネージャーや何らかの仕掛けを書く必要があります - すべての画像などがロードされた時をチェックするのですか？

Answer 1

スプラッシュ画面にdivタグを挿入します。ページの読み込みに表示させ、キャンバスを隠しておきます。 divタグに 'start'ボタンを追加し、クリックイベントでスプラッシュ画面のdivタグを非表示にし、jQueryまたはクラシックJavaScriptを使用してキャンバスを表示します。ここで

は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を使用しています。