Javascript 游戏：如何“暂停”while 循环以等待用户输入答案

【问题标题】：Javascript Game: How to "suspend" a while loop to wait for a user inputJavascript 游戏：如何“暂停”while 循环以等待用户输入
【发布时间】：2016-02-15 12:55:36
【问题描述】：

我正在用 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 循环的原因。

感谢任何帮助。

【问题讨论】：

prompt 框，如alert 将暂停执行
Sleep in Javascript - delay between actions的可能重复
在点击按钮时将 game_u.getText() 移动到一个全局变量中，然后在游戏循环中“使用”它，在游戏的一次迭代中完成读取后将其设置回空白环形。这是一种可能性。注意：持久的 javascript 循环有点不寻常。
你可能想看看使用回调
您首先不应该在这里使用 while 循环，而应该接受 JavaScript 是一种事件驱动语言这一事实。

标签： javascript html loops

【解决方案1】：

如果你想暂停用户输入，一个简单的prompt() 框就可以了。

试试这个：

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

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

请参阅 JSFiddle.net 上的 working example。

AFAIK，同步 JS 是不可能的，根据this SO post：

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

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

【讨论】：

我试图避免提示方法，因为它破坏了我的游戏沉浸感。一个白色的弹出框不是我想要做的，无论如何谢谢。

【解决方案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/

【讨论】：

玩这个临时游戏我玩得很开心 =) +1

【解决方案3】：

您在评论中获得了一些很棒的信息。事件模型可能是理想的，但您可以执行持久循环。我不太熟悉它，但 HTML5 Canvas 就是这样。也许可以研究一下，因为还没有人提到它。

【讨论】：