Javascript 自定义/样式化提示窗口？

我正在尝试制作一个“选择你的冒险”游戏，我想知道是否有可能制作一个样式化/自定义的“提示”窗口，以及它是否可以不作为“提示”窗口打开，而是在选定的HTML框中输入提示和用户输入？这就是我的意思。 如果我的HTML有

HTML 和JavaScript（我可能会弄乱代码）

JavaScript 我希望得到类似这样的提示，不显示对话窗口，而是将提示文本放入文本区域，用户输入他们的选择，然后通过提交按钮提交。我如何获得它，使提示窗口将问题/文本输出到

文本区域

，用户通过

输入

文本字段输入答案，并通过

输入

提交按钮提交答案，其工作方式与正常一样。这可能吗？ 如果没有，是否至少可以设置提示对话框本身的样式？这是到目前为止我的代码

function-fight（）{
var intro=prompt（“你是一位英雄，几年前从一条龙的袭击中拯救了你的城镇。你在杀死那条龙时玩得很开心，但不幸的是，从那以后就再也没有龙攻击过。就在希望渺茫的时候，你听到警报声响彻整个城市。你知道这意味着什么。你准备好了吗，还是无视警报声？”）。toUpperCase（）；
开关（简介）{
案例“准备”：
如果（介绍==“准备”）{
提示（“你决定“+intro+”。你需要选择你要做什么。记住，你做的活动越多，你的精力就越少！你只有3天的时间来准备！你会做什么？你会搜索装甲站、搜索武器站、去找商人、斗龙、训练还是睡觉？”）。toUpperCase（）；
} 
}
}

@导入url(http://fonts.googleapis.com/css?family=Permanent+标记）；
html，正文{
背景：#000；
保证金：0；
填充：0；
}
#包裹{
宽度：760px；
左边距：自动；
右边距：自动；
}
.集装箱{
位置：相对位置；
顶部：50px；
左边距：自动；
右边距：自动；
宽度：570px；
高度：350px；
边框：6px脊橙；
填充：0；
}
.集装箱img{
位置：绝对位置；
底部：0px；
宽度：570px；
高度：350px；
z指数：-1；
}
p、 介绍{
颜色：黑色；
文本阴影：
-1px-1px 0#FFF，
1px-1px 0#FFF，
-1px 1px 0#FFF，
1px 1px 0#FFF；
}
h2.1头{
文本阴影：
-1px-1px 0#FFA500，
1px-1px 0#FFA500，
-1px 1px 0#FFA500，
1px 1px 0#FFA500；
}
.盒子{
浮动：左；
最小宽度：567px；
最小高度：350px；
}
.方框h2{
字体系列：“永久标记”，草书；
字体大小：200%；
文本对齐：居中；
}
.方框p{
字体系列：“永久标记”，arial；
文本对齐：居中；
}
.方框a{
位置：绝对位置；
左：165px；
显示：内联块；
边框：3px槽#000；
边界半径：5px；
背景：红色；
左边距：自动；
右边距：自动；
宽度：225px；
高度：75px；
字体系列：“永久标记”，草书；
颜色：#FFA500；
文本阴影：
-1px-1px 0#000，
1px-1px 0#000，
-1px 1px 0#000，
1×1×0#000；
文本对齐：居中；
}
.img{
}

屠龙者-重生！
多年前，你是一位英雄，在一次巨龙袭击中拯救了你的城镇。你杀了那条龙很开心，但可悲的是，从那以后再也没有龙攻击过你。就在所有希望都破灭的时候，你听到警报声响彻整个城市。你知道那意味着什么

下面是一个使用jQuery的示例。jQuery对于操作DOM元素很有用。而不是通过执行以下操作来选择对象：

document.getElementById('someid');

您可以像在CSS中一样选择元素：

$('#someid);

在我的冒险游戏示例中，我使用了一个JSON对象来包含我的故事及其路径。

故事

对象是路径id（例如“简介”、“选择武器”）到场景对象的映射。这有助于组织你的故事

我使用按钮而不是输入字段作为选项，因为让用户输入他们的选择会让人非常恼火

//包含故事和路径
var故事={
简介：{
提示：“现在是凌晨12点，你快饿死了。现在下订单已经太迟了。你知道这意味着什么。”，
选项：[{
名字：“战斗”，
路径：“选择武器”
}, {
名字：“饿死”，
路径：“饿死”
}]
},
选择你的武器：{
提示：“选择你的武器！”，
选项：[{
名字：'刀'，
路径：“模切”
}, {
名称：“烤面包机”，
路径：“吐司”
}]
},
敬酒：{
提示：“你烤了一些面包。接下来做什么？”，
选项：[{
名字：“吃吧！”，
路径：“吃”
}, {
名字：“涂上一些花生酱！”，
路径：“花生酱”
}]
},
花生酱：{
提示：“现在你的面包上有花生酱了。很好的选择。你下一步做什么？”，
选项：[{
名字：“吃吧！”，
路径：“吃”
}, {
名称：“扔掉它”，
路径：“饿死”
}]
},
吃：{
提示：“味道好极了！你不再饿了。”，
选项：[{
名称：“重新开始”，
路径：“简介”
}]
},
模切：{
提示：“你不小心割伤了自己，流血而死。”，
选项：[{
名称：“重新开始”，
路径：“简介”
}]
},
饿死：{
提示：“你饿死了！”，
选项：[{
名称：“重新开始”，
路径：“简介”
}]
}
}
/**
*所选选项是具有属性{name，path}的对象
*/
功能显示\u方案（选择的\u选项）{
var option_name=所选的_option.name；
var option_path=所选的_option.path；
风险值情景=故事[选项路径]；
//清除#prompt div和#options div
$（'#prompt'）.empty（）；
$（“#选项”）.empty（）；
//创建一个以显示用户选择的选项（如果选项_name不为null），并将其附加到#提示符中
如果（选项名称）{
$（“”）.html（'您已选择“+选项
var prompt = document.getElementByClassName("prompt");
var choice = prompt("What is your choice? CHOICE1, CHOICE2, or CHOICE3?").toUpperCase();
prompt.innerHTML = choice;

document.getElementById('someid');

$('#someid);