如何让JavaScript一次运行一个字符串

时间:2016-03-09 21:03:33

标签: javascript text adventure

今天我试图让文字冒险出现在'画布'中,就像我为MadLibs所做的一样,但我似乎无法让它一次出现一行,或者找到让用户点击的方法出现下一行的东西。另一个问题是当一个选项出现时该怎么办,所以如果有人正在阅读这个并且知道如何解决这个问题:看看到目前为止我在my website做了什么。

目前我只是按顺序运行一系列警报(故事的每一行一个),然后确认并提示用户可以做出决定的方框。这不是非常用户友好,我希望文本使用类似.innerHTML的内容显示,但我不知道如何使用它。

See here for the code behind the function.

function theElderwood1() {
  alert("THE ELDERWOOD: EPISODE I by Kiran Evans");
  var conf = confirm("Play this game?");
  if (conf === false) {
    return;
  } else {
    alert("Let's go!");
  };
  alert("It was a dark and stormy night, when a mouse stirred in the woods. You check your watch, it's nearly midnight... and you are lost.");
  alert("You came here for a stroll, but that was at 5pm and the Sun was still up. Now everything is pitch black and the only light is coming from the Moon and stars.");
  var torchSearch = confirm("Do you want to search your bag for a torch?");
  if (torchSearch === true) {
    alert("You search your bag and find a torch, with very low battery power.");
    alert("You shine the torch ahead of you, and notice that the path forks into two.");
  } else {
    alert("You don't search your bag, and have to deal with the lack of natural light.");
    alert("After walking a little while, you can just about make out that the path forks into two.")
  };
  var pathChoice = prompt("Do you want to take the left or right fork? (Type 'L' or 'R')");
  if (pathChoice.toUpperCase() === 'L') {
    alert("You take the left path, and continue walking.");
    alert("You eventually come across a stream.");
    if (torchSearch === true) {
      alert("You shine the torch into it and see that the stream is running very fast, and is too deep to wade through.");
    } else {
      alert("You cannot tell how fast or how deep it is, so you try to wade through.");
      alert("Half way across, you sink into the stream which has become a river and cannot escape. You get swept under and cannot breathe.");
      alert("You drowned.");
      return;
    };
    alert("You decide to turn back and take the right path.");
  } else {
    alert("You take the right path, and continue walking.");
  };
  alert("Down the right path, you come across a small construction of sticks and twigs.");
  var wigwamSearch = confirm("Do you want to look inside?");
  if (wigwamSearch === true) {
    if (torchSearch === true) {
      alert("You shine your torch into it, and a small goblin-like creature lashes out at you.");
      alert("Hitting it with the torch, you manage to fight it off and it hobbles back into its lair.");
    } else {
      alert("You poke your head inside to get a better look and can just about make out a pair of glowing red eyes right in your face.");
      alert("Whatever the creature is, you can hear it breathing and it begins to shriek.");
      alert("The creature screams, lashes out and attacks you. You have nothing to fight it with, so have to use your fists.");
      alert("You manage to fight it off eventually, but not without some extreme injuries. You are bleeding heavily from your neck, where the creature has bitten you.");
      alert("The scent of your blood attracts more of the creatures.");
      var run = confirm("Do you want to run?");
      if (run === true) {
        alert("You get back on your feet and start running...");
        alert("...but it's not enough. The creatures outnumber you, though you can't see how many there are.");
        alert("They overpower you and devour you. You died.");
        return;
      } else {
        alert("You sit back and await your approaching doom.");
        alert("The creatures surround you and tear you to pieces. You died.");
        return;
      };
    };
  } else {
    alert("You decide not to look inside the structure and continue walking.");
  };
  alert("Your legs begin to feel tired, so you check your watch. It is now 30 minutes into the morning. You know you must find a way out of the woods soon as you are feeling tired and hungry.");
  alert("You hear rustling behind you and spin round...");
  if (torchSearch === true) {
    alert("You point your torch at the noise and a fleck of white catches your eye in the blackness of the night.");
    alert("You move your torch about and more patches of white appear until they start to form the shapes of creatures.");
    alert("One of the creatures emerges from the darkness onto the path from where you just came.");
    alert("It is small, not much higher than your waist, and has bright red eyes. Its skin is inexplicably pale and scarred in several places.");
    alert("More creatures step out into the torchlight and slowly begin hobbling towards you.");
    var runFrom = confirm("Do you want to run?");
    if (runFrom === true) {
      alert("You turn away from them and begin to pick up your pace, going from a walk to a jog and eventually into a sprint.");
      alert("Despite your incredible speed, you can hear the creatures close behind at all times.");
      alert("You feel the ground under your feet change from soft soil to hard rock.");
      var checkSurroundings = confirm("The creatures are still hot on your heels. Do you want to pause to check out your surroundings?");
      if (checkSurroundings === true) {
        alert("You slow down, shining your torch around and notice a cliff edge up ahead. You notice how you are now on top of a cliff, in an open space.");
        alert("You quickly change direction and begin running parallel to the cliff edge.");
      } else {
        alert("You pick up the pace, set on the path ahead....");
        alert("...which suddenly disappears from underneath you.");
        alert("You are falling...");
        alert("...for ever...");
        alert("...until you hit the floor.");
        alert("You died.");
        return;
      };
    } else {
      alert("You stay put, observing the creatures as they approach. Keeping the torchlight fixed on them, your hands begin to shake as you notice the closer ones gnashing their teeth.");
      alert("Frozen in fear, you begin to sweat as the first creature reaches you and sniffs you.");
      alert("The creature jumps onto you, knocking you to the ground and licks your face.");
      alert("The others surround you and the one on top of you bites your neck.");
      alert("You scream in pain as the creatures eat you alive.");
      return;
    };
  } else {
    alert("You cannot make out anything behind you, dismissing it as your imagination.");
    alert("You feel the ground under your feet change from soft soil to hard rock.");
    alert("You pick up the pace, set on the path ahead....");
    alert("...which suddenly disappears from underneath you.");
    alert("You are falling...");
    alert("...for ever...");
    alert("...until you hit the floor.");
    alert("You died.");
    return;
  };
  alert("The cliff eventually becomes a road and you hear the creatures behind you scream with anger as you reach a lamp post and are safely in the light.");
  alert("You can see the lights of a town ahead of you, and head for them.");
  alert("You check your watch. The time is now 1am. You're feeling extremely fatigued and don't know if you can make it to the next town.");
  var sit = confirm("There is a bench beside the road. Do you want to sit down, and rest?");
  if (sit === true) {
    alert("With the creatures well out of reach, you take a seat on the bench and close your eyes.");
  } else {
    alert("You decide to soldier on until you reach the town.");
    alert("Unfortunately, you overestimated the capacity of your own stamina and collapse in the middle of the road and black out.");
  };
  alert("END OF EPISODE I.");
  var restart = confirm("Do you want to restart?");
  if (restart === true) {
    theElderwood1();
    return;
  } else {
    scoreCount += 1;
    score(1, 'theElderwood2');
    alert("UNLOCKED! The Elderwood: Episode II");
    return;
  };
};

