Wie verbinde ich zwischen Benutzereingabe und Funktion?

Ich erstelle ein Abenteuerspiel mit html/css, js und jquery.Wie verbinde ich zwischen Benutzereingabe und Funktion?

Ich muss irgendwie Benutzereingabe (von HTML-Eingabefeld) zu js Schalter oder wenn sonst Anweisung, wenn Benutzer klickt auf Eingabe (fast wie eine prompt() -Funktion). Zum Beispiel, wenn das Spiel fragt ein Ja \ keine Frage, ich möchte ihn die Antwort in das Eingabefeld schreiben lassen, und diese Antwort nach dem Drücken der Eingabetaste senden, so dass das Spiel abhängig von den Entscheidungen, die er macht. Hier

ist der Code, den ich habe:

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

Quelle

2016-11-15 MacroG0D

Sie können globale var deklarieren und verwenden Sie es zwischen Ihrem Click-Ereignis und Switch-Funktion zu verbinden. und vergessen Sie nicht, nach dem Wechsel auf null zurückzusetzen. so etwas wie dies tun können:

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

Quelle

2016-11-15 13:38:09 RizkiDPrast

Wenn ich Sie wäre ich dies wie folgt tun würde:

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

und dann in Ihrem JS:

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

Jetzt sollte funktionieren Geben Sie als sowie Mausklick

Quelle

2016-11-15 13:38:25

Ich würde Ihnen zuerst empfehlen, dass anstelle von all diesen BS Einreichung, würden Sie ein HTML-Formular-Tag verwenden, mit onsubmit="submitted()" und Funktion submitted zu verwenden event.preventDefault()

Zweitens sollten Sie einige Logik auf die "Konversation" Zyklus, mit Versprechen.

Code Bedeutung wird in etwa so aussehen:

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

ich normalerweise nicht den Code für Menschen schreiben, so nimmt dies als eine Richtung

Quelle

2016-11-15 13:39:55 Amit

Wie verbinde ich zwischen Benutzereingabe und Funktion?

Antwort

Verwandte Themen