My favorite way of making clickable menus is using jQuery with regular html elements. Here's the trick that was difficult for me to wrap my brain around in the beginning: The canvas is just a HTML element, just like a <div>. If you think of your entire 'game' as just a web page, and the impact game area itself being a div, you realize that you can build anything like menus around (or even on top of!) the canvas without any trouble at all! The real slick part comes in when you realize that you can just manipulate the in-game variables with regular javascript / jQuery anywhere else on your webpage.
For example, in your index.html file, create a new html div with an id of menu. Use CSS to position it, style it, and do whatever you'd like. Then, when you're ready, use jQuery to attach click functions and modify any ig.game.variables you'd like just as though you were in the game, and it will work! The brilliant part is you can use jQuery or jQuery UI to do any sort of animation (show/hide fades/slides are great) without any work at all.
I know this is difficult to understand if you haven't built many webpages, or used jQuery before, but here are some snippets to help you.
First, create a variable you want to read/modify in your main.js file. Somewhere at the top of your MyGame create a variable, write something like:
helloGame: "hello!",
Next in your index.html file, let's make a menu div, and a button div, put this code somewhere below the canvas element.
<div id="menu">
<div id="hello-button">Click Me!</div>
</div>
Obviously you'd want to add some CSS to style that thing nice and pretty but not necessary for this example. Next add into your HEAD of index.html file a chunk of javascript like this. For ease of the example I'm also including the googleAPI for Jquery.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#hello-button').click(function(){
alert("The variable says: " + ig.game.helloGame );
ig.game.helloGame = "hola!";
alert("The variable now says: " + ig.game.helloGame );
});
});
</script>
What did we just do? We created a standard HTML element, and used jQuery to bind a click event to a div with the id of hello-button. The click function pops up an alert telling us the IN-GAME variable, then it sets it to something else, and pops up an alert telling it to you again. In this way you can have very seamless 2-way interaction with your game and the rest of your webpage using just standard html! Now, I suggest you do a little research into jQuery and jQuery UI. Using those two libraries you can create all sorts of slick animations, transitions, and effects you could possibly need.
This may seem trivial to experienced developers, but it took me a while to really understand the simplicity of javascript running in a browser and I feel like a little bit of learning in this area really helps. After creating my first 'menus' in game using mouse handlers and entities, I can safely say that all that click handling, mouse positioning and entities are generally a bad and inefficient way to do menus!
Hope this helps.
