Create a new file. Call it MainMenu.js

Add this Line of code to your index.html. Add it were all other <script>...</script> tags are that

<script type="text/javascript" src="js/MainMenu.js"></script> 

Add a line like this to Main.js

'YourGameName'.game.state.add('MainMenu', 'YourGameName'.MainMenu);

For example, if your game name is TopDownGame the line of good will look like:

TopDownGame.game.state.add('MainMenu', TopDownGame.MainMenu);

if you look in your Preload.js, inside the create method you should see a line like this

this.state.start('Game');

This means that after everything has finished loading, the Phaser will instantly begin running the game. Knowing that the main menu of a game goes before the game itself you want to change this line to

this.state.start('MainMenu');

After you make make Preload.js initialize the MainMenu state, we can move on to building the actual MainMenu.

In you MainMenu.js file

Use this following code as a skeleton for your game.

TopDownGame.MainMenu = function (){};
TopDownGame.MainMenu.prototype = {

    create: function () {



    },
}

After reading the How to Phaser page, you should know what this is. If you don't, What i've done is create and object called MainMenu and created a method for the object called create . This is an inbuilt phaser method.

Next you going to want to add a background. Find an image you want to use as your background, load it in your Preload.js, then use the following command inside your MainMenu.js' create method.

this.game.add.tileSprite(0, 0, 1000, 600, -your image ID-);

remember to substitute -your image ID- with your the name of YOUR OWN IMAGE.

Now leds add a button. Go to your preload and use and load an image you want to use as a button, then in your MainMenu's create method add this line

this.button = this.game.add.button(0, 0, 'Button', this.actionOnClick,this);

This will add a button on the screen at location (0, 0) with the image with the ID button. This. actionOnClick is a callback and will be the function that is executed when you press the button. This " this" at the end is important otherwise your code wont run.

Once you added the button you need to actually create the method actionOnClick. Add another method called actionOnClick after your create method. inside the actionOnClick method add the following line.

this.state.start('Game');

this means that every tune you click the button it will start the game. After this you now have a basic menu and with a working button. Try adding more stuff to it.

Your methods should look something like this:

create: function () {
	  this.game.add.tileSprite(0, 0, 1000, 600, 'menuBackground');
	  this.button = this.game.add.button(0, 0, 'Button', this.actionOnClick,this);
	  this.button.scale.setTo(.2);// to make the button smaller

},
actionOnClick: function(){
	this.state.start('Game');
}