Question

我想创建一个简单的文本游戏，您可以选择各种各样的选项，根据您的选择，会显示一些内容并且当前内容会消失。我的问题是每个选择都不同，所以我无法想出一种方法，不能在javascript代码中一次又一次地重复自己。

HTML：

<!Doctype html>
<html>
<head>

    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css"/>

    <title>Game</title>
</head>
    <body>
    <div id="console">
        <div class="storyCard" id="start">
            <p class="q">Some stuff.
            <p class="a">getup</p>
            <p class="a">sleep</p>
        </div>
        <div class="storyCard" id="getup">
            <p class="q">Something happened</p>
            <p class="a">do this</p>
            <p class="a">do that</p>
        </div>
        <div class="storyCard" id="sleep">
            <p class="q">something else happened</p>
            <p class="a">do something</p>
            <p class="a">do something else</p>
        </div>
       <!--and there will be a lot of such storyCards based on the choices.-->     
 </div>
    <script type="text/javascript" src="js.js"></script>
</body>
</html>

CSS：

body {
    margin: 0 auto;
    align-content: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;   
}
#console {
    width: 100%;
}

.storyCard {
    min-width: 100px;
    max-width: 600px;
    background-color: rgba(0, 0, 0, 0.51);
    box-shadow: 1px 1px 7px;
    padding: 50px;
    color: white;
    margin: 0 auto;
    border-radius: 4px;
    display: none;
}
#start {
    display: block;
}
.storyCard .a {
    background-color: dodgerblue;
    border-bottom-color: dodgerblue;
    border-top-color: white;
    border-left-color: white;
    border-right-color: dodgerblue;
    padding: 10px;
    text-align: center;
    color: white;
    width: 30%;
    display: inline;
    margin: 0 auto;
    box-shadow: 1px 1px 7px black; 
    float: right;
    cursor: pointer;
}
.storyCard .a:hover {
    background-color: white;
    color: black;
}
}

Javascript：

document.querySelector('#console').addEventListener('click', function (e) {
    var answer = e.target.textContent;
    switch (answer) {
        case 'getup':
            e.target.parentNode.style.display = 'none';
            document.querySelector('#getup').style.display = 'block';
            break;
        case 'sleep':
            e.target.parentNode.style.display = 'none';
            document.querySelector('#sleep').style.display = 'block';
            break;
        case 'do this':
            e.target.parentNode.style.display = 'none';
            /*display another content like above*/
        case 'do that':
            /*hide the current content again and display another content and add more cases*/

}, false);

Answer 1

您可以在此link中尝试performAction(e, '#getup'); - 带参数的通用方法。

请参阅下面的代码：

<强> HTML：

<div id="console">
  <div class="storyCard" id="start">
    <p class="q">Some stuff.</p>
    <p class="a">getup</p>
    <p class="a">sleep</p>
  </div>
  <div class="storyCard" id="getup">
    <p class="q">Something happened</p>
    <p class="a">do this</p>
    <p class="a">do that</p>
  </div>
  <div class="storyCard" id="sleep">
    <p class="q">something else happened</p>
    <p class="a">do something</p>
    <p class="a">do something else</p>
  </div>
  <!--and there will be a lot of such storyCards based on the choices.-->
</div>

<强> CSS：

body {
  margin: 0 auto;
  align-content: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

#console {
  width: 100%;
}

.storyCard {
  min-width: 100px;
  max-width: 600px;
  background-color: rgba(0, 0, 0, 0.51);
  box-shadow: 1px 1px 7px;
  padding: 50px;
  color: white;
  margin: 0 auto;
  border-radius: 4px;
  display: none;
}

#start {
  display: block;
}

.storyCard .a {
  background-color: dodgerblue;
  border-bottom-color: dodgerblue;
  border-top-color: white;
  border-left-color: white;
  border-right-color: dodgerblue;
  padding: 10px;
  text-align: center;
  color: white;
  width: 30%;
  display: inline;
  margin: 0 auto;
  box-shadow: 1px 1px 7px black;
  float: right;
  cursor: pointer;
}

