使用多个.js文件处理多个阶段 [英] Handling multiple Stages with multiple .js files

问题描述

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

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

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

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

• main.js-游戏菜单
• level1.js-游戏的第1级
• level2.js-游戏的第2级
• winlose.js-与游戏菜单类似，仅显示是输还是输(可能的重启->换回main.js)

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

在成为平台游戏者之前，当前已被编码为迷宫"风格的游戏，这就是为什么可能存在一些未使用的代码的原因. 现在，问题是，我不知道如何使用多个.js文件并在Phaser中更改阶段. 我希望我写的所有内容都是可以理解的，如果不能理解，请随时提出，我将尽力解释更多！ :)

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! :)

谢谢.

推荐答案

对于基于关卡的游戏，我不建议为每个关卡使用单独的.js文件.如果除了关卡布局之外，游戏中的每个状态都基本相同，并且大部分内容都具有相同的复制和粘贴代码，那么这不是一个好兆头.

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.

一种更好的方法，您可以在单独的.js或.json文件中声明每个级别的级别布局和其他变量，如下所示:

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."
    ]
  }
]

然后您可以具有一个单独的levelstate.js状态，并为级别nr添加一个变量.这种状态基本上是游戏的主要循环.

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
  }

有关更多信息，请参见这篇文章在Phaser论坛上

For more info see this post on the Phaser forums

这篇关于使用多个.js文件处理多个阶段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！