Skapa en app för Ubuntu Touch [QML] - [Del 3]

Skapa en app för Ubuntu Touch

Tredje delen av denna inläggsserie (första delen, andra delen) där vi bygger en ansökan till Ubuntu Touch eller för samma sak ubuntu skrivbordet. Jag ska lägga till en del som hände med mig i föregående inlägg, och det är att även om vi ökade variablerna för misslyckanden, träffar och poäng så visades de inte på skärmen, det beror på att vi inte ändrade etikettens textegenskap:

                Etikett {id: misslyckas text: "Fel:" + nfel färg: "röd"} Etikett {id: träffar text: "Hit:" + född} Etikett {id: punkter text: "Poäng:" + npoints fontSize: "medium "}

Fortsättning av spellogiken

Tid

Som vi redan vet visar progressBar tiden vi har för att svara på en fråga. För att hantera den tid vi använder en timer är timern ett element som upprepas med ett intervall på x millisekunder. I det här fallet säger vi varje intervall att den ska öka ProgressBar-framstegen; Men innan jag tittar på om det har nått slutet på tiden eller inte, om det når slutet måste vi subtrahera ett liv.

Du kan se en rad kod som vi ännu inte har implementerat (PopupUtils.open (dialog)), den här linjen är att öppna slutspeldialogen om vi inte har fler liv (3 buggar eliminerade), senare i detta inlägg kommer vi att se hur man gör denna dialog.

Timerkod (vi kan lägga den under ProgressBar):

       ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter minimumValue: 0 maximumValue: 300} Timer {id: simpletimer c: 100 repeat: true running: true onTriggered: {if (time.value <time.maximumValue) time.value + = 1.0 annat {nfel = nfel + 1 om (nfel <3) {num = num + 1 Logic.nextQuestion (num) time.value = time.minimumValue} annat {simpletimer.stop () PopupUtils.open (dialog)}} }}

Som vi kan se, i onTriggered lägger vi koden som kommer att öka förloppsindikatorn och lägga till 1 enhet var 100: e (intervall) milli-sekunder. Observera att vi har lagt till två attribut till ProgressBar, minimumValue och maximumValue, vilket, som du kan se, är det maximala värdet och minimivärdet.

Så här startar och stoppar du timern:

simpletimer.start () simpletimer.stop ()

Alternativ (50%, Frys och Nästa)

Låt oss först skapa tre variabler som styr att alternativen bara kan användas en gång:

    fastighet int procent: 0 fastighet int med: 0 fastighet int nästa: 0

50%

Knapp {id: b50 text: "50%" onClicked: {if (percent == 0) {var correct = aDocument.contents.questions [num] .correcta if (correct == 1) {resp2.enabled = false resp3. aktiverat = falskt annat om (rätt == 2) {resp1.aktiverat = falskt resp4.aktiverat = falskt annat om (rätt == 3) {resp1.aktiverat = falskt resp4.aktiverat = falskt} annat {resp2.aktiverat = falsk resp1.aktiverad = falsk} procent = 1}}

Med aktiverad = falsk är vad vi gör att sätta knappen så att den inte kan tryckas på så sätt att vi får rätt svar med aDocument.contents.questions [num]. Rätt och härifrån beroende på vilken som är korrekt «vi eliminera »Två knappar som inte är det.

Frysa

                Knapp {id: bCon text: "Freeze" onClicked: {if (with == 0) simpletimer.stop () with = 1}}

Det här är en av de enkla, vi måste bara stoppa timern med simpletimer.stop (), ja, vi måste sätta på den igen (och ställa in progressBar till 0) när vi går igenom frågan.

Nästa

                 Knapp {id: bNexttext: "Nästa" påKlickat: {if (nästa == 0) {num = num + 1 Logic.nextQuestion (num) next = 1}}}

Vi använder den funktion som vi redan skapat för att klara frågan (nästa fråga).

Dialoger

För att avsluta spelet använder vi en dialog, antingen för att vi har vunnit (det finns inga fler frågor) eller för att vi har tappat (vi har gjort 3 misstag), för att använda dialogerna måste vi importera modulen:

importera Ubuntu.Components.Popups 0.1

Vi ska skapa en dialog som säger att vi har tappat:

        Komponent {id: dialog Dialog {id: dialog titel: "Game Over!" text: "Du förlorade alla liv :(" Knapp {text: "Avsluta" onClicked: Qt.quit ()} Knapp {text: "Starta om" färg: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion (num ) npoints = 0 födslar = 0 PopupUtils.close (dialog)}}}}

Vi har två knappar, en för att stänga applikationen (Qt.quit ()) och en för att starta spelet om. Vi initialiserar variablerna till 0 och stänger dialogen.

För att öppna dialogrutan:

PopupUtils.open (dialog)

För att stänga den:

PopupUtils.close (dialog)

Låt oss se dialogen i slutet av spelet:

Vi kan skapa en dialog exakt samma genom att ändra identifieraren och texten där det står att vi har vunnit.

Utforma frågan sammanlagt

När vi utformar det GTK, vi skapar en dialog, men den här gången kommer vi att göra det i en flik, hur som helst, den kommer att ha samma struktur:

Som vi kan se kommer vi att använda en etikett, en TextArea för att skriva frågan, 4 TextField och 4 Switch; slutligen en knapp för att lägga till frågan. Låt oss bara titta på koden:

importera QtQuick 2.0 importera Ubuntu.Components 0.1 Flik {title: i18n.tr ("+ Frågor") Sida {id: pageAdd Column {anchors.top: pageAdd.top anchors.topMargin: 50 mellanslag: 15 bredd: parent.widthöjd: parent.height - 50 Etikett {id: frågetekst: "Lägg till en fråga i databasen:" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large"} TextArea {bredd: parent.width - 20 höjd: units.gu (12 ) contentWidth: units.gu (30) contentHeight: units.gu (60) anchors.horizontalCenter: parent.horizontalCenter} Rad {avstånd: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Svar 1" bredd: 300} Växla {markerad: falsk}} Rad {avstånd: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Svar 2" bredd: 300} Switch {markerat: false}} Rad {mellanslag: 15 anchors.horizontalCenter: parent. horizontalCenter TextField {placeholderText: "Svar 3" bredd: 300} Växla {markerad: falsk}} Rad {avstånd: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 4" bredd: 300} Switch {markerad: falsk}} Knapp {text: "Lägg till +" anchors.horizontalCenter: parent.horizontalCenter bredd: parent.width - 20}}}}

Låt oss se hur det ser ut:

Om vi ​​nu testar omkopplarna ser vi att vi kan markera dem alla som rätt fråga, och naturligtvis kan bara en vara det, därför kommer vi att göra följande: vi kommer att kunna ge en identifierare till varje omkopplare (även till textfält eftersom vi måste skaffa innehållet för att spara det i databasen) enligt ditt svar, och när vi klickar på det sätter vi alla andra i markerat = falskt läge:

             Rad {avstånd: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {id: res1 placeholderText: "Svar 1" bredd: 300} Växla {id: sw1 markerad: falsk påKlickade: {if (sw1.checked == true) {sw2. markerad = falsk sw3.checked = falsk sw4.checked = falsk}}}}

Om vi ​​försöker nu kommer vi att se hur vi bara kan markera en.