.storyCard .a:hover {
  background-color: white;
  color: black;
}

<强> JS：

document.querySelector('#console').addEventListener('click', function(e) {
  var answer = e.target.textContent;
  switch (answer) {
    case 'getup':
      performAction(e, '#getup');
      break;
    case 'sleep':
      performAction(e, '#sleep');
      break;
    case 'do this':
      performAction(e, '#getup'); /**Use any 'id' or target of your choice.*/
      /*display another content like above*/
      break;
    case 'do that':
      performAction(e, '#getup'); /*Use any 'id' or target of your choice.*/
      /*hide the current content again and display another content and add more cases*/
      break;
  }
}, false);

function performAction(event, target) {
  event.target.parentNode.style.display = 'none';
  document.querySelector(target).style.display = 'block';
}

Answer 2

我认为这个问题必须像你的样本一样在html中定义。还有很多其他方法可以做得更好。

您可以使用班级名称来指定下一个问题。

document.addEventListener('click', function (e) {
  var target = e.target;
  if (target.className.match('answer')) {
    var nextQuestionId = target.className.replace('answer ', '');
    hideAllStoryCards();
    showStoryCard(nextQuestionId);
  }
});

function hideAllStoryCards () {
  var i, elm, elms = document.getElementsByClassName('storyCard');
  for (i = 0; i < elms.length; i++) {
    elm = elms[i];
    elm.style.display = 'none';
  }
}

function showStoryCard (id) {
  var storyCard = document.getElementById(id);
  storyCard.style.display = 'block';
}

hideAllStoryCards();
showStoryCard('first-question');

<div id="console">
  <div class="storyCard" id="first-question">
    <p class="q">Are you hungry?</p>
    <p class="answer what-do-you-want-to-eat">yes</p>
    <p class="answer may-i-help-you">no</p>
  </div>
  <div class="storyCard" id="what-do-you-want-to-eat">
    <p class="q">Some stuff.</p>
    <p class="answer NEXT_QUESTION_ID">a pie</p>
    <p class="answer ANOTHER_QUESTION_ID">a buger</p>
  </div>
  <div class="storyCard" id="may-i-help-you">
    <p class="q">Some stuff.</p>
    <p class="answer NEXT_QUESTION_ID">bye</p>
    <p class="answer ANOTHER_QUESTION_ID">bye again</p>
  </div>
</div>

Answer 3

您需要将数据与用户界面分开。

您的数据可能很简单：

var stories;

function StoryCard(q, option1, option2) {
    this.q = q
    this.option1 = option1;
    this.option2 = option2;
}

function displayStory(storyCard) {
    document.getElementById('q').innerHTML = storyCard.q;
    document.getElementById('option1').innerHTML = storyCard.option1;
    document.getElementById('option2').innerHTML = storyCard.option2;
}

你的＆＃34;控制台＆＃34; UI可能会更改为更像这样的内容：

<div id="console">
    <div class="storyCard" id="start">
        <p class="q" id="q">&nbsp;</p>
        <p class="a" id="option1">&nbsp;</p>
        <p class="a" id="option2">&nbsp;</p>
    </div>
</div>

您的点击功能可能更像是这样：

document.querySelector('#console').addEventListener('click', function (e) {
    var answer = e.target.id;
    switch (answer) {
        default: // for when they click within the div, but not on an option
            break;
        case 'option1':
        case 'option2':
            var story = stories[e.target.innerHTML];
            if (null != story) {
                displayStory(story);
            }
            break;
    }
}, false);

您可以在onload中设置您的故事：

function init() {
    stories = { "start": new StoryCard("Some stuff", "getup", "sleep")
              , "getup": new StoryCard("Something happened", "do this", "do that")
              , "sleep": new StoryCard("something else happened", "do something", "do something else")
              };

    displayStory(stories["start"]);
}

创建一次又一次调用的函数

3 个答案: