Javascript Game: How to "suspend" a while loop to wait for a user input

Question

I'm writing a text-based game in javascript, and one of the main "features" is a input box which accepts a user input, and submits the input by a button tag. In my main game loop a call the button's 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;
                        }
                    }
                } 

The problem with this way, though is that the while loop does not "wait" for the submit button to be clicked to get the input from the `game_u.getText(); function and continues on with the loop.

Is there a better way for me to do this, it is my first wack at a text-based game? I don't want to use the prompt method, because it breaks the immersion of the gameplay.

I'm also coming from Java, an object-oriented programming language, so that's why I use a while loop.

Any help is appreciated.

Answer 1

If you want to suspend with user input, a simple prompt() box will do.

Try this:

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

This will wait for input and store it into variable input.

See working example on JSFiddle.net.

---

AFAIK, synchronous JS is not possible, as according to this SO post:

JavaScript is asynchronous, you cannot "pauses" execution. Moreover, while javascript is running the entire user interface freezes, so the user cannot click the button.

As to your question,

If I shouldn't be using a while loop, what would replace it?

because JS is event driven, and you're trying to run code every time that button is clicked (and input is entered), just use a onclick handler.

So, rather than this:

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

You can do:

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

This will run the code every time the button is clicked, essentially the same as what you're trying to do.

Answer 2

One approach is to break the different stages of your game into functions corresponding to the different stages (rooms, levels etc.) which are called depending on the user's input; you will also need a variable that saves the game's current state (room in the example below).

(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/