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

How to make JavaScript run one string at a time

本文关键字:运行 字符串 一个 一次 JavaScript      更新时间:2023-09-26

今天,我试图让文本冒险出现在"画布"中,就像我为 MadLibs 所做的那样,但我似乎无法让它一次显示一行,或者找到一种方法让用户单击某些内容来显示下一行。另一个问题是当出现选项时该怎么做,所以如果有人正在阅读本文并且知道我如何解决这个问题:看看我到目前为止在我的网站上做了什么。

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

有关函数背后的代码,请参阅此处。

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. 如果您不太了解 HTML,请学习一些教程。不要害怕,HTML甚至不是一种编程语言,而是一种标记语言,用于组织数据,比Javascript容易得多。一旦你看到纯HTML看起来多么平淡,你也会想要学习CSS。

  2. 您需要在 HTML 页面中写入某个地方。<body>内某处的<p>标签就可以了。给它一个标识符,以便你以后可以轻松检索它:<p id="story"></p>

  3. 你需要你的Javascript来找到在哪里写。使用 document.getElementById(id) .

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

  5. 拥有文本节点并知道放置它的位置后,只需使用 element.appendChild(otherElement) .这里的"element"是getElementById检索到的元素,而"otherElement"应该是创建的文本节点。

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

  7. 一旦所有这些工作正常,你会想要用<button>替换你的confirm()调用,也许添加一个文本<input>区域向玩家提问,但这超出了这个问题的范围。

祝你好运!