QML-Tutorial für Fortgeschrittene 2 - Auffüllen des Spielbildschirms

Erzeugen der Blöcke in JavaScript

Nachdem wir nun einige Typen geschrieben haben, können wir mit dem Schreiben des Spiels beginnen.

Die erste Aufgabe besteht darin, die Spielblöcke zu generieren. Jedes Mal, wenn die Schaltfläche "Neues Spiel" angeklickt wird, wird die Spielfläche mit einem neuen, zufälligen Satz von Blöcken aufgefüllt. Da wir für jedes neue Spiel dynamisch neue Blöcke generieren müssen, können wir die Blöcke nicht mit Repeater definieren. Stattdessen werden wir die Blöcke in JavaScript erstellen.

Hier ist der JavaScript-Code für die Erzeugung der Blöcke, der in einer neuen Datei, samegame.js, enthalten ist. Der Code wird im Folgenden erklärt.

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 der Blöcke, die erforderlich sind, um das Spielfenster für das neue Spiel zu füllen. Dann erstellt sie ein Array, um alle Spielblöcke zu speichern, und ruft createBlock() auf, um genügend Blöcke zu erstellen, um das Spielfenster zu 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 geschieht in mehreren Schritten:

• Qt.createComponent() wird aufgerufen, um einen Typ aus Block.qml zu erzeugen. Wenn die Komponente fertig ist, können wir createObject() aufrufen, um eine Instanz des Elements Block zu erstellen.
• Wenn createObject() null zurückgegeben hat (d. h. wenn beim Laden des Objekts ein Fehler aufgetreten ist), wird die Fehlerinformation gedruckt.
• Platzieren Sie den Block an seiner Position auf dem Brett und legen Sie seine Breite und Höhe fest. Speichern Sie den Block auch im Block-Array, um ihn später wieder verwenden zu können.
• Schließlich geben Sie eine Fehlerinformation auf der Konsole aus, wenn die Komponente aus irgendeinem Grund nicht geladen werden konnte (z. B. wenn die Datei fehlt).

Verbinden von JavaScript-Komponenten mit QML

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

import "samegame.js" as SameGame

Dies ermöglicht es uns, auf alle Funktionen innerhalb von samegame.js zu verweisen, indem wir "SameGame" als Präfix verwenden: z. B. SameGame.startNewGame() oder SameGame.createBlock(). Das bedeutet, dass wir jetzt den Handler der Schaltfläche "Neues Spiel" onClicked mit der Funktion startNewGame() verbinden können, etwa so:

        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 erzeugt ein Feld mit Blöcken, etwa so:

Jetzt haben wir einen Bildschirm mit Blöcken, und wir können damit beginnen, die Spielmechanik hinzuzufügen.

Beispielprojekt @ code.qt.io