Coma Coma - 1 year ago 91
Javascript Question

Logical / clean way to approach branching out text story?

I'm working on a very simple text adventure in javascript. You are shown a paragraph of text, there is a continue for you to click which will progress you to the next paragraph of the story. Occasionally the button is replaced with several option buttons, for instance yes/no, or options 1/2/3 etc, which will alter the course of the story.

Example of text adventure

What is a clean and logical way to structure such a 'dialog system'?

This is what I have right now:

A variable timeline determines the next message and continuity of the story by cycling through a switch. When the story is linear, timeline increments by one, which leads to the next message. When a choice is encountered (such as in timeline = 2), my functions will allow the player to choose whether to continue through story path 1 (timeline 3,4) or story path 2 (timeline = 5...).

function nextMsg(){
switch(timeline) {
case 1:
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.";
case 2:
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?";
case 3:
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.";
case 4:
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.";
case 5:
nextMessage = "Apprehensive of the shadowy figure, you decide to venture deeper into the forest.";

In theory, even if this gets overly complicated and convoluted it will all work. But if I decide to add/remove messages in between, the timeline numbers will get very messy and disorganised. It will also become very difficult to keep track of the possible story paths, especially as they weave in and out of each other. Is there a better way to structure data like this? A switch is the only thing I can think of, yet it feels stupid.



var subEvents =
id: 1,
text: ["para1","para2","para3"],
yes: 2,
no: 3
id: 2,
text: ["para4","para5","para6"],
yes: 9001,
no: 9001
id: 3,
text: ["para7","para8","para9","para10"],
yes: 9001,
no: 9001

var story = {}
var currentEvent = 1;
subEvents.forEach(function(element, index, array){
story[] = element;

function ContinueClickYesHandler(){
currentEvent = story[currentEvent['yes']];
document.getElementById("l4").innerHTML = currentEvent.text;


<div id="continueForm">
<input type="button" value="Continue" onclick="ContinueClickYesHandler()"/>

First of all, this notation is alien to me, I'm trying my best to adapt. The code above doesn't work, but I hope I can get the concept across. What I need to figure out now is:

1. How to make the code I shamelessly tried to adapt work at least on a basic level. SOLVED

2. How to get the continue button to cycle through the x amount of
paragraphs in a given subEvent before continuing to the next one.

3. How to mechanise the continue/yes/no option buttons, so I can
create any amount of options with any names in a given subEvent (I'm
still not sure how even the yes/no is even supposed to work)

Also could you give me some insight on how exactly this line works?

subEvents.forEach(function(element, index, array){
story[] = element;

I assume all the data gets annexed to the story[] array, so I should be able to retrieve data with a statement like:

return story[currentEvent].text[1]; //return first paragraph from subEvent

, correct?

Sorry I'm just learning the magic of objects, bare with me if I'm being stupid

Answer Source

The way I'd do it is with objects that structure the data properly, as 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;

//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.

If your continue keyword is yes or no or whatever it is, it jumps to that segment, you can even make it all a single handler with a parameter and just pass it instead of a fixed continue

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download