下面是一个使用 jQuery 的示例。 jQuery对于操作DOM元素很有用。而不是通过执行以下操作来选择对象：

document.getElementById('someid');

您将像在 CSS 中一样选择元素：

$('#someid);

在我的冒险游戏示例中，我使用 JSON 对象来包含我的故事及其路径。story对象是场景对象的路径 ID（例如"简介"、"choose_weapon"）的映射。这有助于组织您的故事。

我使用按钮而不是输入字段作为选项，因为让用户输入他们的选择会很烦人。

// Contains the story and paths
var story = {
  intro: {
    prompt: 'It is 12am and you are starving. It''s too late to order delivery. You know what that means.',
    options: [{
      name: 'Fight',
      path: 'choose_weapon'
    }, {
      name: 'Starve',
      path: 'die_starve'
    }]
  },
  choose_weapon: {
    prompt: 'Choose your weapon!',
    options: [{
      name: 'Knife',
      path: 'die_cut'
    }, {
      name: 'Toaster',
      path: 'toast'
    }]
  },
  toast: {
    prompt: 'You toast some bread. What do you do next?',
    options: [{
      name: 'Eat it!',
      path: 'eat'
    }, {
      name: 'Slather on some peanut butter!',
      path: 'peanut_butter'
    }]
  },
  peanut_butter: {
    prompt: 'There is now peanut butter on your bread. Excellent choice. What do you do next?',
    options: [{
      name: 'Eat it!',
      path: 'eat'
    }, {
      name: 'Throw it away',
      path: 'die_starve'
    }]
  },
  eat: {
    prompt: 'It was delicious! You are no longer hungry.',
    options: [{
      name: 'Start Again',
      path: 'intro'
    }]
  },
  die_cut: {
    prompt: 'You accidentally cut yourself and bleed to death.',
    options: [{
      name: 'Start Again',
      path: 'intro'
    }]
  },
  die_starve: {
    prompt: 'You have died of hunger!',
    options: [{
      name: 'Start Again',
      path: 'intro'
    }]
  }
}
/**
 * Chosen option is an object with properties {name, path}
 */
function display_scenario(chosen_option) {
  var option_name = chosen_option.name;
  var option_path = chosen_option.path;
  var scenario = story[option_path];
  
  // Clear the #prompt div and the #options div
  $('#prompt').empty();
  $('#options').empty();
  
  // Create a <p> to display what the user has chosen if option_name is not null and append it to the #prompt <div>
  if (option_name) {
    $('<p>').html('You have chosen <b>' + option_name + '</b>').appendTo('#prompt');
  }
  
  // Append the scenario's prompt
  $('<p>').html(scenario.prompt).appendTo('#prompt');
  
  // Append the options into the #options <div>
  // We want to loop through all the options and create buttons for each one. A regular for-loop would not suffice because adding a button is not asynchronous. We will create an asynchronous loop by using recursion
  function add_option_button(index) {
    if (index === scenario.options.length) {
      // Base case
      return;
    }
    
    var option = scenario.options[index];
    
    // Create a <button> for this option and append it to the #options <div>
    $('<button>')
      .html(option.name)
      .click(function(e) {
        // This is an onclick handler function. It decides what to do after the user has clicked on the button.
      
        // First, prevent any default thing that the button is going to do, since we're specifying our own action for the button
        e.preventDefault();
      
        // We'll want to call display_scenario() with this option
        display_scenario(option);
      })
      .appendTo('#options');
    
    // Add the next option button
    add_option_button(index + 1);
  }
  add_option_button(0);
}
// This function waits until the document is ready
$(document).ready(function() {
  // Start the story
  display_scenario({
    name: null,
    path: 'intro'
  });
});

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
* {
  margin: 0px;
  padding: 0px;
  color: #32363F;
  font: 18px 'Open Sans', sans-serif;
  border: none;
  outline: none;
  box-sizing: border-box;
}
html {
  display: table;
  width: 100%;
  height: 100%;
}
body {
  display: table-cell;
  background: #32363F;
  vertical-align: middle;
}
#wrapper {
  margin: 40px;
  background: #D6C2A3;
  width: calc(100% - 80px);
}
h1 {
  display: block;
  padding: 20px 20px 12px;
  font: 700 36px 'Open Sans', sans-serif;
  background: #E84949;
  color: #FAFAFA;
  text-transform: uppercase;
}
#prompt {
  padding: 20px;
}
#prompt p {
  padding-bottom: 8px;
}
#prompt p b {
  font-weight: 700;
}
#options {
  display: flex;
  padding: 0px 20px 28px;
  text-align: center;
}
#options button {
  margin: 0px 8px;
  padding: 8px 20px;
  background: #C2AE8F;
  width: 100%;
  cursor: pointer;
}
#options button:hover,
#options button:active {
  background: #E84949;
  color: #FAFAFA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <h1>Food Adventure</h1>
  <div id="prompt"></div>
  <div id="options"></div>
</div>