Δημιουργία εφαρμογής για το Ubuntu Touch [QML] - [Μέρος 3]

Δημιουργία εφαρμογής για το Ubuntu Touch

Τρίτο μέρος αυτής της σειράς αναρτήσεων (πρώτο μέρος, δευτερόλεπτο) όπου δημιουργούμε μια εφαρμογή για Ubuntu Touch ή για τον εαυτό του Ubuntu επιφάνεια εργασίας. Θα προσθέσω ένα μέρος που μου ξέφυγε στην προηγούμενη ανάρτηση, και αυτό είναι ότι αν και αυξήσαμε τις μεταβλητές των αποτυχιών, των επιτυχιών και των σημείων, τότε δεν εμφανίστηκαν στην οθόνη, επειδή δεν αλλάξαμε την ιδιότητα κειμένου των Ετικετών:

                Label { id: misses text: "Misses: " + nmisses color: "κόκκινο" } Label { id: hits text: "Hits: " + nhits } Label { id: dots text: "Dots: " + ndots fontSize: "medium" }

Συνέχεια της λογικής του παιχνιδιού

Ώρα

Λοιπόν, όπως ήδη γνωρίζουμε, το progressBar δείχνει την πάροδο του χρόνου που έχουμε να απαντήσουμε σε μια ερώτηση. Για τη διαχείριση του χρόνου που θα χρησιμοποιήσουμε ένα χρονόμετρο, ο χρονοδιακόπτης είναι ένα στοιχείο που επαναλαμβάνεται σε διάστημα x χιλιοστών του δευτερολέπτου, σε αυτήν την περίπτωση κάθε διάστημα θα του λέμε να αυξάνει την πρόοδο της Γραμμής Προόδου. αλλά πριν δείτε αν έχει φτάσει στο τέλος του χρόνου ή όχι, σε περίπτωση που φτάσει στο τέλος, πρέπει να αφαιρέσουμε μια ζωή.

Μπορείτε να δείτε μια γραμμή κώδικα που δεν έχουμε εφαρμόσει ακόμα (PopupUtils.open(dialog)), αυτή η γραμμή είναι για να ανοίξει το τέλος του διαλόγου του παιχνιδιού σε περίπτωση που δεν έχουμε περισσότερες ζωές (3 σφάλματα εξαλείφθηκαν), αργότερα σε αυτήν την ανάρτηση θα δούμε πώς να δημιουργήσουμε τον εν λόγω διάλογο.

Κωδικός χρονοδιακόπτη (μπορούμε να τον βάλουμε κάτω από το ProgressBar):

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

Όπως μπορούμε να δούμε, στο onTriggered βάζουμε τον κωδικό που θα αυξήσει τη γραμμή προόδου προσθέτοντας 1 μονάδα κάθε 100 (διάστημα) χιλιοστά του δευτερολέπτου. Σημειώστε ότι έχουμε προσθέσει δύο χαρακτηριστικά στη γραμμή προόδου, minimalValue και maximumValue, τα οποία, όπως μπορείτε να δείτε, είναι η μέγιστη τιμή και η ελάχιστη τιμή.

Για να ξεκινήσετε και να σταματήσετε το χρονόμετρο:

simpletimer.start() simpletimer.stop()

Επιλογές (50%, Πάγωμα και Επόμενο)

Πρώτα δημιουργούμε τρεις μεταβλητές που ελέγχουν ότι οι επιλογές μπορούν να χρησιμοποιηθούν μόνο 1 φορά:

    ιδιότητα int ποσοστό: 0 int ιδιοκτησίας με: 0 ιδιοκτησία int επόμενο: 0

50%

