Question

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

我需要以某种方式将用户输入（从html输入框）连接到js开关或if else语句，当用户点击enter（几乎像一个prompt（）函数）。例如，当游戏向用户询问是，我没有问题我想让他在输入框中写下答案，并在按下输入按钮后提交此答案，以便游戏可以继续取决于他做出的选择。

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以声明全局变量并使用它来连接您的点击事件和切换功能。并且不要忘记在切换后将其设置为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 = "";
        }

Answer 2

如果我是你，我就这样做：

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

现在输入应该可以正常工作

Answer 3

我首先建议您使用HTML表单标记代替所有此次BS提交，onsubmit="submitted()"和函数submitted使用event.preventDefault()

其次，你应该使用promises将一些逻辑应用于“对话”周期。

意味着您的代码看起来像：

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

我通常不会为人们编写代码，因此请将此作为方向

如何连接用户的输入和功能？

3 个答案: