0

今日、MadLibs で行ったのと同じように、テキスト アドベンチャーを「キャンバス」に表示しようとしましたが、一度に 1 行ずつ表示したり、ユーザーに何かをクリックして作成させる方法を見つけたりすることはできません。次の行が表示されます。もう 1 つの問題は、オプションが表示されたときにどうするかということです。誰かがこれを読んでいて、この問題を解決する方法を知っている場合は、私の Web サイトでこれまでに行ったことを確認してください。

現時点では、一連のアラート (ストーリーの各行に 1 つ) を順番に実行し、ユーザーが決定できるようにボックスを確認してプロンプトを表示する機能があります。これはあまりユーザーフレンドリーではなく、.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;
  };
};

ご覧のとおり、これは非常に単純であり、これらすべてのポップアップであまりユーザーフレンドリーではありません。これに関するヘルプ/アドバイスは大歓迎です! ありがとう!

4

1 に答える 1

0

Here is a global view on what you'll need, hope that helps !

  1. If you don't know HTML well, take a few tutorials on it. Don't be afraid of it, HTML isn't even a programming language but rather a markup language, made to organize data, much easier than Javascript. You will want to learn CSS too once you see how bland pure HTML appears.

  2. You need somewhere to write in the HTML page. A <p> tag somewhere inside the <body> will be just fine. Give it an identifier so you can retrieve it easily later : <p id="story"></p>

  3. You need your Javascript to locate where to write. Use document.getElementById(id).

  4. What you're editing in the page is text, I would not recommend using .innerHTML, even if it may appear easier. You want to create a text node, which you can do with document.createTextNode(text).

  5. Once you have your text node and know where to place it, just use element.appendChild(otherElement). "element" here is the element retrieved by by getElementById, while "otherElement" should be the created text node.

  6. Adding text is fine, but you should also remove it at some point ! Sure it'd be nice to make a scroller in a nice panel with a papyrus color, but to begin with, research how to use element.removeChild to remove the previous line's text. There are quite a few steps here but I don't know how much you know of javascript, so maybe you'll be fine, or maybe this will be another StackOverflow question?

  7. Once all of this is working fine, you'll want to replace your confirm() calls with <button>s, and maybe to add a text <input> zone to ask questions to the player, but this is outside the scope of this question.

Good luck !

于 2016-03-09T21:48:52.413 に答える