物理 - 游戏开发 | MDN

添加物理

Phaser 内置了三种不同的物理引擎——Arcade Physics、Impact Physics 和 Matter.js Physics——还有第四种选择 Box2D，它是一个商业插件。对于我们这样的简单游戏，可以使用 Arcade Physics 引擎。我们不需要任何复杂的几何计算——毕竟，这只是一颗在墙壁和砖块之间反弹的球。

首先，让我们在游戏中配置 Arcade Physics 引擎。将 physics 属性添加到 config 对象中，如下所示：

const config = {
  // ...
  physics: {
    default: "arcade",
  },
};

接下来，我们需要为我们的球启用物理系统——Phaser 对象物理默认情况下是禁用的。在 create() 方法的底部添加以下行：

this.physics.add.existing(this.ball);

接下来，如果我们想在屏幕上移动我们的球，我们可以设置其 body 上的 velocity。再次将以下行添加到 create() 的底部：

this.ball.body.setVelocity(150, 150);

移除我们之前的 update 指令

请记住从 update() 方法中移除我们之前添加值的 x 和 y 的旧方法，即将其恢复为空状态：

class ExampleScene extends Phaser.Scene {
  // ...
  update() {}
}

现在我们已经通过物理引擎正确处理了这个问题。

再次尝试重新加载 index.html。目前，物理引擎没有重力或摩擦力，因此球将以恒定速度沿给定方向运动。

物理的乐趣

您可以通过物理引擎做更多的事情，例如，在 create() 中添加 this.ball.body.gravity.y = 500;，这将设置球的垂直重力。尝试将速度更改为 this.ball.body.setVelocity(150, -150);，您会看到球向上发射，但随后由于重力将其拉向下方而下落。

这类功能只是冰山一角——有各种函数和变量可以帮助您操纵物理对象。请查看官方物理文档，并参阅使用 Arcade 和 Matter.js 物理系统的大量示例集合。

Compare your code

这是您到目前为止应该看到的效果，实时运行。要查看其源代码，请单击“播放”按钮。

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.90.0/phaser.js"></script>

* {
  padding: 0;
  margin: 0;
}

class ExampleScene extends Phaser.Scene {
  ball;

  preload() {
    this.load.setBaseURL(
      "https://mdn.github.io/shared-assets/images/examples/2D_breakout_game_Phaser",
    );

    this.load.image("ball", "ball.png");
  }
  create() {
    this.ball = this.add.sprite(50, 50, "ball");
    this.physics.add.existing(this.ball);
    this.ball.body.setVelocity(150, 150);
  }
  update() {}
}

const config = {
  type: Phaser.CANVAS,
  width: 480,
  height: 320,
  scene: ExampleScene,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  backgroundColor: "#eeeeee",
  physics: {
    default: "arcade",
  },
};

const game = new Phaser.Game(config);

后续步骤

现在我们可以进入下一课，看看如何让球反弹墙壁。

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年8月2日⁩，作者为 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的某个问题