Bounce off the walls

Dies ist der 6. Schritt von insgesamt 16 des Gamedev Phaser Tutorials. Sie finden den Quellcode, wie er nach Abschluss dieser Lektion aussehen sollte, unter Gamedev-Phaser-Content-Kit/demos/lesson06.html.

Da die Physik nun eingeführt wurde, können wir mit der Implementierung der Kollisionsabfrage im Spiel beginnen – zuerst werden wir uns die Wände anschauen.

Abprallen an den Welträndern

Die einfachste Möglichkeit, unseren Ball von den Wänden abprallen zu lassen, besteht darin, dem Framework mitzuteilen, dass wir die Grenzen des <canvas>-Elements als Wände behandeln und den Ball nicht darüber hinaus bewegen lassen wollen. In Phaser kann dies einfach mit der collideWorldsBound-Eigenschaft erreicht werden. Fügen Sie diese Zeile direkt nach dem Aufruf der bestehenden Methode game.physics.enable() hinzu:

js
ball.body.collideWorldBounds = true;

Nun wird der Ball am Rand des Bildschirms stoppen, anstatt zu verschwinden, aber er prallt nicht ab. Um dies zu ermöglichen, müssen wir seine Elastizität einstellen. Fügen Sie folgende Zeile unterhalb der vorherigen ein:

js
ball.body.bounce.set(1);

Versuchen Sie, index.html erneut zu laden – jetzt sollte der Ball von allen Wänden abprallen und sich innerhalb des <canvas>-Bereichs bewegen.

Vergleichen Sie Ihren Code

Sie können den fertigen Code für diese Lektion im Live-Demo unten überprüfen und damit herumspielen, um besser zu verstehen, wie er funktioniert:

Nächste Schritte

Dies beginnt jetzt mehr wie ein Spiel auszusehen, aber wir können es in keiner Weise steuern – es ist höchste Zeit, das Spielerpaddel und die Steuerung vorzustellen.