Javascript游戏:如何"暂停"一个等待用户输入的while循环

时间:2015-11-13 20:32:29

标签: javascript html loops

我在javascript中编写基于文本的游戏,以及其中一个主要功能"是一个输入框,它接受用户输入,并通过按钮标记提交输入。在我的主游戏循环中,调用按钮的onclick:

var game_u = new game_util();

                function Game_Main(){
                    while(active){
                        input = game_u.getText();
                        //p = new player();
                        active = false;
                    }
                }

                function game_util(){
                    this.getText = function(){
                        //The Submit button 
                        confirm_plr.onclick = function(){
                            //Input value
                            return player_in.value;
                        }
                    }
                } 

这种方式的问题是,while循环没有"等待"单击提交按钮以获取来自`game_u.getText()的输入;功能并继续循环。

我有更好的方法来做这件事,这是我在基于文字的游戏中的第一次蠢事吗?我不想使用提示方法,因为它打破了游戏玩法的沉浸感。

我也来自Java,一种面向对象的编程语言,这就是我使用while循环的原因。

感谢任何帮助。

3 个答案:

答案 0 :(得分:4)

如果您想暂停用户输入,则会有一个简单的prompt()框。

试试这个:

var input = prompt("Enter data here", "");

这将等待输入并将其存储到变量input

请参阅JSFiddle.net上的working example

根据{{​​3}}:

AFAIK,同步JS是不可能的

  

JavaScript是异步的,你不能“暂停”执行。此外,当javascript运行时,整个用户界面冻结,因此用户无法单击该按钮。

关于你的问题,

  

如果我不应该使用while循环,那会取代它吗?

因为JS是事件驱动的,并且每次单击该按钮(并输入输入)时您都尝试运行代码,只需使用onclick处理程序。

所以,而不是这个:

while(active) {
    input = game_u.getText();
    p = new player();
    active = false;
}

你可以这样做:

document.getElementById("button").addEventListener("click", function() {
    input = game_u.getText();
    p = new player();
    active = false;
});

每次单击按钮时都会运行代码,这与您尝试执行的操作基本相同。

答案 1 :(得分:2)

一种方法是将游戏的不同阶段分解为与根据用户输入调用的不同阶段(房间,关卡等)相对应的功能;你还需要一个保存游戏当前状态的变量(下面的例子中为room)。

(function Game() {
    var room = 1;
    document.getElementById('playerSubmit').addEventListener('click', function() {
        var playerInput = document.getElementById('playerInput').value;
        if (playerInput == "Go to room 2") {
            room = 2;
        }
        if (playerInput == "Go to room 1") {
            room = 1;
        }
        if (room == 1) {
            room1(playerInput);
        } else if (room == 2) {
            room2(playerInput);
        }
        document.getElementById('playerInput').value = '';
    });
    function room1(playerInput) {
        output('You are in the first room and entered the command ' + playerInput);
    }
    function room2(playerInput) {
        output("Now you're in room 2. Your command was " + playerInput);
    }
    function output(text) {
        document.getElementById('output').innerHTML += '<p>' + text + '</p>';
    }       
})();
#output {
    border: solid 1px blue;
    width: 500px;
    height: 400px;
    overflow: scroll;
}
label {
    display: block; margin-top: 1em;
}
<div id="output"></div>
<label for="playerInput">Player input</label>
<input id="playerInput" type="text" size=50 />
<input id="playerSubmit" type="button" value="Submit" />

http://jsfiddle.net/spjs8spp/2/

答案 2 :(得分:1)

你在评论中得到了一些很好的信息。一个事件模型可能是理想的,但你可以做持久循环。我不熟悉它,但HTML5 Canvas就是这样。也许看看那些,因为还没有人提到它。