Jak wdrożyć dialog rozgałęziający w javascript?

W JavaScript robię bardzo podstawowy typ powieści wizualnej . Jestem początkującym, więc robię to tylko dla zabawy i nauki, a z powodu złego planowania natknąłem się na pewien problem, kiedy wchodzisz do oddziału w dialogu.

Obecnie trzymam skrypt gry w zmiennej łańcuchowej i każdą scenę dzielę tagiem takim jak „# ~” na mniejsze tablice, aby skrypt gry wyglądał tak:

var script = "Hello World!#~How are you today?"
var gameText = script.split("#~");
//gameText[0]= Hello World!

Działa to świetnie w przypadku elementów liniowych, ale jak mam obsługiwać gałąź w drzewie dialogowym? Ta metoda wydaje się bardzo skomplikowana, ponieważ musiałbym dokładnie wiedzieć, jak długa jest każda ścieżka, a gdybym kiedykolwiek musiał coś zmienić, byłby to ból głowy.

Jak mogę to zrobić w prostszy sposób? Staram się trzymać waniliowego JavaScript, ponieważ chciałbym, aby gra współpracowała z Web Run Time.

Odpowiedź Filipa już pokazuje właściwy kierunek. Myślę, że struktura danych jest niepotrzebnie pełna. Krótsze teksty łatwiej byłoby pisać i czytać.

Nawet jeśli krótsze teksty uczynią algorytm nieco bardziej złożonym, warto to zrobić, ponieważ algorytm pisze się tylko raz, ale większość czasu poświęcisz na napisanie i utrzymanie historii. Dlatego zoptymalizuj, aby ułatwić wykonanie części, którą poświęcisz najwięcej czasu.

var story = [
  { m: "Hi!" },
  { m: "This is my new game." },
  { question: "Do you like it?", answers: [
    { m: "yes", next: "like_yes" },
    { m: "no", next: "like_no" },
  ] },
  { label: "like_yes", m: "I am happy you like my game!", next: "like_end" },
  { label: "like_no", m: "You made me sad!", next: "like_end" },
  { label: "like_end" },
  { m: "OK, let's change the topic" }
];

Kilka wyjaśnień dla tego projektu:

Cała historia jest napisana w jednym szyku. Nie musisz podawać liczb, są one dostarczane automatycznie przez składnię tablicy: pierwszy element ma indeks 0, następny ma indeks 1 itd.

W większości przypadków nie jest konieczne wpisanie numeru następnego kroku. Zakładam, że większość wierszy tekstu nie jest gałęziami. Uczyńmy „następnym krokiem jest następujący element” domyślne założenie i robimy notatki tylko wtedy, gdy jest inaczej.

Do skoków używaj etykiet , a nie liczb. Następnie, jeśli później dodasz lub usuniesz kilka wierszy, logika historii zostanie zachowana i nie będziesz musiał dostosowywać liczb.

Znajdź rozsądny kompromis między jasnością a skrótem. Na przykład proponuję napisać „m” zamiast „wiadomość”, ponieważ będzie to najczęściej używane polecenie w historii, więc skrócenie go spowoduje, że tekst będzie bardziej czytelny. Ale nie ma potrzeby skracania pozostałych słów kluczowych. (Rób jednak, co chcesz. Ważne, aby było to dla Ciebie najbardziej czytelne . Alternatywnie możesz podać zarówno „m”, jak i „wiadomość” jako prawidłowe słowa kluczowe.)

Algorytm gry powinien wyglądać mniej więcej tak:

function execute_game() {
  var current_line = 0;
  while (current_line < story.length) {
    var current_step = story[current_line];
    if (undefined !== current_step.m) {

      display_message(current_step.m);
      if (undefined !== current_step.next) {
        current_line = find_label(current_step.next);
      } else {
        current_line = current_line + 1;
      }

    } else if (undefined !== current_step.question) {

      // display the question: current_step.question
      // display the answers: current_step.answers
      // choose an answer
      // and change current_line accordingly

    }
  }
}

Nawiasem mówiąc, te pomysły zostały zainspirowane przez Ren'Py , który nie jest dokładnie tym, czego chcesz (nie JavaScript, nie internet), ale i tak może dać ci fajne pomysły.

Poleciłbym ci stworzyć tablicę zdarzeń dialogowych. Każde zdarzenie to obiekt zawierający tekst, który mówi NPC i tablicę możliwych odpowiedzi graczy, które z kolei są obiektami z tekstem odpowiedzi i indeksem zdarzenia, które następuje po tej odpowiedzi.

var event = []; // create empty array

// create event objects and store them in the array
event[0] = { text: "Hello, how are you?",
             options: [    { response: "Bad", next: 1 },
                           { response: "Good", next: 2 }
                      ]
           };
event[1] = { text: "Why, what's wrong?",
             options: [    { response: "My dog ran away", next: 3},
                           { response: "I broke up with my girlfriend", next: 4}
                      ]
           };
event[2] = { text: "That's nice",

...

Powinieneś zastosować inne podejście. JavaScript obsługuje tablice i obiekty, więc dlaczego nie użyć jednego dla każdego wpisu, oszczędzając ci podziału, a także ułatwiając edycję / czytanie tekstu?

Jeśli chcesz, możesz rzucić okiem na prototyp , który zrobiłem w ciągu kilku godzin dla # 1gam . Źródła można używać bezpłatnie na GPLv3 (nic mi nie jest, jeśli nie trzymasz się GPL, jeśli używasz go tylko jako inspiracji. Ale daj mi znać, kiedy skończysz grę.) Po prostu nie oczekuj wspaniałego pisania ani czegoś takiego. ;)

Aby krótko wyjaśnić, jak działa kod, ignorując animację CSS i podobne rzeczy:

• var data zasadniczo zawiera całą historię ze wszystkimi możliwymi wyborami itp.
• Każda „lokalizacja” (lub strona / pozycja) jest identyfikowana za pomocą identyfikatora. Pierwszy identyfikator na liście to startdrugi cwaititd.
• Każda lokalizacja zawiera dwa obowiązkowe elementy: Podpis, a także sam tekst. Łącza do decyzji zapisywane są w prosty sposób, przyjmując formę [target location:display text].
• W środku dzieje się cała „magia” navigate(): Ta funkcja sprawia, że ​​linki znaczników są klikalne. Jest trochę dłużej, ponieważ tam też obsługuję statyczny tekst dla Dead Ends. Ważną częścią są dwa pierwsze połączenia z replace().
• Opcjonalne ostatnie wpisy definiują nowe kolory tła, do których należy się wtopić, wspierając ogólny nastrój gry.

• Zamiast definiować te kolory, możesz również dodać linki prowadzące do innych lokalizacji (zwróć uwagę, że mój kod tego nie obsługuje; to tylko pewien pomysł, aby to zademonstrować):

  'start': ['Waking up', 'You wake...', 'cwait:yell for help', 'cwait: wait a bit', 'clook: look around']