Κουμπί { id: b50 text: "50%" onClicked: { if(percent == 0){ var correct = aDocument.contents.questions[num].correct if(correct == 1){ resp2.enabled= false resp3.enabled= false.enabled= resp2.enabled= resp1.enabled= resp. } else if(correct == 4){ resp3.enabled= false resp1.enabled= false } else{ resp4.enabled= false resp2.enabled= false } % = 1 } }

Με enabled = false, αυτό που κάνουμε είναι να βάζουμε το κουμπί με τέτοιο τρόπο ώστε να μην μπορεί να πατηθεί, έτσι ώστε να λάβουμε τη σωστή απάντηση με aDocument.contents.questions[num].correct και από εδώ, ανάλογα με το ποιο είναι σωστό, "εξαλείφουμε" δύο κουμπιά που δεν είναι.

Πάγωμα

                Κουμπί { id: bCon text: "Freeze" onClicked: { if (con == 0) simpletimer.stop() con = 1 } }

Αυτό είναι ένα από τα εύκολα, απλά πρέπει να σταματήσουμε το χρονόμετρο με simpletimer.stop(), ναι, πρέπει να το ενεργοποιήσουμε ξανά (και να ορίσουμε το progressBar στο 0) όταν πηγαίνουμε από ερώτηση σε ερώτηση.

Επόμενο

                 Κουμπί { id: bΕπόμενο κείμενο: "Επόμενο" onΚάντε κλικ: { if (next == 0){ num = num + 1 Logic.nextQuestion(num) next = 1 } } }

Χρησιμοποιούμε τη συνάρτηση που έχουμε ήδη δημιουργήσει για να περάσουμε την ερώτηση (επόμενη ερώτηση).

Διάλογοι

Για να τελειώσουμε το παιχνίδι θα χρησιμοποιήσουμε έναν διάλογο, είτε επειδή κερδίσαμε (δεν υπάρχουν άλλες ερωτήσεις) είτε επειδή χάσαμε (κάναμε 3 λάθη), για να χρησιμοποιήσουμε τους διαλόγους πρέπει να εισαγάγουμε την ενότητα:

εισαγωγή Ubuntu.Components.Popups 0.1

Ας δημιουργήσουμε το παράθυρο διαλόγου που μας λέει ότι έχουμε χάσει:

        Component { id: dialog Dialog { id: title dialogue: "Game Over!" text: "Έχετε χάσει όλες τις ζωές :(" Button { text: "Quit" onClicked: Qt.quit() } Button { text: "Start από την αρχή" χρώμα: UbuntuColors.πορτοκαλί onΚάντε κλικ: { num = 0; Logic.nextΕρώτηση(αριθμός) npoints = 0 Popups dialogue.}0

Έχουμε δύο κουμπιά, ένα για το κλείσιμο της εφαρμογής (Qt.quit()) και ένα άλλο για την επανεκκίνηση του παιχνιδιού. Αρχικοποιούμε τις μεταβλητές σε 0 και κλείνουμε το παράθυρο διαλόγου.

Για να ανοίξετε το παράθυρο διαλόγου:

PopupUtils.open(dialog)

Για να το κλείσετε:

PopupUtils.close(διάλογος)

Ας δούμε τον διάλογο στο τέλος του παιχνιδιού:

Μπορούμε να δημιουργήσουμε ένα διάλογο ακριβώς το ίδιο αλλάζοντας το αναγνωριστικό και το κείμενο όπου λέει ότι κερδίσαμε.

Σχεδιασμός του συνολικού ερωτήματος

Όταν το σχεδιάσαμε GTK, δημιουργούμε ένα διάλογο, αλλά αυτή τη φορά θα το κάνουμε σε μια καρτέλα, ούτως ή άλλως θα έχει την ίδια δομή:

Όπως μπορούμε να δούμε, θα χρησιμοποιήσουμε ένα Label, ένα TextArea για να γράψουμε την ερώτηση, 4 TextField και 4 Switch. Τέλος, ένα κουμπί για να προσθέσετε την ερώτηση. Χωρίς περαιτέρω καθυστέρηση, ας δούμε τον κώδικα:

εισαγωγή QtQuick 2.0 import Ubuntu.Components 0.1 Tab { title: i18n.tr("+ Questions") Σελίδα { id: pageAdd Column { anchors.top: pageAdd.top anchors.topMargin: 50 space: 15 width: parent.widthight {A parent.widthight {A database height: d la database. " anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" } TextArea {πλάτος: parent.width - 50 height: units.gu(20) contentWidth: units.gu(12) contentHeight: units.gu(30) anchors.horizontalCenterchors. talCenter: parent.horizontalCenter TextField { placeholderText: "Response 60" width: 15 } Switch { checked: false } } Row { space: 1 anchors.horizontalCenter: parent.horizontalCenter TextField: "Response 300" width: 15} Σειρά { διάστιχο: 2 anchors.horizontalCenter: parent.horizontalCenter TextField { placeholderText: "Response 300" width: 15 } Switch { checked: false } } Row { space: 3 anchors.horizontalCenter: parent.horizontalCenter: parent.horizontalTexte300 width" } Switch { checked: false } } Button { text: "Add +" anchors.horizontalCenter: parent.horizontalΠλάτος κέντρου: parent.width - 15 } } } }

Ας δούμε πώς φαίνεται:

Εάν δοκιμάσουμε τώρα τους διακόπτες, θα δούμε ότι μπορούμε να τους επισημάνουμε ως σωστές ερωτήσεις, και φυσικά μόνο μία μπορεί να είναι, επομένως θα κάνουμε τα εξής: θα μπορούμε να έχουμε ένα αναγνωριστικό για κάθε διακόπτη (επίσης για τα πεδία κειμένου αφού θα πρέπει να λάβουμε το περιεχόμενο για να το αποθηκεύσουμε στη βάση δεδομένων) σύμφωνα με την απάντησή του και όταν κάνουμε κλικ θα βάλουμε όλα τα άλλα σε λειτουργία checked = false:

             Σειρά { διάστιχο: 15 anchors.horizontalCenter: parent.horizontalCenter TextField { id: res1 placeholderText: "Απάντηση 1" πλάτος: 300 } Διακόπτης { id: sw1 επιλεγμένο: false onΚάντε κλικ: {if(sw1.checked =false.checked.checked=2). sw3.checked = false } } } }

Αν το δοκιμάσουμε τώρα θα δούμε πώς μπορούμε να σημειώσουμε μόνο ένα.