Skip to content

Instantly share code, notes, and snippets.

@Gordi90
Last active January 2, 2016 19:29
Show Gist options
  • Save Gordi90/8350615 to your computer and use it in GitHub Desktop.
Save Gordi90/8350615 to your computer and use it in GitHub Desktop.
TicTacToe
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
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;
}
}
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;
}
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