如何让提示阅读文本输入并打印出自定义文本消息?
How to let prompt read text input & print out customised text messages?
我正在尝试使用基本 JS 制作文字冒险游戏。基本上,用户将有 2 个选项,提示框应根据用户的选择打印出相应的消息。
我猜想缺少的是事件侦听器——但我不确定如何着手实现它。
let message = prompt("Hi this is an adventure. Select your input as A or B. In front of you there is a sign. Pick A. Forest B. Lake")
if (A) {
prompt("you see the bushes ahead of you rustling.You-- A.proceed ahead B.turn back and run")
};
else if (B) {
prompt("you see the water bubbling. You--A. walk up B.--flee")
}
您需要比较 if (message.toUpperCase() === "A") {
以允许用户键入 a 或 A
如果你使用一个对象和一个表单,你的代码也会少很多
const advent = {
"Start": {
"text": "Hi this is an adventure. Click the buttons to make your choice. In front of you there is a sign. You go direction",
"a": "Forest",
"b": "Lake"
},
"Forest": {
"text": "you see the bushes ahead of you rustling. You --",
"a": "proceed ahead",
"b": "turn back and run"
},
"Lake": {
"text": "you see the water bubbling. You--",
"a": "walk up",
"b": "flee"
},
"walk up": {
"text": "You drown; The end"
},
"flee": {
"text": "You fall in a hole and die; The end"
}
};
let currentPath = advent["Start"]
window.addEventListener("DOMContentLoaded", function() {
const text = document.getElementById("text");
const A = document.getElementById("a");
const B = document.getElementById("b");
const show = () => {
text.innerHTML = currentPath.text; console.log(currentPath.a)
if(currentPath.a) A.value = currentPath.a
if(currentPath.b) B.value = currentPath.b
};
const form = document.getElementById("myForm").addEventListener("click", function(e) {
const tgt = e.target;
currentPath = advent[currentPath[tgt.id]]
document.getElementById("choices").hidden = (!currentPath.a && !currentPath.b); // hide if no choices
show()
});
show(); // start
});
<form id="myForm">
<div id="text"></div>
<div id="choices"><input type="button" id="a" value="A"> <input type="button" id="b" value="B"></div>
</form>
我正在尝试使用基本 JS 制作文字冒险游戏。基本上,用户将有 2 个选项,提示框应根据用户的选择打印出相应的消息。
我猜想缺少的是事件侦听器——但我不确定如何着手实现它。
let message = prompt("Hi this is an adventure. Select your input as A or B. In front of you there is a sign. Pick A. Forest B. Lake")
if (A) {
prompt("you see the bushes ahead of you rustling.You-- A.proceed ahead B.turn back and run")
};
else if (B) {
prompt("you see the water bubbling. You--A. walk up B.--flee")
}
您需要比较 if (message.toUpperCase() === "A") {
以允许用户键入 a 或 A
如果你使用一个对象和一个表单,你的代码也会少很多
const advent = {
"Start": {
"text": "Hi this is an adventure. Click the buttons to make your choice. In front of you there is a sign. You go direction",
"a": "Forest",
"b": "Lake"
},
"Forest": {
"text": "you see the bushes ahead of you rustling. You --",
"a": "proceed ahead",
"b": "turn back and run"
},
"Lake": {
"text": "you see the water bubbling. You--",
"a": "walk up",
"b": "flee"
},
"walk up": {
"text": "You drown; The end"
},
"flee": {
"text": "You fall in a hole and die; The end"
}
};
let currentPath = advent["Start"]
window.addEventListener("DOMContentLoaded", function() {
const text = document.getElementById("text");
const A = document.getElementById("a");
const B = document.getElementById("b");
const show = () => {
text.innerHTML = currentPath.text; console.log(currentPath.a)
if(currentPath.a) A.value = currentPath.a
if(currentPath.b) B.value = currentPath.b
};
const form = document.getElementById("myForm").addEventListener("click", function(e) {
const tgt = e.target;
currentPath = advent[currentPath[tgt.id]]
document.getElementById("choices").hidden = (!currentPath.a && !currentPath.b); // hide if no choices
show()
});
show(); // start
});
<form id="myForm">
<div id="text"></div>
<div id="choices"><input type="button" id="a" value="A"> <input type="button" id="b" value="B"></div>
</form>