Last active
January 2, 2016 19:29
-
-
Save Gordi90/8350615 to your computer and use it in GitHub Desktop.
TicTacToe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment