2016-08-14 6 views
0

Ich versuche, ein textbasiertes Spiel zu erstellen, das die im Browser eingegebenen Informationen aufnimmt und in eine Aktion übersetzt und ausführt. Ich bin in der Lage, es für die erste Antwort zu arbeiten, aber nachdem es das Ergebnis der ersten Antwort anzeigt, scheint es das zweite nicht zu laden. Auch wenn Sie etwas eingereicht haben, werden alle Fälle angezeigt und ohne Eingabe an den Bildschirm angehängt. Haben Sie eine Idee, wie Sie dieses Problem beheben oder sicherstellen können, dass sich der Fall wiederholt? First step Second After hitting submit HTML:Fall funktioniert nicht am zweiten Eingang?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Lord of the Deahsticks</title> 
    <link href="css/text-game.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div class="info"> 
    <h1 class="title">Lord of the Deathsticks</h1> 
</div> 

<div class="gameboard"> 
    <div class="event"> 
     <p>Hello this is the game!</p> 
    </div> 
    <div class="event"> 
     <p>You are awoken by a sound...You need to get up already, you're going to be late for you shift at the slave factory!</p> 
    </div> 

</div> 
<form> 
    <input type="text" id="action" name="what to do"> 
    <input type="submit" name="button"> 
</form> 
<script src="js/controllers/controller.js"></script> 
<script src="js/model/characters.js"></script> 
<script src="js/JQuery/jquery-3.1.0.js"></script> 
<script src="js/JQuery/text-game-JQuery.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
</body> 
</html> 

Haupt js/jquery

var template = function(action){ 
    return '<div class="event"><p>'+ action +'</p></div>' 
}; 
var display = function(input){ 
    if(input !== "") { 
     var html = template(input); 
     $(html).appendTo('.gameboard'); 
    } else { 
     alert("You need to imput an appropriate answer"); 
    } 
    $('#action').val(""); 
    $('#mydiv').scrollTop(($('#mydiv').height()*2)); 
}; 

var main = function(){ 
    $('form').submit(function(){ 
     event.preventDefault(); 
     var action = $('#action').val(); 
     var input = action.toLowerCase(); 
     display(action); 
     interact(input); 
     return false; 
    }); 

}; 


$(document).ready(main); 

Controller:

var where = "intro"; 
var wait = function(){ 

}; 
var interact = function(input) { 
    switch(where) { 
     case "intro": 
      if (input === "stay in bed") { 
       display("you sleep for 2 more hours"); 
       where = "police"; 
      } else if (input === "wake up") { 
       display("You wake up and head to the slave factory"); 
       where = "on route"; 
      } else { 
       display("You need to submit a valid response"); 
      } 
     break; 

     case "police": 
      display("You are awaken by three slave police standing at your bed!"); 
      wait(); 
      display("Our records show this is you third offence citizen #000986642, you will now be sent for disciplinary reconditioning. Prepare to be detained.") 
      wait(); 
      display("what will you do? -Go with them? -Fight them? -Try to Escape"); 

      if (input === "go with them") { 
       display("You are escorted to the deathcamp"); 
       where = "deathcamp1"; 
      } else if (input === "fight them") { 
       display("You jump out of bed and prepare for a fistfight"); 
       where = "fistfight"; 
      } else if (input === "try to escape") { 
       display("you attempt to jump through your window"); 
       where = "window1"; 
      } else { 
       display("You need to submit a valid response"); 
      } 
      break; 
    } 
}; 
+0

Also, wenn ich diese richtig haben, können Sie die erste Antwort einreichen und es funktioniert, aber es gibt Ihnen alle Display (Geschichte) Linien sofort? Aber du willst, dass es nur ein (oder ein Paar) abhängig von der Geschichte gibt, dann kannst du später mehr eingeben, richtig? –

+0

Für die erste Eingabe wird nur das korrekte Ergebnis (Anzeige) angezeigt und nicht fortgesetzt und die nächste Frage angezeigt. Sobald ich das Formular erneut, leer oder mit etwas abschicke, zeigt es den verbleibenden Fall mit dem Ergebnis der ersten möglichen Bedingung an (gesendet an deathcamp) – l34lo1

+0

Sie haben nur ein bisschen Logikfehler. Dein Code funktioniert so wie er ist! Ich habe eine Antwort hinzugefügt. Viel Glück mit dem Rest! –

Antwort

1

Sie haben die richtige Idee und Ihr Code funktioniert. Es ist nur möglich, dass Sie einen Teil Ihrer Logik überdenken müssen und eventuell weitere Fehlerbehandlung hinzufügen (falls erforderlich).

Ich habe Ihren Code aktualisiert:

var interact = function(input) { 
    switch(where) { 
     case "intro": 
      if (input === "stay in bed") { 
       setTimeout(function() { display("you sleep for 2 more hours"); }, 1000); 
       setTimeout(function() { display("You are awaken by three slave police standing at your bed!"); }, 3000); 
       setTimeout(function() { display("Our records show this is you third offence citizen #000986642, you will now be sent for disciplinary reconditioning. Prepare to be detained."); }, 5000); 
       setTimeout(function() { display("what will you do? -Go with them? -Fight them? -Try to Escape"); }, 7000); 
       where = "police"; 
      } else if (input === "wake up") { 
       display("You wake up and head to the slave factory"); 
       where = "on route"; 
      } else { 
       display("You need to submit a valid response" + where); 
      } 
      break; 

     case "police": 
      if (input === "go with them") { 
       display("You are escorted to the deathcamp"); 
       where = "deathcamp1"; 
      } else if (input === "fight them") { 
       display("You jump out of bed and prepare for a fistfight"); 
       where = "fistfight"; 
      } else if (input === "try to escape") { 
       display("you attempt to jump through your window"); 
       where = "window1"; 
      } else { 
       display("You need to submit a valid response"); 
      } 
      break; 
    } 
}; 

Sie möchten die Ausgabe haben, in dem stay in bed Befehl, auf diese Weise nur einmal passieren wird. Dann verwenden Sie den nächsten Fall, um bei Bedarf die nächste Ausgabe oder Fehlermeldung anzuzeigen. Viel Glück für deine Geschichte!

Auch Sie finden .setTimeout(function, milliseconds) nützlich für Ihre Wartelogik. Ich habe es in der Antwort enthalten als auch,)

Working sample.

+0

Ich denke, ich könnte endlich die Hand davon bekommen! Danke nochmal für deine Hilfe! – l34lo1