Qt开发案例实战：QML高级教程2-填充游戏画布

第一项任务是生成游戏块。每次单击“新建游戏”按钮时，游戏画布上都会填充一组新的随机块。由于我们需要为每个新游戏动态生成新块，因此我们无法使用Repeater来定义块。

Qt组件推荐：

• QtitanRibbon| 下载试用: 遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件，致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
• QtitanChart | 下载试用 :是一个C ++库，代表一组控件，这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。并且支持所有主要的桌面

现在我们已经编写了一些类型，让我们开始编写游戏。

第一项任务是生成游戏块。每次单击“新建游戏”按钮时，游戏画布上都会填充一组新的随机块。由于我们需要为每个新游戏动态生成新块，因此我们无法使用Repeater来定义块。相反，我们将使用JavaScript创建块。

这是JavaScript代码，用于生成包含在新文件中的块samegame.js。该代码在下面说明。

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 arrayfunction index(column, row) {    return column + (row *}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;}

该startNewGame()函数删除在先前游戏中创建的块，并计算填充新游戏的游戏窗口所需的块的行数和列数。然后，它创建一个数组来存储所有游戏块，并调用createBlock()创建足够的块来填充游戏窗口。

createBlock()函数从Block.qml文件创建一个块，然后将新块移动到其在游戏画布上的位置。这涉及几个步骤：

• 调用Qt.createComponent（）从中生成类型Block.qml。如果组件已准备就绪，我们可以调用createObject()创建该Block项目的实例。
• 如果createObject()返回null（即，加载对象时发生错误），则打印错误信息。
• 将模块放置在板上的位置，然后设置其宽度和高度。另外，将其存储在blocks数组中以备将来参考。
• 最后，如果由于某种原因（例如，文件丢失）而无法加载组件，则将错误信息打印到控制台。

将JavaScript组件连接到QML

现在，我们需要samegame.js从QML文件中调用JavaScript代码。为此，我们添加以下行samegame.qml，将JavaScript文件作为模块导入到该行：

import "samegame.js" as SameGame

这使我们可以samegame.js使用“ SameGame”作为前缀来引用任何函数：例如SameGame.startNewGame()或SameGame.createBlock()。这意味着我们现在可以将New Game按钮的onClicked处理程序连接到该startNewGame()函数，如下所示：

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

因此，当您单击“新建游戏”按钮时，将startNewGame()被调用并生成一个块字段，如下所示：

现在，我们有了一个方块屏幕，我们可以开始添加游戏机制了。

标签：