我正在尝试创建一个基于文本的游戏，该游戏获取浏览器中输入的信息并将其转换为 Action 并运行它。我能够让它为第一个答案工作，但在显示第一个答案的结果后，它似乎没有加载第二个答案。此外，一旦您提交任何内容，所有案例都会显示并附加到屏幕上，无需任何输入。知道如何解决这个问题或确保案件不断重复吗？
HTML:
<!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>
主要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;
}
};
最佳答案
您的想法是正确的，并且您的代码可以工作。只是您可能需要重新考虑一些逻辑，并且可能添加一些更多的错误处理(如果需要)。
我已经更新了您的代码:
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;
}
};
您希望在stay in bed命令中获得输出，这样它只会发生一次。然后，如果需要，您可以使用下一个案例来呈现下一个输出或错误消息。祝你的故事好运!
此外，您还会发现 .setTimeout(function, milliseconds) 对于您的等待逻辑很有用。我也将其包含在答案中;)
关于javascript - 案例不适用于第二个输入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38938161/