今天我试图让文字冒险出现在'画布'中,就像我为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;
};
};
正如您所看到的,对于所有这些弹出窗口来说,它非常简单并且不是非常用户友好。任何关于此的帮助/建议都将不胜感激!谢谢!
答案 0 :(得分:0)
以下是您需要的全球视图,希望有所帮助!
如果您不熟悉HTML,请参考一些教程。不要害怕它,HTML甚至不是一种编程语言,而是一种用于组织数据的标记语言,比Javascript更容易。一旦你看到纯粹的纯HTML出现,你就会想学习CSS。
您需要在HTML页面中编写某个位置。 <p>
内某处的<body>
标记就可以了。为其指定一个标识符,以便日后轻松检索:<p id="story"></p>
您需要使用Javascript来查找要写的位置。使用document.getElementById(id)
。
您在页面中编辑的内容是文字,我建议不要使用.innerHTML
,即使它看起来更容易。您想要创建一个文本节点,可以使用document.createTextNode(text)
。
获得文本节点并知道放置位置后,只需使用element.appendChild(otherElement)
即可。 &#34;元件&#34;这是由getElementById
检索的元素,而&#34; otherElement&#34;应该是创建的文本节点。
添加文字很好,但你也应该在某些时候删除它!当然,在一个带有纸莎草颜色的漂亮面板中制作卷轴会很不错,但首先,研究如何使用element.removeChild
删除前一行的文本。这里有很多步骤,但我不知道你对javascript了解多少,所以也许你会没事,或者这可能是另一个StackOverflow问题?
一旦所有这些工作正常,您就会想要用confirm()
替换<button>
次来电,并且可能要添加一个文本<input>
区域向玩家提问,但这超出了这个问题的范围。