Creazione di un'app per Ubuntu Touch [QML] - [Parte 3]

Creazione di un'app per Ubuntu Touch

Terza parte di questa serie di post (prima parte, secondo) in cui stiamo creando un'applicazione Ubuntu touch o per lo stesso Ubuntu desktop. Aggiungerò una parte che mi è successa nel post precedente, ovvero che sebbene abbiamo aumentato le variabili dei guasti, dei colpi e dei punti, allora non sono stati mostrati sullo schermo, perché non abbiamo cambiato il proprietà text delle etichette:

                Etichetta {id: failures text: "Failures:" + nfaults color: "red"} Etichetta {id: hits text: "Hit:" + born} Etichetta {id: points text: "Points:" + npoints fontSize: "medium "}

Continuazione della logica di gioco

Tempo

Ebbene, come già sappiamo, la progressBar mostra il tempo che abbiamo per rispondere a una domanda. Per gestire il tempo utilizzeremo un Timer, il timer è un elemento che si ripete ad un intervallo di x millisecondi, in questo caso ogni intervallo gli diremo di aumentare l'andamento della ProgressBar; Ma prima di guardare se ha raggiunto o meno la fine dei tempi, nel caso in cui arrivi alla fine, dobbiamo sottrarre una vita.

Puoi vedere una riga di codice che non abbiamo ancora implementato (PopupUtils.open (dialogo)), questa linea serve per aprire il dialogo di fine partita nel caso non avessimo più vite (3 bug eliminati), più avanti in questo post vedremo come fare questo dialogo.

Codice timer (possiamo metterlo sotto 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.mamostValue) time.value + = 1.0 else {nfaults = nfaults + 1 if (nfaults <3) {num = num + 1 Logic.nextQuestion (num) time.value = time.minimumValue} else {simpletimer.stop () PopupUtils.open (dialog)}} }}

Come possiamo vedere, in onTriggered inseriamo il codice che aumenterà la progressbar aggiungendo 1 unità ogni 100 (intervallo) milli-secondi. Nota che abbiamo aggiunto due attributi a ProgressBar, minimumValue e maximumValue, che, come puoi vedere, è il valore massimo e il valore minimo.

Per avviare e arrestare il timer:

simpletimer.start () simpletimer.stop ()

Opzioni (50%, Blocca e Avanti)

Per prima cosa creiamo tre variabili che controllano che le opzioni possano essere utilizzate solo una volta:

    proprietà int percent: 0 proprietà int con: 0 proprietà int successivo: 0

50%

Pulsante {id: b50 text: "50%" onClicked: {if (percent == 0) {var correct = aDocument.contents.questions [num] .correcta if (correct == 1) {resp2.enabled = false resp3. enabled = false} else if (corretto == 2) {resp1.enabled = false resp4.enabled = false} else if (corretto == 3) {resp1.enabled = false resp4.enabled = false} else {resp2.enabled = false resp1.enabled = false} percent = 1}}

Con enabled = false quello che facciamo è mettere il pulsante in modo che non possa essere premuto, in modo tale da ottenere la risposta corretta con aDocument.contents.questions [num]. Corretto e da qui a seconda di quale è corretto «noi eliminare »Due pulsanti che non lo sono.

Congelare

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

Questo è uno di quelli facili, dobbiamo solo fermare il timer con simpletimer.stop (), sì, dobbiamo riaccenderlo (e impostare progressBar su 0) quando passiamo attraverso la domanda.

Avanti

                 Pulsante {id: bNext text: "Next" onClicked: {if (next == 0) {num = num + 1 Logic.nextQuestion (num) next = 1}}}

Usiamo la funzione che abbiamo già creato per passare la domanda (nextQuestion).

dialoghi

Per terminare il gioco useremo un Dialog, o perché abbiamo vinto (non ci sono più domande) o perché abbiamo perso (abbiamo fatto 3 errori), per utilizzare i dialoghi dobbiamo importare il modulo:

importa Ubuntu.Components.Popups 0.1

Creeremo la finestra di dialogo che ci dice che abbiamo perso:

        Componente {id: dialog Dialog {id: dialog title: "Game Over!" text: "Hai perso tutte le vite :(" Button {text: "Quit" onClicked: Qt.quit ()} Button {text: "Ricomincia" colore: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion (num ) npoints = 0 nascite = 0 PopupUtils.close (dialoghi)}}}}

Abbiamo due pulsanti, uno per chiudere l'applicazione (Qt.quit ()) e un altro per ricominciare il gioco. Inizializziamo le variabili a 0 e chiudiamo la finestra di dialogo.

Per aprire la finestra di dialogo:

PopupUtils.open (dialogo)

Per chiuderlo:

PopupUtils.close (dialoghi)

Vediamo il dialogo alla fine del gioco:

Possiamo creare una finestra di dialogo esattamente la stessa cambiando l'identificatore e il testo in cui dice che abbiamo vinto.

Progettare l'aggregato di domande

Quando lo progettiamo in GTK, creiamo un dialogo, ma questa volta lo faremo in una Tab, comunque avrà la stessa struttura:

Come possiamo vedere, useremo un'etichetta, una TextArea per scrivere la domanda, 4 TextField e 4 Switch; infine, un pulsante per aggiungere la domanda. Diamo solo un'occhiata al codice:

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ("+ Questions") Page {id: pageAdd Column {anchors.top: pageAdd.top anchors.topMargin: 50 spacing: 15 width: parent.width height: parent.height - 50 Etichetta {id: testo della domanda: "Aggiungi una domanda al database:" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large"} TextArea {width: parent.width - 20 height: units.gu (12 ) contentWidth: units.gu (30) contentHeight: units.gu (60) anchors.horizontalCenter: parent.horizontalCenter} Riga {spaziatura: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 1" larghezza: 300} Cambia {verificato: false}} Riga {spaziatura: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 2" larghezza: 300} Cambia {verificato: false}} Riga {spaziatura: 15 anchors.horizontalCenter: padre. horizontalCenter TextField {placeholderText: "Response 3" width: 300} Cambia {verificato: false}} Riga {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 4" width: 300} Cambia {verificato: false}} Pulsante {testo: "Aggiungi +" anchors.horizontalCenter: parent.horizontalCenter larghezza: parent.width - 20}}}}

Vediamo come appare:

Se ora testiamo gli Switch, vedremo che possiamo contrassegnarli tutti come la domanda corretta, e ovviamente solo uno può esserlo, quindi faremo quanto segue: saremo in grado di dare un identificatore ad ogni switch (anche a i campi di testo poiché dovremo ottenere il contenuto per salvarlo nel database) in base alla tua risposta, e quando lo cliccheremo metteremo tutti gli altri in modalità checks = false:

             Riga {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {id: res1 placeholderText: "Response 1" width: 300} Switch {id: sw1 verificato: false onClicked: {if (sw1.checked == true) {sw2. verificato = false sw3.checked = false sw4.checked = false}}}}

Se lo proviamo ora vedremo come possiamo segnarne solo uno.