Vytvorenie aplikácie pre Ubuntu Touch [QML] - [časť 3]

Vytvára sa aplikácia pre Ubuntu Touch

Tretia časť tejto série príspevkov (prvá časť, druhá časť) kde vytvárame aplikáciu Ubuntu Touch alebo za to isté ubuntu desktop. Pridám časť, ktorá mi v predchádzajúcom príspevku chýbala, a to že sme síce zvýšili premenné neúspechov, zásahov a bodov, ale na obrazovke sa nezobrazili, pretože sme nezmenili textová vlastnosť štítkov:

                Označenie {id: failures text: "Failures:" + nfaults color: "red"} Label {id: hits text: "hits:" + born} Label {id: points text: "Points:" + npoints fontSize: "medium „}

Pokračovanie hernej logiky

Čas

Ako už vieme, indikátor progressBar ukazuje čas, ktorý musíme zodpovedať na otázku. Na riadenie času, ktorý použijeme Timer, je časovač prvok, ktorý sa opakuje v intervale x milisekúnd, v tomto prípade mu každý interval povieme, aby zvýšil priebeh ProgressBaru; Ale predtým, ako sa pozriem na to, či to dospelo alebo nie, pre prípad, že by to skončilo, musíme odpočítať život.

Môžete vidieť riadok kódu, ktorý sme zatiaľ neimplementovali (PopupUtils.open (dialóg)), tento riadok má otvoriť koncový dialóg v prípade, že už nebudeme mať viac životov (odstránené 3 chyby), neskôr v tomto príspevku uvidíme, ako tento dialóg urobiť.

Kód časovača (môžeme ho umiestniť pod ProgressBar):

       ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter minimumValue: 0 maximumValue: 300} Časovač {id: simpletimer c: 100 repeat: true running: true onTriggered: {if (time.value <time.maximumValue) 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)}} }}

Ako vidíme, do onTriggered sme vložili kód, ktorý zvýši postupový riadok pridaním 1 jednotky každých 100 (interval) milisekundy. Upozorňujeme, že do panela ProgressBar sme pridali dva atribúty, minimumValue a maximumValue, čo je, ako vidíte, maximálna hodnota a minimálna hodnota.

Spustenie a zastavenie časovača:

simpletimer.start () simpletimer.stop ()

Možnosti (50%, pozastavenie a ďalšie)

Najprv vytvoríme tri premenné, ktoré ovládajú, že možnosti je možné použiť iba raz:

    vlastnosť int percento: 0 vlastnosť int s: 0 vlastnosť int ďalšie: 0

50%

Tlačidlo {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 (correct == 2) {resp1.enabled = false resp4.enabled = false} else if (correct == 3) {resp1.enabled = false resp4.enabled = false} else {resp2.enabled = false resp1.enabled = false} percent = 1}}

S enabled = false to, čo robíme, je dať tlačidlo tak, aby ho nebolo možné stlačiť, a to tak, že získame správnu odpoveď pomocou aDocument.contents.questions [num]. Správne a odtiaľ podľa toho, ktoré je správne «my vylúčiť »Dve tlačidlá, ktoré nie sú.

Zmraziť

                Tlačidlo {id: bCon text: „Freeze“ onClicked: {if (with == 0) simpletimer.stop () with = 1}}

Toto je jeden z ľahkých, len musíme zastaviť časovač pomocou simpletimer.stop (), áno, musíme ho znova zapnúť (a nastaviť progressBar na 0), keď prechádzame otázkou.

ďalšie

                 Tlačidlo {id: bNový text: „Ďalej“ onClicked: {if (next == 0) {num = num + 1 Logica.nextQuestion (num) next = 1}}}

Na odovzdanie otázky (nextQuestion) používame funkciu, ktorú sme už vytvorili.

Dialógy

Na ukončenie hry použijeme dialógové okno, buď preto, že sme vyhrali (už nie sú otázky), alebo preto, že sme prehrali (urobili sme 3 chyby), aby sme mohli dialógy importovať, musíme použiť dialógové okná:

importovať Ubuntu.Components.Popups 0.1

Chystáme sa vytvoriť dialóg, ktorý nám hovorí, že sme prehrali:

        Komponent {id: dialog Dialog {id: názov dialógu: "Game Over!" text: "Stratili ste všetky životy :(" Tlačidlo {text: "Ukončiť" onClicked: Qt.quit ()} Tlačidlo {text: "Začať odznova" farba: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion (num ) npoints = 0 narodenia = 0 PopupUtils.close (dialóg)}}}}

Máme dve tlačidlá, jedno na zatvorenie aplikácie (Qt.quit ()) a druhé na opätovné spustenie hry. Inicializujeme premenné na 0 a zavrieme dialóg.

Otvorenie dialógového okna:

PopupUtils.open (dialóg)

Zatvorenie:

PopupUtils.close (dialóg)

Pozrime sa na dialóg na konci hry:

Dialóg môžeme vytvoriť úplne rovnako tým, že zmeníme identifikátor a text, kde sa bude zobrazovať, že sme vyhrali.

Návrh agregátu otázok

Keď to navrhneme GTK, vytvoríme dialógové okno, ale tentokrát to urobíme na karte, bude mať rovnakú štruktúru:

Ako vidíme, na napísanie otázky použijeme Label, TextArea, 4 TextField a 4 Switch; nakoniec tlačidlo na pridanie otázky. Pozrime sa len na kód:

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ("+ Dotazy") Stránka {id: pageAdd Stĺpec {anchors.top: pageAdd.top anchors.topMargin: 50 medzery: 15 šírka: parent.width výška: parent.height - 50 štítok {id: text otázky: "Pridať otázku do databázy:" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large"} TextArea {šírka: parent.width - 20 výška: units.gu (12 ) contentWidth: units.gu (30) contentHeight: units.gu (60) anchors.horizontalCenter: parent.horizontalCenter} Riadok {medzery: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "šírka odpovede 1": 300} Prepínač {zaškrtnuté: false}} Riadok {medzery: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 2" šírka: 300} Prepínač {zaškrtnuto: false}} Riadok {medzery: 15 anchors.horizontalCenter: parent. horizontalCenter TextField {placeholderText: "Response 3" width: 300} Switch {checked: false}} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 4" width: 300} Switch {zaškrtnuto: false}} Tlačidlo {text: "Pridať +" anchors.horizontalCenter: parent.horizontalCenter šírka: parent.width - 20}}}}

Pozrime sa, ako to vyzerá:

Ak teraz otestujeme prepínače, uvidíme, že ich môžeme označiť ako správnu otázku a samozrejme môže byť iba jeden, preto urobíme nasledovné: každému prepínaču (tiež textové polia, pretože obsah budeme musieť získať, aby sme ho uložili do databázy) podľa vašej odpovede, a keď na neho klikneme, všetky ostatné uvedieme do režimu checked = false:

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

Ak to teraz vyskúšame, uvidíme, ako označíme iba jednu.