Handling multiple Stages with multiple .js files

Question

So basically, i want to create a platformer or labyrinth game(Yes, very basic since im still learning, there wont be much stuff anyway).

I want to have multiple .js files, each handling different tasks, for example:

• main.js - Game menu
• level1.js - Level 1 of the game
• level2.js - Level 2 of the game
• winlose.js - Similar to game menu, just showing if you win or lose the game(Possible Restart -> swap back to main.js)

What i got so far is the basic game(currently still in the main.js)

var mainState = {
  preload: function() {
    game.load.image("player", "assets/player.png");
    game.load.image("wall", "assets/wall.png");
    game.load.image("coin", "assets/coin.png");
    game.load.image("enemy", "assets/lava.png");
  },

  create: function() {
    game.stage.backgroundColor = "#3598db";
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.world.enableBody = true;

    this.player = game.add.sprite(150, 50, "player");

    this.walls = game.add.group();
    this.coins = game.add.group();
    this.enemies = game.add.group();

    var level = [
      "xxxxxxxxxxxxxxxx",
      "x   x  x x     x",
      "x xxx xx   xxx x",
      "x xx     xxx x x",
      "x  x  xx     x x",
      "xx x x  x xxx  x",
      "x      x  x!  xx",
      "xxxxxxxxxxxxxxxx",
    ]

    for(var i = 0; i < level.length; i++) {
      for(var j = 0; j < level[i].length; j++) {
        if(level[i][j] == "x") {
          var wall = game.add.sprite(50*j, 50*i, "wall");
          this.walls.add(wall);
          wall.body.immovable = true;
        }
        else if(level[i][j] == "o") {
          var coin = game.add.sprite(50*j, 50*i, "coin");
          this.coins.add(coin);
        }
        else if(level[i][j] == "!") {
          var enemy = game.add.sprite(50*j, 50*i, "enemy");
          this.enemies.add(enemy);
        }
      }
    }

    cursors = game.input.keyboard.createCursorKeys();
  },

  update: function() {
    this.player.body.velocity.y = 0;
    this.player.body.velocity.x = 0;

    if (cursors.left.isDown) {
      this.player.body.velocity.x = -200;
    }
    if (cursors.right.isDown) {
      this.player.body.velocity.x = +200;
    }
    if (cursors.up.isDown) {
      this.player.body.velocity.y = -200;
    }
    if (cursors.down.isDown) {
      this.player.body.velocity.y = 200;
    }

    game.physics.arcade.collide(this.player, this.walls);
    game.physics.arcade.overlap(this.player, this.coins, this.takeCoins, null, this);
    game.physics.arcade.overlap(this.player, this.enemies, this.changeStage, null, this);
  },

  changeStage: function() {
    game.state.start("main"); //Swap to Level 2
    console.log("u win!");
  },
};

var game = new Phaser.Game(800, 400);
game.state.add("main", mainState);
game.state.start("main");

Currently coded into a "labyrinth" style game, before it was a platformer, thats why theres probably some unused code. Now, the problem is, i have no clue how to use multiple .js files and change stages within Phaser. I hope everything i've written is understandable, if not, feel free to ask and i'll try my best to explain more! :)

Thank you in advance.

Answer 1

First, you would need to create js files for each of your states. These files would follow the same pattern as that of your mainState i.e. each will have there own preload, create and update methods.

Then at the end of your mainState you will add all these states into your game as such (considering your game state files have names level1.js, level2.js, winLose.js)

var game = new Phaser.Game(800, 400);
game.state.add("main", mainState);
game.state.add("level1", level1);
game.state.add("level2", level2);
game.state.add("winlose", winLose);
game.state.start("main");

But before your game can access these files, you would have to include them in your index.html file. Simply add the required state files before your mainState.js file

<script src="level1.js"></script>
<script src="level2.js"></script>
<script src="winLose.js"></script>
<script src="mainState.js"></script>

Remember, your states have to be added before your mainState so that Phaser could load them.

To change states, you can simply use

game.state.start(name_of_state);

Answer 2

For a level based game I wouldn't recommend using separate .js files for each level. If each state in your game is basically the same, except for the level layout, and large parts are the same copy&paste code then that's not a good sign.

A better way to do this, you could declare the level layout and other variables per level in a separate .js or .json file, so something like this:

var MyLevelData = [
  {
    title: "First level",
    timelimit: 100,
    layout: [
          "xxxxxxxxxxxxxxxx",
          "x   x  x x     x",
          "x xxx xx   xxx x",
          "x xx     xxx x x",
          "x  x  xx     x x",
          "xx x x  x xxx  x",
          "x      x  x!  xx",
          "xxxxxxxxxxxxxxxx"
    ]
  },
  {
    title: "The second challenge",
    timelimit: 80,
    layout: [
          "etc.",
          "etc."
    ]
  }
]

And then you can have one single levelstate.js state, and add a variable for the level nr. This state is basically the main game loop.

var LevelState = {
  levelindex: 0, // <- which level currently playing

  create: function() {
    var level = MyLevelData[this.levelindex].layout;
    //etc.

And you can add a button to go to the next level, which calls something like this function

  ButtonNextLevel: function() {
    this.levelindex++;
    this.state.start('levelstate'); // just restart the same state
  }

For more info see this post on the Phaser forums