Как мне реализовать ветвление диалога в JavaScript?

Я делаю очень простой визуальный новый тип игры на JavaScript. Я новичок, так что я просто делаю это для удовольствия и обучения, и из-за плохого планирования у меня возникла небольшая проблема, когда вы переходите на ветку в диалоге.

В настоящее время я держу сценарий для игры в строковой переменной и разбиваю каждую сцену с помощью тега, такого как «# ~», на меньшие массивы, чтобы сценарий игры выглядел следующим образом:

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

Это прекрасно работает для линейных вещей, но как мне обработать ветку в дереве диалога? Этот метод кажется очень сложным, так как я должен был бы точно знать, какова длина каждого пути, а затем, если мне когда-нибудь понадобится что-то изменить, это будет головной болью.

Как я могу сделать это более простым способом? Я пытаюсь придерживаться ванильного JavaScript, поскольку я хотел бы, чтобы игра работала с Web Run Time.

Ответ Филиппа уже показывает правильное направление. Я просто думаю, что структура данных излишне многословна. Более короткие тексты было бы легче писать и читать.

Даже если более короткие тексты сделают алгоритм немного более сложным, это стоит сделать, потому что вы пишете алгоритм только один раз, но большая часть вашего времени будет потрачена на написание и поддержание истории. Поэтому оптимизируйте, чтобы упростить ту часть, на которую вы потратите больше всего времени.

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" }
];

Некоторые объяснения этого дизайна:

Вся история написана в одном массиве. Вам не нужно указывать числа, они предоставляются автоматически с помощью синтаксиса массива: первый элемент имеет индекс 0, следующий - индекс 1 и т. Д.

В большинстве случаев нет необходимости записывать номер следующего шага. Я предполагаю, что большинство строк текста не являются ветвями. Давайте сделаем «следующий шаг - следующий элемент» предположением по умолчанию и будем делать пометки только тогда, когда это не так.

Для прыжков используйте метки , а не цифры. Затем, если вы позже добавите или удалите несколько строк, логика истории будет сохранена, и вам не придется корректировать числа.

Найдите разумный компромисс между ясностью и краткостью. Например, я предлагаю написать «m» вместо «message», потому что это будет самая часто используемая команда из всех, поэтому ее сокращение сделает текст более разборчивым. Но нет необходимости сокращать оставшиеся ключевые слова. (Тем не менее, делайте, как хотите. Важно сделать его максимально разборчивым для вас . В качестве альтернативы вы могли бы поддерживать и «m», и «message» в качестве допустимых ключевых слов.)

Алгоритм игры должен быть примерно таким:

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

    }
  }
}

Кстати, эти идеи были вдохновлены Ren'Py , который не совсем то, что вы хотите (не JavaScript, не веб), но в любом случае может дать вам несколько интересных идей.

Я бы порекомендовал вам создать массив событий диалога. Каждое событие - это объект, содержащий текст, который говорит NPC, и массив возможных ответов игрока, которые, в свою очередь, являются объектами с текстом ответа и индексом события, которое следует за этим ответом.

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",

...

Вы должны использовать другой подход. JavaScript поддерживает массивы и объекты, так почему бы не использовать по одному для каждой записи, сэкономив все разделение, а также упростив редактирование / чтение реального текста?

Если хотите, можете взглянуть на прототип, который я сделал за несколько часов для игры №1 . Исходный код можно бесплатно использовать под GPLv3 (я прекрасно подхожу, если вы не придерживаетесь GPL, если вы просто используете его для вдохновения. Но дайте мне знать, как только ваша игра будет закончена.). Только не ожидайте, что вы будете писать что-нибудь классное ;)

Чтобы дать краткое объяснение того, как работает код, игнорируя CSS-анимацию и тому подобное:

• var data по сути, содержит всю историю со всеми возможными вариантами и т. д.
• Каждое «местоположение» (или страница / запись) идентифицируется идентификатором. Первый идентификатор в списке start, второй cwaitи т. Д.
• Каждое место содержит два обязательных элемента: подпись, а также фактический текст. Ссылки для принятия решений написаны в простой разметке в форме [target location:display text].
• Внутри происходит вся «магия» navigate(): эта функция делает ссылки на разметку кликабельными. Это немного дольше, потому что я также обрабатываю некоторый статический текст для мертвых концов там. Важной частью являются первые два звонка replace().
• Необязательные последние записи определяют новые цвета фона, которые будут смешиваться, поддерживая общее настроение игры.

• Вместо определения этих цветов вы также можете добавить ссылки, указывающие на другие местоположения (обратите внимание, что это не обрабатывается моим кодом; это просто идея продемонстрировать это):

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