彩票走势图

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

转帖|使用教程|编辑:鲍佳佳|2021-03-18 11:08:55.213|阅读 370 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Qt是一个跨平台框架,通常用作图形工具包,它不仅创建CLI应用程序中非常有用。而且它也可以在三种主要的台式机操作系统以及移动操作系统(如Symbian,Nokia Belle,Meego Harmattan,MeeGo或BB10)以及嵌入式设备,Android(Necessitas)和iOS的端口上运行。现在我们为你提供了免费的试用版。

下载Qt6最新试用版

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 array
function 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()被调用并生成一个块字段,如下所示:

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


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP