Erstellen einer App für Ubuntu Touch [QML] - [Teil 2]

Einführung:

Nun, hier haben wir den Beitrag, der dem folgt TeilIn diesem Fall konzentrieren wir uns auf den Umgang mit den Daten (Fragen) und beginnen mit dem logischen Teil des Spiels. Im nächsten Teil beenden wir die Logik und implementieren die Zeit und die drei Optionen.

Datenbank:

Für die Datenbank werden wir verwenden u1dbDies ist eine Datenbank, die die Daten im Format speichert JSON.

Lassen Sie uns zunächst sehen, welche Daten wir speichern sollen. Wir haben 1 Frage (abgesehen vom Text der Frage wäre es schön, eine Kennung zu haben) mit 4 möglichen Antworten, von denen nur 1 sein kann, daher das Dokument in JSON Einzelfrage sollte sein:

{ „id“: 1, „question“: „es wird dev geben.desdelinux.net“, „answers“ : { r1: „ja“, r2: „nein“, r3: „weiß nicht“, r4: „das ist eine falsche Antwort“ }, „richtig“: 3 }

Wie wir sehen, haben wir im Format strukturiert JSON Wo wir einen Bezeichner haben, eine Zeichenfolge mit der Frage und r1, r2, die Antwort 1 und Antwort 2 darstellen, haben wir schließlich, welche der Antworten richtig ist.

Lassen Sie uns ein wenig sehen, wie U1db funktioniert. Das erste, was wir tun müssen, um U1db zu verwenden, ist das Importieren des Moduls:

import U1db 1.0 as U1db

Wir deklarieren die Datenbank:

U1db.Database {
id: aDatabase
path: "aU1DbDatabase"
}

Die Datenbanken werden als aU1DbDatabase.u1db gespeichert. Jetzt erstellen wir ein Dokument:

U1db.Document {
id: aDocument
database: aDatabase
docId: 'helloworld'
create: true
defaults: { "hello": "Hello World!" }
}


Wo wir das Format {«Hallo»: «etwas»} sehen können, um Abfragen auszuführen, entweder um Daten hinzuzufügen, Daten zu erhalten, sie zu löschen usw. Wir haben das U1db.Query-Element.

Gehen wir zu unserer Anwendung und erstellen unsere Datenbank, wie wir gesehen haben, definieren wir die Datenbank:

U1db.Database {id: questiondb; Pfad: "questiondb.u1db"}

Ok, jetzt fügen wir einige Standardelemente in die Datenbankdokument-Fragen-Datenbank ein:

    U1db.Document { id: aDocument-Datenbank: questionsdb docId: 'questions' create: true defaults: { "questions": [ {"question":"There will be dev.desdelinux.net ?", „r1“: „Ja“, „r2“: „Nein“, „r3“: „Nase“, „r4“: „falsche Antwort“, „richtig“: „3“ }, {“Frage „Wer ist Hagrid (Harry Potter)?“, „r1“: „Der stellvertretende Schulleiter“, „r2“: „Der Wildhüter“, „r3“: „Der Verwandlungslehrer“, „r4“: „ Ein Präfekt“, „correct“: „2“}, {“question“: „Was ist die Hauptstadt Islands?“, „r1“: „Amsterdam“, „r2“: „Reykjavik“, „r3“: Tiflis ", "r4": "Almaty", "correct": "2"} ] } }

Mir ist bewusst, dass der Code nicht so angezeigt wird, wie er sollte, aber wenn wir genau hinschauen, werden wir sehen, dass wir ein Element haben Fragen, die wir mit »[]» angeben, dass es mehrere (nicht statische) Elemente geben kann; In diesem Fall haben wir standardmäßig 4, 4 Fragen mit ihren jeweiligen Antworten.

Um die Dokumentelemente zu erhalten JSONkönnen wir die Kennung des von uns erstellten Dokuments angeben (d. h ein Dokument). Stellen wir uns vor, wir wollen den Text der ersten Frage erhalten:

aDocument.contents.questions [0] .question

Diese Codezeile gibt uns den Frageinhalt des Dokuments aDocument von Element 0 (dem ersten im Index) zurück, der lautet: „Es wird Entwickler geben.“desdelinux.Netz?" Wenn wir die Zahl 1 in den Index eintragen, dann ist es die zweite Frage.

Programmieren der Spiellogik

Nun, da wir wissen, wie wir mit der Datenbank umgehen sollen, in der wir die Fragen gespeichert haben, werden wir die Spielelogik programmieren. Zunächst erstellen wir eine Datei JavaScript (.js): Neue -> Qt -> Js-Datei hinzufügen. Ich werde ihn anrufen logik.js.

In der Datei werden wir verschiedene Funktionen erstellen, um die js-Datei in unser qml-Dokument zu importieren:

"logica.js" als Logica importieren

Wir assoziieren den Namen Logica. Wenn wir also eine Funktion aufrufen möchten, tun wir dies als Logica.function (), als wäre es ein Objekt, das seine Methoden hat.

Damit der Beitrag nicht zu lang wird, lassen wir die Zeit der Frage und die Optionen für später. Wir konzentrieren uns auf die Fragen und Punkte. Sehen wir uns eine Funktion an, mit der wir von der Seite fortfahren Frage:

Funktion nextQuestion (num) {// time = 0 question.text = aDocument.contents.questions [num] .question; resp1.text = aDocument.contents.questions [num] .r1; resp2.text = aDocument.contents.questions [num] .r2; resp3.text = aDocument.contents.questions [num] .r3; resp4.text = aDocument.contents.questions [num] .r4; }}

Wie wir sehen können, übergeben wir die Fragennummer an der Stelle, an der wir uns befinden, und setzen von hier aus die Antworten auf die Schaltflächen und das Fragenetikett. Lassen Sie uns nun überprüfen, ob die ausgewählte Antwort korrekt ist:

Funktionstreffer (num, Option) {var hit = false; var num_correct = aDocument.contents.questions [num] .correct; if (option ==rect_num) hit = true; Rückschlag getroffen; }}

Der Code spricht für sich selbst. Wenn die ausgewählte Option mit der von der Datenbank bereitgestellten Option übereinstimmt, ist sie wahr, andernfalls nicht. Nachdem wir diese Funktionen definiert haben, werden wir sie in unserem qml-Code anwenden.

Zuerst werden wir eine Variable hinzufügen, die steuert, in welcher Frage wir uns befinden. Wir werden sie num nennen. Wir werden auch drei weitere Variablen haben: Treffer, Fehler und Punkte.

    Eigenschaft int num: 0 Eigenschaft int nfaults: 0 Eigenschaft int Geburten: 0 Eigenschaft int nPunkte: 0

Anfangs sind sie alle bei 0.

Jetzt fügen wir allen Antwortschaltflächen einen onClick hinzu. onClick ist, wie der Name schon sagt, ein Ereignis, das auftritt, wenn auf diese Schaltfläche geklickt wird:

            Schaltfläche {id: resp1 Text: "Antwort 1" anchorors.horizontalCenter: parent.horizontalCenter width: parent.width - 20 onClicked: {if (Logic.certain (num, 1)) {num = num + 1; Logic.nextQuestion (num) nPunkte = nPunkte + 50 Geburten = Geburten + 1} sonst {nfaults = nfaults + 1}}}

Wir sehen, dass durch Klicken auf die Schaltfläche überprüft wird, ob es korrekt ist oder nicht. Falls es korrekt ist, fügen Sie die Punkte hinzu und übergeben Sie die Frage, andernfalls bleibt ein Leben übrig.

Schließlich wird die erste Frage geladen, wenn die Seitenkomponente geladen wird:

    Seite {id: pageGame Component.onCompleted: {Logic.nextPregunta (0)}

Mal sehen, wie es sich herausstellte: