How would I make a start screen for a game using HTML5 canvas?
I'm not looking for something advanced, just the new game button and highscore link etc. The question might be stupid, but I've never done anything similar, and the tutorials out there don't cover the subject.
Is it enough to just make a fillText with an onclick function? Is there a way to find out the size of the text?
Help appreciated.
There are many approaches to this. But, basically, you want to draw these buttons in, say, GIMP, and then put them on screen using a canvas. Then, register an onclick event to the canvas, and when it fires you want to iterate through an array of buttons (I suggest you make a constructor function for that; that would be a class in other languages), and when you see that a button has been clicked, you execute it's onclick function. The button's onclick function can be something like new Game();, given that you wrapped your game inside a function like I always do.
For that, you need to know the position of the canvas in the web page, because onclick tells you the mouse's absolute position, and you need a position relative to the canvas. That is simple to solve. First, you calculate the offset of your canvas with this:
function findPos(obj)
{
var curleft = curtop = 0;
if (obj.offsetParent)
{
do
{
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
while (obj = obj.offsetParent);
}
return [curleft,curtop];
}
CO = findPos(canvas); //CO stands for canvas offset
Once you have that, this should be how you calculate the actual click position:
var mouse = [0, 0];
function onclick(e)
{
mouse[0] = e.pageX - self.CO[0];
mouse[1] = e.pageY - self.CO[1];
/*Rest of the code*/
}
canvas.addEventListener("click", onclick);
This is all if you actually want to create your start menu using a canvas. You might not want to do that, because it would be easier with just HTML. This has several advantages though, like animation and so forth...
Also, there is a way to find out the text size. The height of the text is simply the font size, but to get the width of the text to be drawn use this:
context.measureText("some random text").width
It might work to just use anchors. then hide them with css and show the game canvas onclick. If you don't want that, you could make a picture which you know the width of and then onclick see if the mouse is on it.
Most compelling games seem to use their game engine in the start-screen.
So it will be a specially set-up version of the rendering / gameplay engine playing a demo or autonomous activity (Examples: Any console racing game, Transport Tycoon, etc).
So I expect it's a case of running some kind of state-machine over the top of your normal game-loop doing its normal "thing".
PS: Thanks for the comment on my previous answer.
Depending on the kind of start screen you want to do, you might not need a canvas at all.
Your "html5" game is a web page, after all, so if your start screen is pretty "static", you might want to do it in simple HTML+CSS, with images, fonts, and links (as in ' < a > ' tags) to pages that would contain the actual game (most likely a page with a large canvas that you draw something on).
And if you want to embed the highscore list, you can use 'standard' web techniques (generating the list on the server side and using a template engine to embed it the page, load it with ajax, whatever works.)
Hoping this helps.
