Das Ziegel-Feld erstellen

Zuerst lassen Sie uns die benötigten Variablen definieren — fügen Sie die folgenden unter Ihren vorherigen Variablendefinitionen hinzu:

let bricks;
let newBrick;
let brickInfo;

Die Variable bricks wird verwendet, um eine Gruppe zu erstellen, newBrick wird ein neues Objekt sein, das bei jeder Iteration der Schleife zur Gruppe hinzugefügt wird, und brickInfo wird alle benötigten Daten speichern.

Laden Sie als Nächstes das Bild des Ziegels — fügen Sie den folgenden load.image()-Aufruf direkt unter den anderen hinzu:

function preload() {
  // …
  game.load.image("brick", "img/brick.png");
}

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

Wir werden den gesamten Code zum Zeichnen der Ziegel in eine initBricks-Funktion einfügen, um ihn vom Rest des Codes getrennt zu halten. Fügen Sie am Ende der create()-Funktion einen Aufruf zu initBricks hinzu:

function create() {
  // …
  initBricks();
}

Nun zur Funktion selbst. Fügen Sie die initBricks()-Funktion am Ende unseres Spielcodes hinzu, direkt vor dem schließenden </script>-Tag, wie unten gezeigt. Zunächst haben wir das brickInfo-Objekt eingeschlossen, da dies bald sehr nützlich sein wird:

function initBricks() {
  brickInfo = {
    width: 50,
    height: 20,
    count: {
      row: 3,
      col: 7,
    },
    offset: {
      top: 50,
      left: 60,
    },
    padding: 10,
  };
}

Dieses brickInfo-Objekt wird alle Informationen enthalten, die wir benötigen: die Breite und Höhe eines einzelnen Ziegels, die Anzahl der Reihen und Spalten von Ziegeln, die wir auf dem Bildschirm sehen werden, den oberen und linken Versatz (die Position auf der Leinwand, an der wir beginnen, die Ziegel zu zeichnen) und den Abstand zwischen jeder Reihe und Spalte von Ziegeln.

Nun lassen Sie uns anfangen, die Ziegel selbst zu erstellen — fügen Sie zuerst eine leere Gruppe hinzu, um die Ziegel zu enthalten, indem Sie die folgende Zeile am Ende der initBricks()-Funktion hinzufügen:

bricks = game.add.group();

Wir können durch die Reihen und Spalten iterieren, um bei jeder Iteration einen neuen Ziegel zu erstellen — fügen Sie die folgende verschachtelte Schleife unter der vorherigen Codezeile hinzu:

for (let c = 0; c < brickInfo.count.col; c++) {
  for (let r = 0; r < brickInfo.count.row; r++) {
    // create new brick and add it to the group
  }
}

Auf diese Weise werden wir genau die Anzahl an Ziegeln erstellen, die wir benötigen und sie alle in einer Gruppe enthalten haben. Nun müssen wir etwas Code innerhalb der verschachtelten Schleifenstruktur hinzufügen, um jeden Ziegel zu zeichnen. Füllen Sie den Inhalt wie unten gezeigt aus:

for (let c = 0; c < brickInfo.count.col; c++) {
  for (let r = 0; r < brickInfo.count.row; r++) {
    let brickX = 0;
    let brickY = 0;
    newBrick = game.add.sprite(brickX, brickY, "brick");
    game.physics.enable(newBrick, Phaser.Physics.ARCADE);
    newBrick.body.immovable = true;
    newBrick.anchor.set(0.5);
    bricks.add(newBrick);
  }
}

Hier iterieren wir durch die Reihen und Spalten, um die neuen Ziegel zu erstellen und sie auf dem Bildschirm zu platzieren. Der neu erstellte Ziegel ist für die Arcade-Physik-Engine aktiviert, sein Körper wird so eingestellt, dass er unbeweglich ist (damit er sich nicht bewegt, wenn er von dem Ball getroffen wird), und wir setzen auch den Anker in der Mitte und fügen den Ziegel zur Gruppe hinzu.

Das Problem ist derzeit, dass wir alle Ziegel an einem Ort malen, bei den Koordinaten (0,0). Was wir tun müssen, ist, jeden Ziegel an seiner eigenen x- und y-Position zu zeichnen. Aktualisieren Sie die Zeilen brickX und brickY wie folgt:

const brickX =
  c * (brickInfo.width + brickInfo.padding) + brickInfo.offset.left;
const brickY =
  r * (brickInfo.height + brickInfo.padding) + brickInfo.offset.top;

Jede brickX-Position wird als brickInfo.width plus brickInfo.padding, multipliziert mit der Spaltennummer c, plus dem brickInfo.offset.left berechnet; die Logik für das brickY ist identisch, außer dass es die Werte für die Zeilennummer r, brickInfo.height und brickInfo.offset.top verwendet. Jetzt kann jeder einzelne Ziegel an seiner richtigen Stelle platziert werden, mit Abstand zwischen jedem Ziegel, und versetzt von den linken und oberen Canvasrändern gezeichnet werden.

Hier ist der vollständige Code für die initBricks() Funktion:

function initBricks() {
  brickInfo = {
    width: 50,
    height: 20,
    count: {
      row: 3,
      col: 7,
    },
    offset: {
      top: 50,
      left: 60,
    },
    padding: 10,
  };
  bricks = game.add.group();
  for (let c = 0; c < brickInfo.count.col; c++) {
    for (let r = 0; r < brickInfo.count.row; r++) {
      const brickX =
        c * (brickInfo.width + brickInfo.padding) + brickInfo.offset.left;
      const brickY =
        r * (brickInfo.height + brickInfo.padding) + brickInfo.offset.top;
      newBrick = game.add.sprite(brickX, brickY, "brick");
      game.physics.enable(newBrick, Phaser.Physics.ARCADE);
      newBrick.body.immovable = true;
      newBrick.anchor.set(0.5);
      bricks.add(newBrick);
    }
  }
}

Wenn Sie index.html zu diesem Zeitpunkt neu laden, sollten die Ziegel auf dem Bildschirm angezeigt werden, gleichmäßig voneinander entfernt.

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:

Allerdings fehlt noch etwas. Der Ball geht durch die Ziegel, ohne zu stoppen — wir benötigen eine ordnungsgemäße Kollisionserkennung.

• Zurück
• Weiter