正如您所看到的,对于所有这些弹出窗口来说,它非常简单并且不是非常用户友好。任何关于此的帮助/建议都将不胜感激!谢谢!

1 个答案:

答案 0 :(得分:0)

以下是您需要的全球视图,希望有所帮助!

  1. 如果您不熟悉HTML,请参考一些教程。不要害怕它,HTML甚至不是一种编程语言,而是一种用于组织数据的标记语言,比Javascript更容易。一旦你看到纯粹的纯HTML出现,你就会想学习CSS。

  2. 您需要在HTML页面中编写某个位置。 <p>内某处的<body>标记就可以了。为其指定一个标识符,以便日后轻松检索:<p id="story"></p>

  3. 您需要使用Javascript来查找要写的位置。使用document.getElementById(id)

  4. 您在页面中编辑的内容是文字,我建议不要使用.innerHTML,即使它看起来更容易。您想要创建一个文本节点,可以使用document.createTextNode(text)

  5. 获得文本节点并知道放置位置后,只需使用element.appendChild(otherElement)即可。 &#34;元件&#34;这是由getElementById检索的元素,而&#34; otherElement&#34;应该是创建的文本节点。

  6. 添加文字很好,但你也应该在某些时候删除它!当然,在一个带有纸莎草颜色的漂亮面板中制作卷轴会很不错,但首先,研究如何使用element.removeChild删除前一行的文本。这里有很多步骤,但我不知道你对javascript了解多少,所以也许你会没事,或者这可能是另一个StackOverflow问题?

  7. 一旦所有这些工作正常,您就会想要用confirm()替换<button>次来电,并且可能要添加一个文本<input>区域向玩家提问,但这超出了这个问题的范围。

  8. 祝你好运!