我如何連接用戶的輸入和功能？

我使用html/css，js和jquery創建冒險遊戲。我如何連接用戶的輸入和功能？

我需要以某種方式將用戶的輸入（從html輸入框）連接到js開關或if語句當用戶點擊輸入（幾乎就像一個提示（）函數）。例如，當遊戲詢問用戶是\否問題時，我想讓他在輸入框中輸入答案，並在按下回車按鈕後提交此答案，以便遊戲可以繼續，具體取決於他所做的選擇。

這裏是我的代碼有：

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

來源

2016-11-15 MacroG0D

你可以聲明全局變量，並用它來點擊事件和開關功能之間的連接。切換後不要忘記將其設置爲空。這樣的事情可以做：

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

來源

2016-11-15 13:38:09 RizkiDPrast

如果我是你，我會做這樣的：

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

現在進入將正常運行以及鼠標點擊

來源

2016-11-15 13:38:25

我會首先建議你，而不是所有的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); 
}

我一般不寫人的代碼，所以以此爲方向

來源

2016-11-15 13:39:55 Amit

我如何連接用戶的輸入和功能？

回答

相關問題