我正在尝试制作“选择冒险”游戏,我想知道是否有可能制作样式/自定义的“提示”窗口,以及是否不能将其打开为“提示”窗口,但是提示和用户在选定的HTML框中输入的内容?这就是我的意思。如果我的HTML有
<html>
<body>
<textarea class="prompt" disabled="1"></textarea><br>
<input class="input" type="text" value="inputText"></input>
<input type="submit" value="userInput"></input>
</body>
</html>
和CSS
.prompt {
width: 300px;
height: 500px;
background: black;
color: #FFA500;
}
和JavaScript(我可能会弄乱代码)
var prompt = document.getElementByClassName("prompt");
var choice = prompt("What is your choice? CHOICE1, CHOICE2, or CHOICE3?").toUpperCase();
prompt.innerHTML = choice;
我希望得到类似提示的内容,而不是显示对话窗口,而是将提示文本放入文本区域,然后用户将输入内容与输入内容结合在一起,然后通过“提交”按钮提交。我如何获得它,以便提示窗口将问题/文本输出到textarea
,然后用户通过input
文本字段输入答案,然后通过“input
提交”按钮提交,因此它的工作原理与正常情况相同。这有可能吗?如果不是,是否至少可以设置提示对话框本身的样式?到目前为止,这是我的代码。
function fight() {
var intro = prompt("You are a hero who saved your town from a dragon attack years ago. You had fun murdering that dragon, but sadly no dragon has attacked since. Just when all hope is lo, you hear the sirens ring through the city. You know what that means. Do you PREPARE, or IGNORE THE SIRENS?").toUpperCase();
switch(intro) {
case 'PREPARE':
if(intro === "PREPARE") {
prompt("You decided to " + intro + ". You need to choose what you will do. Keep in mind, the more activities you do, the less energy you have! You only have 3 days to prepare! What do you do? Do you SEARCH ARMOR STAND, SEARCH WEAPON STAND, GO TO MERCHANT, FIGHT DRAGON, TRAIN, or SLEEP?").toUpperCase();
}
}
}
@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);
html, body {
background: #000;
margin: 0;
padding: 0;
}
#wrap {
width: 760px;
margin-left: auto;
margin-right: auto;
}
.container {
position: relative;
top: 50px;
margin-left: auto;
margin-right: auto;
width: 570px;
height: 350px;
border: 6px ridge orange;
padding: 0;
}
.container img {
position: absolute;
bottom: 0px;
width: 570px;
height: 350px;
z-index: -1;
}
p.intro {
color: black;
text-shadow:
-1px -1px 0 #FFF,
1px -1px 0 #FFF,
-1px 1px 0 #FFF,
1px 1px 0 #FFF;
}
h2.header {
text-shadow:
-1px -1px 0 #FFA500,
1px -1px 0 #FFA500,
-1px 1px 0 #FFA500,
1px 1px 0 #FFA500;
}
.box {
float: left;
min-width: 567px;
min-height: 350px;
}
.box h2 {
font-family: 'Permanent Marker', cursive;
font-size: 200%;
text-align: center;
}
.box p {
font-family: 'Permanent Marker', arial;
text-align: center;
}
.box a {
position: absolute;
left: 165px;
display: inline-block;
border: 3px groove #000;
border-radius: 5px;
background: red;
margin-left: auto;
margin-right: auto;
width: 225px;
height: 75px;
font-family: 'Permanent Marker', cursive;
color: #FFA500;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-align: center;
}
.battles img {
}
<html>
<body>
<div id="wrap">
<div class="box">
<div class="container">
<h2 class="header">Dragon Slayer - REBORN!</h2>
<p class="intro">You are a hero who saved your town from a dragon attack years ago. You had fun murdering that dragon, but sadly no dragon has attacked since. Just when all hope is lost, you hear the sirens ring through the city. You know what that means.</p>
<a href="javascript:fight()"><br>BEGIN!</a>
<img class="scenario" src="http://www.thegaminghideout.com/school/stage1.png">
<div class="battles">
</div>
</div>
</div>
</div>
</body>
</html>
这是使用jQuery的示例。jQuery对于处理DOM元素很有用。而不是通过执行以下操作来选择对象:
document.getElementById('someid');
您可以像在CSS中那样选择元素:
$('#someid);
在我的冒险游戏示例中,我使用JSON对象包含我的故事及其路径。该story
对象是路径ID(例如“ intro”,“ choose_weapon”)到场景对象的映射。这有助于组织您的故事。
我使用按钮而不是输入字段作为选项,因为使用户输入他们的选择变得很烦人。
// Contains the story and paths
var story = {
intro: {
prompt: 'It is 12am and you are starving. It\'s too late to order delivery. You know what that means.',
options: [{
name: 'Fight',
path: 'choose_weapon'
}, {
name: 'Starve',
path: 'die_starve'
}]
},
choose_weapon: {
prompt: 'Choose your weapon!',
options: [{
name: 'Knife',
path: 'die_cut'
}, {
name: 'Toaster',
path: 'toast'
}]
},
toast: {
prompt: 'You toast some bread. What do you do next?',
options: [{
name: 'Eat it!',
path: 'eat'
}, {
name: 'Slather on some peanut butter!',
path: 'peanut_butter'
}]
},
peanut_butter: {
prompt: 'There is now peanut butter on your bread. Excellent choice. What do you do next?',
options: [{
name: 'Eat it!',
path: 'eat'
}, {
name: 'Throw it away',
path: 'die_starve'
}]
},
eat: {
prompt: 'It was delicious! You are no longer hungry.',
options: [{
name: 'Start Again',
path: 'intro'
}]
},
die_cut: {
prompt: 'You accidentally cut yourself and bleed to death.',
options: [{
name: 'Start Again',
path: 'intro'
}]
},
die_starve: {
prompt: 'You have died of hunger!',
options: [{
name: 'Start Again',
path: 'intro'
}]
}
}
/**
* Chosen option is an object with properties {name, path}
*/
function display_scenario(chosen_option) {
var option_name = chosen_option.name;
var option_path = chosen_option.path;
var scenario = story[option_path];
// Clear the #prompt div and the #options div
$('#prompt').empty();
$('#options').empty();
// Create a <p> to display what the user has chosen if option_name is not null and append it to the #prompt <div>
if (option_name) {
$('<p>').html('You have chosen <b>' + option_name + '</b>').appendTo('#prompt');
}
// Append the scenario's prompt
$('<p>').html(scenario.prompt).appendTo('#prompt');
// Append the options into the #options <div>
// We want to loop through all the options and create buttons for each one. A regular for-loop would not suffice because adding a button is not asynchronous. We will create an asynchronous loop by using recursion
function add_option_button(index) {
if (index === scenario.options.length) {
// Base case
return;
}
var option = scenario.options[index];
// Create a <button> for this option and append it to the #options <div>
$('<button>')
.html(option.name)
.click(function(e) {
// This is an onclick handler function. It decides what to do after the user has clicked on the button.
// First, prevent any default thing that the button is going to do, since we're specifying our own action for the button
e.preventDefault();
// We'll want to call display_scenario() with this option
display_scenario(option);
})
.appendTo('#options');
// Add the next option button
add_option_button(index + 1);
}
add_option_button(0);
}
// This function waits until the document is ready
$(document).ready(function() {
// Start the story
display_scenario({
name: null,
path: 'intro'
});
});
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
* {
margin: 0px;
padding: 0px;
color: #32363F;
font: 18px 'Open Sans', sans-serif;
border: none;
outline: none;
box-sizing: border-box;
}
html {
display: table;
width: 100%;
height: 100%;
}
body {
display: table-cell;
background: #32363F;
vertical-align: middle;
}
#wrapper {
margin: 40px;
background: #D6C2A3;
width: calc(100% - 80px);
}
h1 {
display: block;
padding: 20px 20px 12px;
font: 700 36px 'Open Sans', sans-serif;
background: #E84949;
color: #FAFAFA;
text-transform: uppercase;
}
#prompt {
padding: 20px;
}
#prompt p {
padding-bottom: 8px;
}
#prompt p b {
font-weight: 700;
}
#options {
display: flex;
padding: 0px 20px 28px;
text-align: center;
}
#options button {
margin: 0px 8px;
padding: 8px 20px;
background: #C2AE8F;
width: 100%;
cursor: pointer;
}
#options button:hover,
#options button:active {
background: #E84949;
color: #FAFAFA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<h1>Food Adventure</h1>
<div id="prompt"></div>
<div id="options"></div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句