State objects structure questions

[Force]

Hello forum

I am writing a game using phaser v2.4.8 which has several states. The general structure of my game is:

• Level list - the player can select a level to play on a draggable background
• Level - each level consists of 5 puzzles (mini games)
• Puzzle - each puzzle is a state

I am fairly new to javascript and phaser (but not to programming or scripting languages).

Enough introductions - after watching several phaser tutorials I just couldn't understand why states are defined in the following way:

game.state.add('Boot', Game.Boot);
...

//in a separate Boot.js file:
var Game = {};

Game.Boot = function(game) {
   this.someVariableName = ...;
   ...
};

Game.Boot.prototype = {
   preload: function () {
   this.add.image(...);
   ...
   },
   create: function() {...},
   ...
};

Whereas my states are written as so:

game.state.add('Boot', BootState);
game.state.add('Preload', PreloadState);
...

//in a separate js file:
var BootState = {
   preload: function() {
   game.add.image(...);
   ...
   },
   create: function() {...},
   ...
}

//in a separate js file:
var PreloadState = {
   preload: function() {
   game.add.image(...);
   ...
   },
   create: function() {...},
   ...
}

My questions are:

1. What is the purpose of the 'game' parameter in Game.Boot = function(game) {...} ? Is the game object automatically passed as an argument in game.state.add('Boot', Game.Boot) ?
2. Is there any reason for me to use the first approach instead of the other one? What are the differences?

Thank you in advance for your responses

Force out

[rich]

This is just standard JavaScript really. The first method allows you to extend the Object from an existing prototype (like the Phaser.State object). The second just creates a brand new blank Object out-right, and populates that with functions instead.

It's kind of irrelevant which method you use if you're not extending the State object.