2016-11-15 16 views
0

私はhtml/css、js、jqueryを使用してアドベンチャーゲームを作成しています。ユーザーの入力と機能の接続方法を教えてください。

ユーザーが入力をクリックすると(ほとんどの場合、prompt()関数のように)ユーザーの入力(html入力ボックスから)をjsスイッチに接続する必要があります。 例えば、ゲームがユーザーにyes/noの質問をしたとき、私は彼が入力ボックスに答えを書き込ませて、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>

答えて

0

あなたはグローバルなVARを宣言し、あなたのクリックイベントとスイッチ機能間を接続するためにそれを使用することができます:ここでは

は私が持っているコードです。スイッチの後にそれをヌルに戻すことを忘れないでください。動作するはずです今すぐ参加

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

:このような何かを行うことができます:あなたのJSで

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

、その後:私はあなただったら

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

を、私はこのようにこれを行うだろうよくマウスをクリックする

0

私は、このBS提出のすべてではなく、HTMLフォームタグを使用して、 onsubmit="submitted()"と機能submittedを使用するevent.preventDefault()

第2に、約束を使って「会話」サイクルに何らかのロジックを適用する必要があります。

あなたのコードを意味

のようなものになります。

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

を私は普通の人のためのコードを記述し、その方向

としてこれを取ることはありません
関連する問題