javascript - 使用多个 .js 文件处理多个阶段

Question

所以基本上，我想创建一个平台游戏或迷宫游戏(是的，非常基本，因为我仍在学习，无论如何不会有太多东西)。

我想要多个 .js 文件，每个文件处理不同的任务，例如:

• main.js - 游戏菜单
• level1.js - 游戏级别 1
• level2.js - 游戏第 2 级
• winlose.js - 与游戏菜单类似，仅显示您是否赢得或输掉游戏(可能重新启动 -> 切换回 main.js)

到目前为止我得到的是基本游戏(目前仍在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");

目前已编码为“迷宫”风格的游戏，在它成为平台游戏之前，这就是为什么可能有一些未使用的代码。现在的问题是，我不知道如何使用多个 .js 文件并在 Phaser 中更改阶段。我希望我写的所有内容都是可以理解的，如果不能理解，请随时询问，我会尽力解释更多! :)

提前谢谢您。

Answer 1

首先，您需要为每个状态创建js文件。这些文件将遵循与您的 mainState 相同的模式，即每个文件都有自己的 preload、create 和 update 方法。

然后在 mainState 末尾，您将把所有这些 state 添加到您的游戏中(考虑到您的游戏状态文件的名称为 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");

但在您的游戏可以访问这些文件之前，您必须将它们包含在 index.html 文件中。只需在 mainState.js 文件

之前添加所需的状态文件即可

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

请记住，您的状态必须添加在 mainState 之前，以便 Phaser 可以加载它们。

要更改状态，您只需使用

game.state.start(name_of_state);