Logischer/sauberer Weg zur Verzweigung von Textstory?

Question

Ich arbeite an einem sehr einfachen Textabenteuer in Javascript. Ihnen wird ein Textabschnitt angezeigt, und Sie können fortfahren, um auf den nächsten Absatz der Geschichte zu klicken. Gelegentlich wird die Schaltfläche durch mehrere Optionsfelder ersetzt, zum Beispiel Ja/Nein oder Optionen 1/2/3 usw., die den Verlauf der Geschichte verändern.

Was für eine saubere und logische Art und Weise ist, ein solches 'Dialogsystem' zu strukturieren?

Das ist, was ich jetzt haben:

Eine Variable Timeline bestimmt die nächste Nachricht und die Kontinuität der Geschichte, indem sie durch einen Schalter Radfahren. Wenn die Geschichte linear ist, wird Timeline um eins erhöht, was zur nächsten Nachricht führt. Wenn eine Auswahl getroffen wird (z. B. in timeline = 2), kann der Spieler mit meinen Funktionen wählen, ob der Story-Pfad 1 (Timeline 3, 4) oder der Story-Pfad 2 (Timeline = 5 ...) fortgesetzt werden soll.

function nextMsg(){ 
 
\t switch(timeline) { 
 
\t \t case 1: 
 
\t \t \t nextMessage = "With a little bit of force you wrestle the door open. A draft of cool wind refreshingly glides over your body. You take a deep breath of fresh air and wander into the forest."; 
 
\t \t break; 
 
\t \t case 2: 
 
\t \t \t nextMessage = "As you traverse the evergreen maze you stumble upon a small glade. A dark figure stands in the middle. You feel uneasy. Do you wish to investigate?"; 
 
\t \t \t showQuestion(3,5); 
 
\t \t break; 
 
\t \t case 3: 
 
\t \t \t nextMessage = "You approach the dark figure. The silhouette, mysteriously, does not cast a shadow, nor does it reflect any light. Apprehensive but curious, you cautiously advance."; 
 
\t \t \t showContinue(); 
 
\t \t break; 
 
\t \t case 4: 
 
\t \t \t nextMessage = "Drawing closer, you notice the ambient sounds of the forest around you fade into silence. In their place, a deep, rhythmic howling, much like that of a strong wind becomes audible."; 
 
\t \t break; 
 
\t \t case 5: 
 
\t \t \t nextMessage = "Apprehensive of the shadowy figure, you decide to venture deeper into the forest."; 
 
\t \t break; 
 
\t } 
 
}

In der Theorie, auch wenn dies zu kompliziert wird und gewunden alles funktionieren wird. Aber wenn ich beschließe, dazwischen Nachrichten hinzuzufügen/zu entfernen, werden die Timeline-Nummern sehr chaotisch und desorganisiert. Es wird auch sehr schwierig werden, die möglichen Geschichtspfade im Auge zu behalten, vor allem, wenn sie ineinander fließen. Gibt es eine bessere Möglichkeit, solche Daten zu strukturieren? Ein Schalter ist das einzige, was ich mir vorstellen kann, aber es fühlt sich dumm an.

EDIT ERFOLG:

---

Die ‚Geschichte‘ gliedert sich in kleinere lineare ‚Subereignissen‘, so einzelne Absätze müssen keine ID haben. Wenn das Unterevent den letzten Absatz erreicht, wird eine beliebige Anzahl von Auswahlschaltflächen generiert, die zu verschiedenen Unterereignissen führen. Danke Dellirium, dass du mir einen Einblick gegeben hast, wie das geht!

var subEvents = 
 
[ 
 
{ 
 
\t id: 0, 
 
\t text: ["par1","par2","par3","par4"], 
 
\t options: ["Yes","No","Maybe"], 
 
\t optionPaths: [1,2,2] 
 
}, 
 
{ 
 
\t id: 1, 
 
\t text: ["par5","par6","par7"], 
 
\t options: ["Jes","No"], 
 
\t optionPaths: [1,2] 
 
}, 
 
{ 
 
\t id: 2, 
 
\t text: ["no path","noo","nooooo"], 
 
\t options: ["Y tho","No"], 
 
\t optionPaths: [1,2] 
 
} 
 
] 
 
