如何在用户输入和功能之间建立联系？
[英]How do i connect between user's input and function?
问题描述
I'm creating an adventure game using html/css, js and jquery. 
我正在使用html / css，js和jquery创建一个冒险游戏。
I need somehow to connect user's input(from html input box) to js switch or if else statement when user clicks on enter(almost like a prompt() function). 我需要以某种方式将用户的输入（从html输入框）连接到js开关，或者在用户单击enter时是否else语句（几乎像hint（）函数）。 For example, when the game asks user a yes\\no question i want to let him write the answer in the input box, and submit this answer after pressing enter button so the game could continue depending the choices that he makes. 例如，当游戏问用户“是/否”问题时，我想让他在输入框中写下答案，然后在按Enter键之后提交此答案，以便游戏可以继续进行，取决于他做出的选择。
Here is the code i have: 这是我的代码：
// This is a button click function. When user clicks the Enter button with the left mouse, all the text from the input appends to the "story board". $("#btn").click(function(){ var btnClick = $("input[name=myInput]").val(); $("#storyBoard").append(btnClick+"<br>"); $("input[name=myInput]").val(""); var element = document.getElementById("storyBoard"); element.scrollTop = element.scrollHeight; }); // It is an additional function for button click function, that allows user to press enter button on a keyboard to call the click button function. $("#userInput").keyup(function(event){ if(event.keyCode == 13){ $("#btn").click(); } }); /* Here i stucked. I writed a sketch switch(), but how do i connect between this and the user input? */ var mission1 = function(){ showText("Welcome to the virtual pseudo-reality.<br> Are you ready to start your journey?"); var readyToStart = function(){ switch(){ case "yes": console.log("yes"); break; case "no": console.log("no"); break; default: console.log("yes or no?"); readyToStart(); } }
body { border: .1em solid #232C01; margin-top: 5em; margin-left: 10em; margin-right: 10em; background-color: #070900; background-image: url(images/Star-Wars-7-Poster-Banner.jpg); background-repeat: no-repeat; background-position: center; background-size: 100%; } #storyBoard{ border: .1em solid #f0ff00 ; background-color: #000000 ; margin-top: 2em; margin-right: 5em; margin-left: 5em; height: 20em; padding-left: 20px; padding-right: 50px; font-size: 50px; color: #f3fd4e; opacity: .95; overflow:auto; } #userInput{ border: .05em solid #adae32; margin-bottom: 2em; margin-left: 5em; font-size: 50px; width: 71%; color: #0033bd; } #btn{ font-size: 50px; background-color: #0E1200; color: #feff6c; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>MacroG0D - My first game</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src ="Js/basicFight1vs1Function.js"> </script> </head> <body> <div id = "storyBoard"> </div> <input type="text" id ="userInput" placeholder="Type the command here" name="myInput"/> <button id = "btn"> Enter </button> </body> </html>
3 个解决方案
解决方案1
0 2016-11-15 13:38:09
You can declare global var and use it to connect between your click event and switch function. 您可以声明全局变量，并使用它在click事件和switch函数之间进行连接。 and don't forget to set it back to null after switch. 并且不要忘记在切换后将其设置回null。 something like this can do: 这样的事情可以做：
// This is a button click function. When user clicks the Enter button with the left mouse, all the text from the input appends to the "story board".
var in;
$("#btn").click(function(){
// set `in` variable from user input
var btnClick = in = $("input[name=myInput]").val();
$("#storyBoard").append(btnClick+"<br>");
$("input[name=myInput]").val("");
var element = document.getElementById("storyBoard");
element.scrollTop = element.scrollHeight;
});
// It is an additional function for button click function, that allows user to press enter button on a keyboard to call the click button function.
$("#userInput").keyup(function(event){
if(event.keyCode == 13){
$("#btn").click();
}
});
/* Here i stucked. I writed a sketch switch(), but how do i connect between this and the user input? */
var mission1 = function(){
showText("Welcome to the virtual pseudo-reality.<br> Are you ready to start your journey?");
var readyToStart = function(){
//switch `in` variable
switch(in){
case "yes": console.log("yes");
break;
case "no": console.log("no");
break;
default: console.log("yes or no?");
readyToStart();
}
//set `in` to original
in = "";
}
解决方案2
0 2016-11-15 13:38:25
If I were you I'd do this like this: 如果我是你，我会这样做：
<form>
<input type="text" id ="userInput" placeholder="Type the command here" name="myInput"/>
<button type="submit" id = "btn"> Enter </button>
</form>
and then in your JS: 然后在您的JS中：
$("#btn").submit(function(e){
e.prevetDefault();
//your code...
var choice = $("#userInput").val();
switch(choice){...}
//rest of your code...
Now Enter should work as well as mouse click 现在，Enter和鼠标单击一样有效
解决方案3
0 2016-11-15 13:39:55
I would first recommend you that instead of all this BS submittion, you would use an HTML form tag, with onsubmit="submitted()" and function submitted to use event.preventDefault() 我首先建议您，而不是所有这些BS提交，您应该使用HTML表单标签，并带有onsubmit="submitted()"和函数submitted以使用event.preventDefault()
Second, you should apply some logic to the "conversation" cycle, using promises. 其次，您应该使用承诺对“对话”周期应用一些逻辑。
Meaning your code will look something like: 这意味着您的代码将类似于：
let currentState = {
options: null,
promise: null
};
function newMessage(text, options = null) {
currentState.options = options;
currentState.promise = new Promise();
return currentState.promise;
}
newMessage("Ready to start?", ["yes", "no"]).then((message) => {
switch(message) {
case "yes":
newMessage("Great! your name please?").then((name) => {
alert("your name is " + name);
});
break;
case "no":
newMessage("So what are you doing here!?!?").then((password) => {
if(password == "BLAH") {
alert("you have found an easter egg");
}
});
break;
}
});
function submitted(event) {
event.preventDefault();
let value = document.getElementById('my-input').value;
if(currentState.options !== null) {
if(!currentState.options.indexOf(value)) {
alert("Options are: "+JSON.stringify(currentState.options));
return;
}
}
currentState.promise.resolve(value);
}
I do not normally write the code for people, so take this as a direction 我通常不会为他人编写代码，因此请以此为指导
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.