繁体   English   中英

如何在用户输入和功能之间建立联系?

[英]How do i connect between user's input and function?

我正在使用html / css,js和jquery创建一个冒险游戏。

我需要以某种方式将用户的输入(从html输入框)连接到js开关,或者在用户单击enter时是否else语句(几乎像hint()函数)。 例如,当游戏问用户“是/否”问题时,我想让他在输入框中写下答案,然后在按Enter键之后提交此答案,以便游戏可以继续进行,取决于他做出的选择。

这是我的代码:

 // 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> 

您可以声明全局变量,并使用它在click事件和switch函数之间进行连接。 并且不要忘记在切换后将其设置回null。 这样的事情可以做:

// 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 = "";
        }

如果我是你,我会这样做:

<form>
  <input type="text" id ="userInput" placeholder="Type the command here" name="myInput"/>
  <button type="submit" id = "btn"> Enter </button>
</form>

然后在您的JS中:

$("#btn").submit(function(e){
   e.prevetDefault();
   //your code...
   var choice = $("#userInput").val();
   switch(choice){...}
  //rest of your code...

现在,Enter和鼠标单击一样有效

我首先建议您,而不是所有这些BS提交,您应该使用HTML表单标签,并带有onsubmit="submitted()"和函数submitted以使用event.preventDefault()

其次,您应该使用承诺对“对话”周期应用一些逻辑。

这意味着您的代码将类似于:

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);
}

我通常不会为他人编写代码,因此请以此为指导

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM