Javascript Game: How to “pause” a while loop to wait for user input

Question

I am writing a text game in javascript, and one of the main “functions” is the input field, which accepts user input and sends the input with a button tag. In my main game loop, the onclick button is called:

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

The problem with this path is that the while loop does not "wait" for the "Submit" button, which must be pressed in order to get input from `game_u.getText (); and continues the cycle.

Is there a better way for me to do this, is this my first mistake in a text game? I do not want to use the prompt method, because it violates the immersion in the gameplay.

I am also from Java, an object-oriented programming language, so I use a while loop.

Any help is appreciated.

Answer 1

, prompt().

:

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

input.

. JSFiddle.net.

---

AFAIK, JS , SO:

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

, , , , .

Answer 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" />

Hide result

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

Answer 3

. , . , HTML5 Canvas - . , , .