Von den Wänden abprallen

Von den Grenzen der Spielwelt abprallen

Am einfachsten bringen wir den Ball dazu, von den Wänden abzuprallen, indem wir dem Framework mitteilen, dass es die Grenzen des <canvas>-Elements als Wände behandeln und den Ball nicht darüber hinaus bewegen soll. In Phaser lässt sich das mit der Methode setCollideWorldBounds() erreichen. Fügen Sie diese Zeile direkt nach dem vorhandenen Aufruf der Methode this.ball.body.setVelocity() ein:

this.ball.body.setCollideWorldBounds(true, 1, 1);

Mit true wird die Kollisionserkennung an den Grenzen der Spielwelt aktiviert. Die beiden 1-Werte geben den Abprallfaktor auf der x- beziehungsweise y-Achse an. Trifft der Ball auf eine Wand, prallt er mit derselben Geschwindigkeit zurück, die er vor dem Aufprall hatte. Laden Sie index.html erneut – jetzt sollten Sie sehen, wie der Ball von allen Wänden abprallt und sich innerhalb des Canvas-Bereichs bewegt.

Vergleichen Sie Ihren Code

So sollte Ihr bisheriger Code aussehen; das Beispiel ist direkt ausführbar. Um den Quellcode anzuzeigen, klicken Sie auf die Schaltfläche „Play“.

<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);
    this.ball.body.setCollideWorldBounds(true, 1, 1);
  }
  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);

Nächste Schritte

Allmählich sieht das Ganze wie ein Spiel aus, aber wir können es noch nicht steuern. Höchste Zeit, den Spielerschläger und die Steuerung einzuführen.

• Zurück
• Weiter