Creating a start screen for an HTML5 canvas game?

Question

Most of us know that the HTML5 Canvas element has much better support with these incredibly fast Javascript engines from Firefox, Safari, and Chrome.

I have been experimenting with developing games using Javascript and Canvas lately, and I wonder what would be a good approach to creating a start screen for the Javascript Game.

So far, the only idea that I have created will be to create a user interface before the game and Javascript stuff and use event listeners to track the mouse and click buttons. But I'm not sure that this is a reasonable thing.

What can be done in the start screen, etc. in a javascript game? Any help would be helpful, thanks!

UPDATE: Thanks for the prompt reply (s)! Many of you offer to place img before loading the game, etc. So I need to write an asset manager or some kind - check if all the images are loaded, etc.

Answer 1

Fill the div tag with your splash screen. Ask him to show the loading of the page and hide his canvas. Add the “start” button to the div tag and click on the event on it, hide the splash screen div tag and show the canvas using jQuery or classic JavaScript.

Here is sample code using 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

Simple, use plain HTML img , which is located above your canvas until everything is loaded / initialized.