Question

我正在尝试创建一个基于文本的游戏，该游戏接收在浏览器中输入的信息并将其转换为动作并运行它。我能够让它为第一个答案工作，但在显示第一个答案的结果后，它似乎没有加载第二个答案。此外，一旦您提交任何内容，所有案例都会显示并附加到屏幕上而不进行任何输入。知道如何解决这个问题或确保案例不断重复？ 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);

控制器：

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

Answer 1

你有正确的想法，你的代码也有效。只是您可能需要重新考虑一些逻辑，并可能添加更多错误处理（如果需要）。

我已更新您的代码：

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)对您的等待逻辑很有用。我也把它包括在答案中;）

Working sample.

案例不在第二次输入？

1 个答案: