Wie verwaltet man mehrere Bildschirme für ein Multi-Quiz-Spiel in p5.js?

Question

Ich bin neu in der Webentwicklung und muss Quiz mit Ton, Bildern und viel Interaktivität programmieren, und ich fand gerade, dass p5.js die perfekte Lösung für mich ist.

Mein Problem ist, dass ich mehr als 10 Fragen mit verschiedenen Arten von Eingaben (jeder von ihnen mit eigenen Regeln und einige mit den gleichen Regeln) und einen Einführungsbildschirm mögen. Und ich habe wirklich verwirrt, wie kann ich das organisieren, wie ist der beste Weg, um meinen Code sauber zu halten, weil die Tutorials, die ich befolgte die in der Regel die Beispiele in einer einzigen Datei, und ich denke, wenn ich so etwas bei der Ziehung programmieren Funktion (wenn Frage == 1 {Frage, Antworten, Regeln Regeln Regeln Regeln} Wenn Frage == 2 {Frage, antwortet verschiedene Regeln Regeln}) wird es ein riesiges Durcheinander sein.

Also brauche ich eine Lösung für mehrere Bildschirme, die aber einige globale Variablen teilen. Der Benutzer sollte in der Lage sein, zu jeder bereits beantworteten Frage zurückzukehren und die aktuelle Antwort zu ändern.

Ich denke, dass sollte das gleiche für ein Spiel mit mehreren Ebenen sein, wo Sie einige "Regeln" der Welt und nur die Stufen/Ebenen/Bildschirme/Feinde ändern.

Sorry über mein Englisch, ich hoffe, dass es nicht zu verwechseln.

Danke!

Answer 1

Sie sollten Kevins Ansatz zur Erstellung Ihres eigenen Objekttyps verwenden, um Ordnung zu halten.

Für einen schnellen Prototyp können Sie die dynamische Natur von Javascript nutzen und Objekte im laufenden Betrieb erstellen (denken Sie JSON mögen). Hier ist ein sehr einfaches Beispiel, die grundlegende Fragen speichert:

var questions = [ 
 
    { 
 
    question:"Question #1", 
 
    options:[1,2,3], 
 
    selected:-1, 
 
    correct:2 
 
    }, 
 
    { 
 
    question:"Question #2", 
 
    options:[3,2,1], 
 
    selected:-1, 
 
    correct:1 
 
    }, 
 
    { 
 
    question:"Question #3", 
 
    options:[2,1,3], 
 
    selected:-1, 
 
    correct:3 
 
    } 
 
]; 
 

 
var currentQuestion = 0; 
 

 
function setup() { 
 
    createCanvas(400,400); 
 
} 
 

 
function draw() { 
 
    background(255); 
 
    text(questions[currentQuestion].question,10,15); 
 
    text(questions[currentQuestion].question,10,15); 
 
    for(var o = 0; o < questions[currentQuestion].options.length; o++){ 
 
    text(questions[currentQuestion].options[o],10,35 + (20 * o)); 
 
    } 
 
    text("selected: " + questions[currentQuestion].selected,10,90); 
 
    text("correct: " + questions[currentQuestion].correct,10,110); 
 
    text("match: " + (questions[currentQuestion].selected == questions[currentQuestion].correct),10,130); 
 
} 
 
function keyPressed(){ 
 
    //loop through questions on space 
 
    if(key == ' ') currentQuestion = (currentQuestion + 1) % questions.length; 
 
    if(key == '1') questions[currentQuestion].selected = 1; 
 
    if(key == '2') questions[currentQuestion].selected = 2; 
 
    if(key == '3') questions[currentQuestion].selected = 3; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script>

Führen Sie den Code-Snippet Voll Seite und verwenden Sie die SPACE Schlüssel zur Schleife durch Fragen und 1,2 oder 3 Antworten auszuwählen. Dies wird wahrscheinlich nicht tun, was Sie wollen, aber hoffentlich veranschaulichen einen schnellen Prototyping-Ansatz.

Je nach Ihren Erfahrungen mit JavaScript und externen Bibliotheken möchten Sie möglicherweise Polymer (und topeka example + source) auschecken. Seien Sie gewarnt, es ist eine steile Lernkurve, wenn Sie neu in der Programmierung sind, also könnte es sich lohnen, JS mit p5.js zuerst zu verstehen.

Answer 2

Es klingt für mich wie Sie Objekte zu encapsulate die Daten, die Sie einen Bildschirm oder eine Frage stellen müssen verwenden sollten.

Here ist ein Tutorial zur Verwendung von Objekten in p5.js, und Google hat eine Tonne mehr. Aber die Grundidee ist, dass Sie ein Objekt erstellen müssen, das alles enthält, was Sie über einen bestimmten Bildschirm oder eine Frage wissen müssen. Es könnte wie folgt aussehen:

// Question class 
function Question(myQuestionText, myAnswerText, myRules) { 
    this.questionText = myQuestionText 
    this.answerText = myAnswerText; 
    this.rules= myRules 

    this.display = function() { 
    text(questionText, 25, 25); 
    }; 

    this.checkAnswer= function(userAnswer) { 
    return userAnswer == answerText; 
    } 
}; 

Dies ist nur ein Beispiel der Arten von Dingen, die Sie tun können, und Sie würden auf jeden Fall brauchen sie zu erweitern, um es genau Ihre Bedürfnisse fit zu machen. Zum Beispiel könnten Sie auch ein Rule Objekt erstellen und jedes Question ein array von Rules enthalten. Auch das ist nur ein Ansatz, den Sie vielleicht machen würden.

Aber der Punkt ist, dass sobald Sie diese Dinge eingekapselt haben, können Sie die Fragen als JSON speichern oder sie programmatisch erstellen, und speichern Sie sie dann in array von Questions. Here ist ein Beispiel für die Verwendung von Arrays von Objekten in p5.js.

Sobald Sie die array von Questions haben, dann ist Ihr Code Unentschieden kann wie folgt aussehen:

function draw(){ 
    questions[questionIndex].display(); 
} 

Keine Notwendigkeit für eine große if-Anweisung, da alles, was Sie wissen müssen, um durch die Question Objekt eingekapselt ist.

Dies ist ein ziemlich breites Thema und es kann ein wenig verwirrend werden, so empfehle ich Ihnen versuchen Sie etwas und einen MCVE Posten, wenn Sie stecken bleiben. Viel Glück.