TicTacToe

0. lépés: leírás

Itt vannak a lépések a kész alkalmazáshoz.

New Projekt -> Qt Quick UI -> Quick 2.0
Lesz egy TicTacToe.qml fájlunk és egy Mark.qml is.


#################################
	Feltöltjük a pályát
	//Új játék a TicTacToe.qml-be a TODO Clean-hez
	gridModel.clear()
	for(var i = 0; i < 9; i++){
		gridModel.append({
							 type: true,
							 clickable: true
						 })
	}
                    
#################################
	Csinálunk egy rácsot. Ehhez a hátteret 2 pixellel keskenyebbre vesszük és a gridView elemeit is 2px-lel kicsinyítjük.
	Ezek után ki fog látszani a háttér a gridView mögött, aminek rács hatása lesz.
	
	//Pályaháttér csak 478 széles legyen a Mark pedig csak 158x158-as legyen
	//clear metódusba
	boardBg.color = "black"
##############################x##
	Most kell a "3. Mark.qml Rectangle-be" tartalmát bemásolni a gistből értelemszerűen a Mark.qmlbe a property bool markType után, de még a zárójel elé
#################################
	Dolgozzuk ki, hogy egyik játékos jön a másik után.
	Már bent van a TicTacToe.qml-ben, X kezd.
	
	// ki jön
	property bool xCames: true;
	
	// clear metódusba
	xCames = true;
	nextPlayer.text = "X kezd"
	
	TicTacToe végére:
	
	//Függvény, amit meghívunk ha frissíteni vagy ellenőrizni akarjuk a logikát
	function refreshModel(){
        mainWindow.xCames = ! mainWindow.xCames
        nextPlayer.text = xCames ? "X jön" : "O jön"
		}
		
	Mark.QML-ben	
	//onclickedbe
	gridModel.get(index).type = mainWindow.xCames
	refreshModel()

#################################
	Oldjuk meg, hogy csak 1x lehessen kattintani egy elemre.
	//Mousearea onclicked
	//gridmodeltől elkérjük get segítségével a megadott sorszámú elemet. Ebben a névtérben létezik egy index nevű változó, ami annak a gridelemnek a sorszáma, amire éppen kattintottunk.
	if(gridModel.get(index).clickable){
		gridModel.get(index).clickable = false;
		//Itt pedig csináljuk azt, amit egyébként is tettünk volna, csak most bevédtük egy if-fel
		...
	}
#################################	
	Győzelemdetektálás a refreshModel-be

	// Sorok
	for(var i = 0; i <7; i+=3){
		if(!gridModel.get(0+i).clickable && !gridModel.get(1+i).clickable && !gridModel.get(2+i).clickable
				&& gridModel.get(0+i).type === gridModel.get(1+i).type
				&& gridModel.get(1+i).type === gridModel.get(2+i).type){
			nextPlayer.text = gridModel.get(0+i).type ? "X nyert" : "O nyert"
			break
		}
	}

	// Oszlopok
	for(i = 0; i <3; i++){
		if(!gridModel.get(0+i).clickable && !gridModel.get(3+i).clickable && !gridModel.get(6+i).clickable
				&& gridModel.get(0+i).type === gridModel.get(3+i).type
				&& gridModel.get(3+i).type === gridModel.get(6+i).type){
			nextPlayer.text = gridModel.get(0+i).type ? "X nyert" : "O nyert"
			break
		}
	}

	// Átló 1
	if(!gridModel.get(0).clickable && !gridModel.get(4).clickable && !gridModel.get(8).clickable
			&& gridModel.get(0).type === gridModel.get(4).type
			&& gridModel.get(4).type === gridModel.get(8).type){
		nextPlayer.text = gridModel.get(0).type ? "X nyert" : "O nyert"
	}
	// Átló 2
	if(!gridModel.get(2).clickable && !gridModel.get(4).clickable && !gridModel.get(6).clickable
			&& gridModel.get(2).type === gridModel.get(4).type
			&& gridModel.get(4).type === gridModel.get(6).type){
		nextPlayer.text = gridModel.get(2).type ? "X nyert" : "O nyert"
	}
#################################	
	Oldjuk meg, hogy ne lehessen tovább játszani, ha vége a mókának, de új játék kezdésekor igen

	//clear metódusba
	gridView.enabled = true
	//győzelemhez
	gridView.enabled = false

1. TicTacToe.qml

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0

// Alkalmazás ablaka
ApplicationWindow {
    id: mainWindow
    title: "Tic-Tac-Toe"
    width: 800
    height: 480

    //TODO
    property bool xCames: true;

    //Menüsor
    menuBar: MenuBar {
        //Első elem a menüsorban
        //Ezen belül vannak menüpontok
        Menu {
            //Menüpont neve kiírva
            title: "Fájl"

            MenuItem {
                text: "Új játék"
                //TODO Clean
                onTriggered: {

                }
            }

            MenuItem {
                text: "Kilépés"
                onTriggered: Qt.quit()
            }
        }
    }

    //Pályaháttér, ebből lesznek a rácsok
    Rectangle{
        id: boardBg
        x: 0
        y: 0
        width: 480
        height: 480
        color: "transparent"
        GridView {
            id: gridView
            x: 0
            y: 0
            width: 480
            height: 480
            //Hogy ne lehessen görgetni
            boundsBehavior: Flickable.StopAtBounds
            keyNavigationWraps: false

            //A modell alapból üres
            model: ListModel {
                //id-ja van neki, hogy hivatkozhassunk rá
                id: gridModel
            }

            cellHeight: 160
            cellWidth: 160
            //Delegált elem, külön QML fájlban, ez reprezentál egy cellát
            delegate: Mark {
                markType: model.type
            }
        }
    }

    //Szövegmező kiírni, hogy ki jön
    Text {
        id: nextPlayer
        x: 500
        y: 10
        width: 308
        height: 52
        font.pixelSize: 50;
    }
}

2. Mark.qml

Rectangle {
    //ARGB Szín
    color: "#BBFFFF00"
    width: 160
    height: 160
    //Mező típusának jelöléséhez. True = X, False = O
    property bool markType;
}

3. Mark.qml Rectangle-be

Rectangle {
        color: "transparent"
        anchors.fill: parent
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            anchors.margins: -10
            hoverEnabled: true         //ettől lehet olyanunk, hogy:  mouseArea.containsMouse
            onClicked: {
                parent.state = "mouse-click"
            }
        }

        //Állapot arra az esetre, amikor megjelenik a kép
        states: State {
            //Állapot neve
            name: "mouse-click";

            //Mi változik? A "rect"
            //Mije változik? A nagyítása 9-szeresre és  láthatósága 100%-ra
            PropertyChanges { target: rect; scale: 9; opacity: 1}
        }

        //Hogyan megyünk át abba bizonyos állapotba?
        //Animációval!
        transitions: Transition {
            //Miket érintünk    Milyen animációval      Mennyi idő alatt
            NumberAnimation { properties: "scale, opacity"; easing.type: Easing.InOutQuad; duration: 200  }
        }

        //Kép. Vagy X vagy O
        Image {
            anchors.centerIn: parent
            //id alapján érjük el az állapotváltásnál
            id: rect

            //Ha ez egy X mező, akkor az X-es kép, és O-s kép ha nem.
            //Üres állapot nincs, nem is kell, hiszen alapból nem látszik
            source: markType ? "MarkX.png" : "MarkO.png"

            //Alapból nagyon pici és láthatatlan (láthatóság 0%)
            height: 10
            width: 10
            smooth: true
            opacity: 0
        }
    }