Buttons

Wir benötigen eine Variable, um einen booleschen Wert zu speichern, der darstellt, ob das Spiel derzeit gespielt wird oder nicht, und eine weitere, um unseren Knopf darzustellen. Fügen Sie diese Zeilen unter Ihren anderen Variablendefinitionen hinzu:

let playing = false;
let startButton;

Wir können das Buttonspritesheet auf die gleiche Weise laden, wie wir die Wackelanimation des Balls geladen haben. Fügen Sie das Folgende am Ende der preload() Funktion hinzu:

game.load.spritesheet("button", "img/button.png", 120, 40);

Ein einzelner Buttonrahmen ist 120 Pixel breit und 40 Pixel hoch.

Sie müssen auch das Buttonspritesheet von GitHub herunterladen und es in Ihrem /img Verzeichnis speichern.

Das Hinzufügen des neuen Buttons zum Spiel erfolgt mit der add.button Methode. Fügen Sie die folgenden Zeilen am Ende Ihrer create() Funktion hinzu:

startButton = game.add.button(
  game.world.width * 0.5,
  game.world.height * 0.5,
  "button",
  startGame,
  this,
  1,
  0,
  2,
);
startButton.anchor.set(0.5);

Die Parameter der button() Methode sind wie folgt:

• Die x- und y-Koordinaten des Buttons
• Der Name des grafischen Assets, das für den Button angezeigt werden soll
• Eine Rückruffunktion, die ausgeführt wird, wenn der Button gedrückt wird
• Eine Referenz auf this, um den Ausführungskontext anzugeben
• Die Frames, die für die over, out und down Ereignisse verwendet werden.

Nun müssen wir die startGame() Funktion definieren, die im obigen Code referenziert wird:

function startGame() {
  startButton.destroy();
  ball.body.velocity.set(150, -150);
  playing = true;
}

Wenn der Button gedrückt wird, entfernen wir den Button, setzen die Anfangsgeschwindigkeit des Balls und setzen die playing Variable auf true.

Schließlich, für diesen Abschnitt, gehen Sie zurück in Ihre create() Funktion, finden Sie die Zeile ball.body.velocity.set(150, -150); und entfernen Sie sie. Sie möchten, dass sich der Ball nur bewegt, wenn der Button gedrückt wird, nicht vorher!

Es funktioniert wie erwartet, aber wir können den Schläger immer noch bewegen, wenn das Spiel noch nicht begonnen hat, was etwas albern aussieht. Um dies zu verhindern, können wir die playing Variable nutzen und den Schläger nur dann beweglich machen, wenn das Spiel gestartet ist. Passen Sie dazu die update() Funktion wie folgt an:

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

Auf diese Weise ist der Schläger unbeweglich, nachdem alles geladen und vorbereitet ist, aber bevor das eigentliche Spiel beginnt.

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

Das Letzte, was wir in dieser Artikelsreihe tun werden, ist, das Gameplay noch interessanter zu machen, indem wir zufällige Elemente hinzufügen, wie der Ball vom Schläger abprallt.

• Zurück
• Weiter