QML-Tutorial für Fortgeschrittene 2 – Befüllen der Spieloberfläche

Erstellen der Blöcke in JavaScript

Nachdem wir nun einige Typen definiert haben, können wir mit der Entwicklung des Spiels beginnen.

Die erste Aufgabe besteht darin, die Spielblöcke zu generieren. Jedes Mal, wenn auf die Schaltfläche „Neues Spiel“ geklickt wird, wird die Spielfläche mit einer neuen, zufälligen Anordnung von Blöcken gefüllt. Da wir für jedes neue Spiel dynamisch neue Blöcke generieren müssen, können wir die Blöcke nicht über „ Repeater “ definieren. Stattdessen erstellen wir die Blöcke in JavaScript.

Hier ist der JavaScript-Code zum Generieren der Blöcke, der in einer neuen Datei namens „ samegame.js “ enthalten ist. Der Code wird im Folgenden erläutert.

var blockSize = 40;
var maxColumn = 10;
var maxRow = 15;
var maxIndex = maxColumn * maxRow;
var board = new Array(maxIndex);
var component;

//Index function used instead of a 2D array
function index(column, row) {
    return column + (row * maxColumn);
}

function startNewGame() {
    //Delete blocks from previous game
    for (var i = 0; i < maxIndex; i++) {
        if (board[i] != null)
            board[i].destroy();
    }

    //Calculate board size
    maxColumn = Math.floor(background.width / blockSize);
    maxRow = Math.floor(background.height / blockSize);
    maxIndex = maxRow * maxColumn;

    //Initialize Board
    board = new Array(maxIndex);
    for (var column = 0; column < maxColumn; column++) {
        for (var row = 0; row < maxRow; row++) {
            board[index(column, row)] = null;
            createBlock(column, row);
        }
    }
}

function createBlock(column, row) {
    if (component == null)
        component = Qt.createComponent("Block.qml");

    // Note that if Block.qml was not a local file, component.status would be
    // Loading and we should wait for the component's statusChanged() signal to
    // know when the file is downloaded and ready before calling createObject().
    if (component.status == Component.Ready) {
        var dynamicObject = component.createObject(background);
        if (dynamicObject == null) {
            console.log("error creating block");
            console.log(component.errorString());
            return false;
        }
        dynamicObject.x = column * blockSize;
        dynamicObject.y = row * blockSize;
        dynamicObject.width = blockSize;
        dynamicObject.height = blockSize;
        board[index(column, row)] = dynamicObject;
    } else {
        console.log("error loading block component");
        console.log(component.errorString());
        return false;
    }
    return true;
}

Die Funktion „ startNewGame() “ löscht die im vorherigen Spiel erstellten Blöcke und berechnet die Anzahl der Zeilen und Spalten, die erforderlich sind, um das Spielfenster für das neue Spiel zu füllen. Anschließend erstellt sie ein Array zum Speichern aller Spielblöcke und ruft „ createBlock() “ auf, um genügend Blöcke zu erstellen, die das Spielfenster füllen.

Die Funktion ` createBlock() ` erstellt einen Block aus der Datei ` Block.qml ` und verschiebt den neuen Block an seine Position auf der Spielfläche. Dies umfasst mehrere Schritte:

• Qt.createComponent() wird aufgerufen, um einen Typ aus „ Block.qml “ zu generieren. Ist die Komponente bereit, können wir „ createObject() “ aufrufen, um eine Instanz des Elements „ Block “ zu erstellen.
• Falls ` createObject() ` den Wert `null` zurückgegeben hat (d. h. wenn beim Laden des Objekts ein Fehler aufgetreten ist), werden die Fehlerinformationen ausgegeben.
• Platzieren Sie den Block an seiner Position auf dem Spielfeld und legen Sie seine Breite und Höhe fest. Speichern Sie ihn außerdem im Array „blocks“, um später darauf zurückgreifen zu können.
• Geben Sie abschließend Fehlerinformationen in der Konsole aus, falls die Komponente aus irgendeinem Grund nicht geladen werden konnte (z. B. wenn die Datei fehlt).

JavaScript-Komponenten mit QML verbinden

Nun müssen wir den JavaScript-Code in „ samegame.js “ aus unseren QML-Dateien aufrufen. Dazu fügen wir diese Zeile in „ samegame.qml “ ein, die die JavaScript-Datei als Modul importiert:

import "samegame.js" as SameGame

Dadurch können wir auf alle Funktionen in „ samegame.js “ zugreifen, indem wir „SameGame“ als Präfix verwenden: zum Beispiel „ SameGame.startNewGame() “ oder „ SameGame.createBlock() “. Das bedeutet, dass wir nun den „ onClicked “-Handler der Schaltfläche „New Game“ wie folgt mit der Funktion „ startNewGame() “ verknüpfen können:

        Button {
            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
            text: "New Game"
            onClicked: SameGame.startNewGame()
        }

Wenn Sie also auf die Schaltfläche „Neues Spiel“ klicken, wird „ startNewGame() “ aufgerufen und ein Feld mit Blöcken generiert, wie folgt:

Nun haben wir einen Bildschirm voller Blöcke und können damit beginnen, die Spielmechanik hinzuzufügen.

Beispielprojekt @ code.qt.io