CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Dropped43
Dropped43

Reputation: 345

Creating a start screen for a HTML5 Canvas Game?

Most of us know that HTML5 Canvas element is having much better support with these amazingly fast Javascript Engines from Firefox, Safari and Chrome.

So recently I have been experimenting with game development with Javascript and the Canvas, and I am wondering what would be a good approach to be creating a Start Screen for a Javascript Game.

So far, the only idea I have would be creating a UI before the game and stuff with Javascript and use Event Listeners to track the mouse and when they click buttons. But I'm not sure if this a wise thing to do.

What would a good way to go about a Starting Screen, etc. in a Javascript game? Any help would be useful, thanks!

UPDATE: Thanks for the blazing fast reply(s)! A lot of you are suggesting placing a img until the game loads, etc. So do I need to write a asset manager or some sort - to check when all the images etc. are loaded?

Upvotes: 6

Views: 18378

Answers (3)

Chase Young
Chase Young

Reputation: 11

function startGame() {
    alert('Are you sure you want to make a new Game?');
}
function continueGame() {
    alert('Continue Game?');
}
body, button {
    color: blue;
    text-align: center;
    font-family: cursive;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Game Title</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <h1>Game Title</h1>
  <script src="script.js">startGame()</script>
  <button onclick="startGame()">New Game</button>
  <button onclick="continueGame()">Continue Game</button>
</body>
</html>

Upvotes: 1

ColinE
ColinE

Reputation: 70142

Simple, use a regular HTML img that is located 'above' your canvas until everything is loaded / initialised.

Upvotes: 1

Matt Cashatt
Matt Cashatt

Reputation: 24208

Populate a div tag with your splash screen. Have it showing on page load and have your canvas hidden. Add a 'start' button to the div tag and on it's click event, hide the splash screen div tag and show the canvas using either jQuery or classic JavaScript.

Here is some 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>

Upvotes: 3

Related Questions