Kollisionsdetektion

Die Physik-Engine macht alles viel einfacher — wir müssen nur zwei einfache Codezeilen hinzufügen. Fügen Sie zuerst eine neue Zeile in Ihrer update()-Funktion hinzu, die die Kollisionsdetektion zwischen Ball und Ziegel überprüft, wie unten gezeigt:

function update() {
  game.physics.arcade.collide(ball, paddle);
  game.physics.arcade.collide(ball, bricks, ballHitBrick);
  paddle.x = game.input.x || game.world.width * 0.5;
}

Die Position des Balls wird im Vergleich zu den Positionen aller Ziegel in der Gruppe berechnet. Der dritte, optionale Parameter ist die Funktion, die ausgeführt wird, wenn eine Kollision auftritt — ballHitBrick(). Erstellen Sie diese neue Funktion am Ende Ihres Codes, direkt vor dem schließenden </script>-Tag, wie folgt:

function ballHitBrick(ball, brick) {
  brick.kill();
}

Und das war's! Laden Sie Ihren Code neu und Sie sollten sehen können, dass die neue Kollisionsdetektion wie erforderlich funktioniert.

Dank Phaser werden zwei Parameter an die Funktion übergeben — der erste ist der Ball, den wir explizit in der Kollisionsmethode definiert haben, und der zweite ist der einzelne Ziegel aus der Ziegelgruppe, mit dem der Ball kollidiert. Innerhalb der Funktion entfernen wir den betreffenden Ziegel vom Bildschirm, indem wir die kill()-Methode darauf ausführen.

Man würde erwarten, viel mehr eigene Berechnungen schreiben zu müssen, um die Kollisionsdetektion mit purem JavaScript zu implementieren. Das ist das Schöne an der Verwendung des Frameworks — Sie können viel langweiligen Code Phaser überlassen und sich auf die unterhaltsameren und interessanteren Teile der Spielentwicklung konzentrieren.

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

Wir können die Ziegel treffen und entfernen, was bereits eine schöne Ergänzung zum Gameplay darstellt. Es wäre noch besser, die zerstörten Ziegel zu zählen und den Punktestand entsprechend zu erhöhen.

• Zurück
• Weiter