HTML

Question

我试图制作一个“选择你的冒险”＃39;游戏，我想知道是否有可能制作一个风格/自定义的＆＃39;提示＆＃39;窗口，如果它不能打开作为提示＆＃39;窗口，但在选定的HTML框中有提示和用户输入？这就是我的意思。如果我的HTML有

HTML

<html>
    <body>
        <textarea class="prompt" disabled="1"></textarea><br>
        <input class="input" type="text" value="inputText"></input>
        <input type="submit" value="userInput"></input>
    </body>
</html>

和

的CSS

CSS

.prompt  {
    width: 300px;
    height: 500px;
    background: black;
    color: #FFA500;
}

和JavaScript（我可能会搞乱代码）

的JavaScript

var prompt = document.getElementByClassName("prompt");
var choice = prompt("What is your choice? CHOICE1, CHOICE2, or CHOICE3?").toUpperCase();
prompt.innerHTML = choice;

我希望得到类似提示不显示对话窗口但是将提示文本放入textarea，然后用户选择输入，然后通过提交按钮提交。我怎样才能得到它，以便提示窗口将问题/文本输出到textarea，用户通过input文本字段输入答案，然后通过{{1}提交提交按钮，它正常工作。这甚至可能吗？如果没有，是否至少可以设置提示对话框本身？到目前为止，这是我的代码。

＆＃13;

input

＆＃13;

function fight()  {
  var intro = prompt("You are a hero who saved your town from a dragon attack years ago. You had fun murdering that dragon, but sadly no dragon has attacked since. Just when all hope is lo, you hear the sirens ring through the city. You know what that means. Do you PREPARE, or IGNORE THE SIRENS?").toUpperCase();
  switch(intro)  {
    case 'PREPARE':
      if(intro === "PREPARE") {
        prompt("You decided to " + intro + ". You need to choose what you will do. Keep in mind, the more activities you do, the less energy you have! You only have 3 days to prepare! What do you do? Do you SEARCH ARMOR STAND, SEARCH WEAPON STAND, GO TO MERCHANT, FIGHT DRAGON, TRAIN, or SLEEP?").toUpperCase();
      } 
  }
}

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);

html, body  {
  background: #000;
  margin: 0;
  padding: 0;
}
#wrap  {
  width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.container  {
  position: relative;
  top: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 570px;
  height: 350px;
  border: 6px ridge orange;
  padding: 0;
}
.container img  {
  position: absolute;
  bottom: 0px;
  width: 570px;
  height: 350px;
  z-index: -1;
}
p.intro  {
  color: black;
  text-shadow:
    -1px -1px 0 #FFF,
    1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
    1px 1px 0 #FFF;  
}
h2.header  {
    text-shadow:
    -1px -1px 0 #FFA500,
    1px -1px 0 #FFA500,
    -1px 1px 0 #FFA500,
    1px 1px 0 #FFA500;  
}
.box  {
  float: left;
  min-width: 567px;
  min-height: 350px;
}
.box h2  {
  font-family: 'Permanent Marker', cursive;
  font-size: 200%;
  text-align: center;
}
.box p  {
  font-family: 'Permanent Marker', arial;
  text-align: center;
}
.box a  {
  position: absolute;
  left: 165px;
  display: inline-block;
  border: 3px groove #000;
  border-radius: 5px;
  background: red;
  margin-left: auto;
  margin-right: auto;
  width: 225px;
  height: 75px;
  font-family: 'Permanent Marker', cursive;
  color: #FFA500;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
  text-align: center;
}
.battles img  {
}

＆＃13;

Answer 1

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

document.getElementById('someid');

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

$('#someid);

在我的冒险游戏示例中，我使用了一个JSON对象来包含我的故事及其路径。 story对象是方案对象的路径ID（例如＆＃39; intro＆＃39;，＆＃39; choose_weapon＆＃39;）的地图。这有助于整理您的故事。

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

＆＃13;

// 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'
  });
});

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

自定义/样式提示窗口？

HTML

CSS

的JavaScript

1 个答案: