Tutoriel avancé sur QML 2 - Remplir le canevas du jeu

Génération des blocs en JavaScript

Maintenant que nous avons défini quelques types, commençons à écrire le jeu.

La première tâche consiste à générer les blocs du jeu. Chaque fois que l'on clique sur le bouton « New Game », le canevas du jeu est rempli d'un nouvel ensemble aléatoire de blocs. Comme nous devons générer dynamiquement de nouveaux blocs pour chaque nouvelle partie, nous ne pouvons pas utiliser Repeater pour définir les blocs. À la place, nous allons créer les blocs en JavaScript.

Voici le code JavaScript permettant de générer les blocs, contenu dans un nouveau fichier, samegame.js. Ce code est expliqué ci-dessous.

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;
}

La fonction ` startNewGame() ` supprime les blocs créés lors de la partie précédente et calcule le nombre de lignes et de colonnes de blocs nécessaires pour remplir la fenêtre de jeu de la nouvelle partie. Ensuite, elle crée un tableau pour stocker tous les blocs du jeu, puis appelle ` createBlock() ` afin de créer suffisamment de blocs pour remplir la fenêtre de jeu.

La fonction ` createBlock() ` crée un bloc à partir du fichier ` Block.qml ` et déplace le nouveau bloc vers sa position sur le canevas du jeu. Cela implique plusieurs étapes :

• Qt.createComponent() est appelée pour générer un type à partir de Block.qml. Si le composant est prêt, on peut appeler createObject() pour créer une instance de l’élément Block.
• Si ` createObject() ` a renvoyé `null` (c'est-à-dire s'il y a eu une erreur lors du chargement de l'objet), affichez les informations relatives à l'erreur.
• Placez le bloc à sa position sur le tableau et définissez sa largeur et sa hauteur. Enregistrez-le également dans le tableau des blocs pour référence ultérieure.
• Enfin, affichez les informations d’erreur sur la console si le composant n’a pas pu être chargé pour une raison quelconque (par exemple, si le fichier est manquant).

Connexion des composants JavaScript à QML

Nous devons maintenant appeler le code JavaScript de samegame.js depuis nos fichiers QML. Pour ce faire, nous ajoutons cette ligne à samegame.qml, qui importe le fichier JavaScript en tant que module:

import "samegame.js" as SameGame

Cela nous permet de faire référence à n'importe quelle fonction de samegame.js en utilisant « SameGame » comme préfixe : par exemple, SameGame.startNewGame() ou SameGame.createBlock(). Nous pouvons donc désormais connecter le gestionnaire d'onClicked s du bouton « New Game » à la fonction startNewGame(), comme ceci :

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

Ainsi, lorsque vous cliquez sur le bouton « Nouvelle partie », la fonction ` startNewGame() ` est appelée et génère un champ de blocs, comme ceci :

Nous disposons désormais d’un écran de blocs et pouvons commencer à ajouter les mécanismes de jeu.

Exemple de projet sur code.qt.io