var currentEvent = 0; 
 
var eventCycle = 0; 
 

 

 
function updateEventCycle(){ 
 

 
\t for(i=0;i<4;i++){ 
 
\t \t document.getElementById("l" + i).innerHTML = document.getElementById("l"+ (i+1)).innerHTML; 
 
\t } 
 

 
\t document.getElementById("l4").innerHTML = subEvents[currentEvent]['text'][eventCycle]; 
 
\t eventCycle++; 
 

 
} 
 
function clickEventHandler(nextEvent){ 
 
\t \t eventLength = subEvents[currentEvent]['text'].length; 
 

 
\t \t if(eventCycle<eventLength) { //if event not completed 
 
\t \t \t \t updateEventCycle(); 
 
\t \t \t \t //createContinueOption(); 
 
\t \t \t \t if(eventCycle==eventLength) { 
 
\t \t \t \t \t createEventOptions(); 
 
\t \t \t \t } 
 
\t \t } 
 
\t \t if(typeof nextEvent !== 'undefined') { 
 
\t \t \t currentEvent = nextEvent; 
 
\t \t \t eventCycle = 0; 
 
\t \t \t createContinueOption(); 
 
\t \t \t updateEventCycle(); 
 
\t \t } 
 
} 
 
function createContinueOption(){ \t \t 
 
\t \t document.getElementById("optionForm").innerHTML = '<input type="button" value="Continue" onclick="clickEventHandler()"/>'; 
 
} 
 

 
function createEventOptions() { 
 
\t \t options = subEvents[currentEvent]['options'].length; 
 
\t \t optionsHTML = ""; 
 
\t \t for(i=0;i<options;i++) { 
 
\t \t \t optionsHTML = optionsHTML + '<input type="button" value="'+subEvents[currentEvent]['options'][i]+'" onclick="clickEventHandler('+subEvents[currentEvent]['optionPaths'][i]+')"/>'; 
 
\t \t } 
 
\t \t document.getElementById("optionForm").innerHTML = optionsHTML; 
 
}

#line4 { 
 
\t color: rgba(0, 0, 0, 0.7); 
 
} 
 
#line3 { 
 
\t color: rgba(0, 0, 0, 0.5); 
 
} 
 
#line2 { 
 
\t color: rgba(0, 0, 0, 0.3); 
 
} 
 
#line1 { 
 
\t color: rgba(0, 0, 0, 0.2); 
 
}

<div> 
 
\t <span id="line1"><p id="l0">one</p></span> 
 
\t <span id="line2"><p id="l1">two</p></span> 
 
\t <span id="line3"><p id="l2">tre</p></span> 
 
\t <span id="line4"><p id="l3">quatro</p></span> 
 
\t <span id="line5"><p id="l4">ok</p></span> 
 
</div> 
 

 
<div id="optionForm"> 
 
\t <input type="button" value="Continue" onclick="clickEventHandler()"/> 
 
</div>

Answer 1

So wie ich es tun würde, ist mit Objekten die Daten richtig, die Struktur, wie sie in:

var allStories: [{ 
    id: 23 //uniqueNumericID 
    message: "Your message", 
    continue: 24, 
    yes: 28, 
    no: 35, 
    anyOptionName: anyID 
}, 
{ 
    //Another object, and so on 
}] 

//Then use a script like this to add them under 
//a single object under their ID's: 

var stories = {} 
var currentStory = 1; //ID of the first story 
allStories.forEach(function(element, index, array){ 
    stories[element.id] = element; 
}); 

//Now on your buttons, just deliver the "keyword" 
//that should be used to go forward, like so: 

function ContinueClickEventHandler(){ 
    currentStory = stories[currentStory['continue']] 
    // Your currentStory will now have the message. 
} 

Wenn Ihr weiter Schlüsselwort ist ja oder nein oder was auch immer ist, springt es zu diesem Segment, Sie können es sogar alle einen einzigen Handler mit einem Parameter machen und es einfach anstelle eines festen continue