Qt是一個跨平臺框架，通常用作圖形工具包，它不僅創建CLI應用程序中非常有用。而且它也可以在三種主要的臺式機操作系統以及移動操作系統（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式設備，Android（Necessitas）和iOS的端口上運行。現在我們為你提供了免費的試用版。

下載Qt6最新試用版

Qt組件推薦：

通過前兩章的講解（創建游戲畫布和塊，填充游戲畫布），現在我們已經擁有了所有游戲組件，可以添加游戲邏輯了，該邏輯規定玩家如何與積木互動以及如何玩游戲，直到贏或輸。

為此，我們將以下功能添加到samegame.js：

• handleClick(x,y)
• floodFill(xIdx,yIdx,type)
• shuffleDown()
• victoryCheck()
• floodMoveCheck(xIdx, yIdx, type)

由于這是關于QML的教程，而不是游戲設計的教程，因此我們將僅在下面進行討論handleClick()，victoryCheck()因為它們直接與QML類型交互。請注意，盡管此處的游戲邏輯是用JavaScript編寫的。

啟用鼠標單擊交互

為了更方便的JavaScript代碼接口與QML類型，我們增加了叫做項目gameCanvas來samegame.qml。它將背景替換為包含塊的項目。它還接受來自用戶的鼠標輸入。這是商品代碼：

     Item {
            id: gameCanvas

            property int score: 0
            property int blockSize: 40

            width: parent.width - (parent.width % blockSize)
            height: parent.height - (parent.height % blockSize)
            anchors.centerIn: parent

            MouseArea {
                anchors.fill: parent
                onClicked: SameGame.handleClick(mouse.x, mouse.y)
            }
        }

gameCanvas項是棋盤的精確尺寸，并有一個分數屬性和一個MouseArea來處理鼠標點擊。塊現在被創建為它的子項目，它的尺寸被用來確定棋盤的大小，這樣應用程序就可以根據可用的屏幕尺寸進行縮放。由于它的尺寸被綁定到blockSize的倍數上，blockSize被移出了samegame.js，作為一個QML屬性移到了samegame.qml中。注意，它仍然可以從腳本中訪問。

當點擊時，MouseArea會調用samegame.js中的handleClick()，它決定玩家的點擊是否會導致任何塊被移除，如果需要的話，還會用當前的分數更新gameCanvas.score。這里是handleClick()函數。

function handleClick(xPos, yPos) {
    var column = Math.floor(xPos / gameCanvas.blockSize);
    var row = Math.floor(yPos / gameCanvas.blockSize);
    if (column >= maxColumn || column < 0 || row >= maxRow || row < 0)
        return;
    if (board[index(column, row)] == null)
        return;
    //If it's a valid block, remove it and all connected (does nothing if it's not connected)
    floodFill(column, row, -1);
    if (fillFound <= 0)
        return;
    gameCanvas.score += (fillFound - 1) * (fillFound - 1);
    shuffleDown();
    victoryCheck();
}

請注意，如果score是samegame.js文件中的全局變量，則將無法綁定到該文件。您只能綁定到QML屬性。

更新分數

當玩家單擊一個塊并觸發時handleClick()，handleClick()還會調用victoryCheck()來更新比分并檢查玩家是否已完成游戲。這是victoryCheck()代碼：

function victoryCheck() {
    //Award bonus points if no blocks left
    var deservesBonus = true;
    for (var column = maxColumn - 1; column >= 0; column--)
        if (board[index(column, maxRow - 1)] != null)
        deservesBonus = false;
    if (deservesBonus)
        gameCanvas.score += 500;

    //Check whether game has finished
    if (deservesBonus || !(floodMoveCheck(0, maxRow - 1, -1)))
        dialog.show("Game Over. Your score is " + gameCanvas.score);
}

gameCanvas.score如果游戲結束，則更新值并顯示“ Game Over”對話框。

“游戲結束”對話框是使用Dialog中定義的類型創建的Dialog.qml。這是Dialog.qml代碼。注意如何通過功能和信號從腳本文件中強制使用它：

import QtQuick 2.0

Rectangle {
    id: container

    function show(text) {
        dialogText.text = text;
        container.opacity = 1;
    }

    function hide() {
        container.opacity = 0;
    }

    width: dialogText.width + 20
    height: dialogText.height + 20
    opacity: 0

    Text {
        id: dialogText
        anchors.centerIn: parent
        text: ""
    }

    MouseArea {
        anchors.fill: parent
        onClicked: hide();
    }
}

這就是它在主samegame.qml文件中的用法：

   Dialog {
        id: dialog
        anchors.centerIn: parent
        z: 100
    }

我們為對話框指定z值100，以確保將其顯示在其他組件的頂部。項目的默認z值為0。

色彩沖刺

如果所有塊都具有相同的顏色，玩“同一個游戲”并沒有什么樂趣，因此我們修改了createBlock()函數，samegame.js以便每次調用時隨機創建不同類型的塊（用于紅色，綠色或藍色）。Block.qml還進行了更改，以便每個塊包含一個不同的圖像，具體取決于其類型：

import QtQuick 2.0

Item {
    id: block

    property int type: 0

    Image {
        id: img

        anchors.fill: parent
        source: {
            if (type == 0)
                return "../shared/pics/redStone.png";
            else if (type == 1)
                return "../shared/pics/blueStone.png";
            else
                return "../shared/pics/greenStone.png";
        }
    }
}

工作游戲

現在我們有了一款可以正常運行的游戲！可以單擊塊，玩家可以得分，游戲可以結束（然后您可以開始一個新的）。這是到目前為止已完成的屏幕截圖：

這是現在的samegame.qml樣子：

import QtQuick 2.0
import "samegame.js" as SameGame

Rectangle {
    id: screen

    width: 490; height: 720

    SystemPalette { id: activePalette }

    Item {
        width: parent.width
        anchors { top: parent.top; bottom: toolBar.top }

        Image {
            id: background
            anchors.fill: parent
            source: "../shared/pics/background.jpg"
            fillMode: Image.PreserveAspectCrop
        }

        Item {
            id: gameCanvas

            property int score: 0
            property int blockSize: 40

            width: parent.width - (parent.width % blockSize)
            height: parent.height - (parent.height % blockSize)
            anchors.centerIn: parent

            MouseArea {
                anchors.fill: parent
                onClicked: SameGame.handleClick(mouse.x, mouse.y)
            }
        }
    }

    Dialog {
        id: dialog
        anchors.centerIn: parent
        z: 100
    }

    Rectangle {
        id: toolBar
        width: parent.width; height: 30
        color: activePalette.window
        anchors.bottom: screen.bottom

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

        Text {
            id: score
            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
            text: "Score: Who knows?"
        }
    }
}

游戲有效，但現在有點無聊。平滑的動畫過渡在哪里？高分在哪里？如果您是QML專家，則可以在第一次迭代中編寫這些內容，但是在本教程中，我們將在下一章節中進行講解----您的應用程序將在此活躍起來！

====================================================

想要了解或購買Qt正版授權的朋友，歡迎

Qt技術交流群現已開通，QQ搜索群號“765444821”或者掃描下方二維碼即可加入