Javascript Game: Как «приостановить» цикл while, чтобы ждать ввода пользователем

Question

Я пишу текстовую игру в 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; 
         } 
        } 
       } 

Проблема с этим способом, хотя в том, что цикл, пока не «ждать» кнопки отправки нужно нажать, чтобы получить входные данные от `game_u .getText(); и продолжает цикл.

Есть ли лучший способ для этого сделать это, это моя первая ошибка в текстовой игре? Я не хочу использовать метод prompt, потому что он нарушает погружение в игровой процесс.

Я тоже из Java, объектно-ориентированного языка программирования, поэтому я использую цикл while.

Любая помощь приветствуется.

Answer 1

Если вы хотите приостановить ввод данных с помощью пользователя, просто установите prompt().

Попробуйте это:

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

Это будет ждать ввода и сохранить его в переменной input.

См. working example на JSFiddle.net.

---

AFAIK, синхронное JS не представляется возможным, так как согласно this SO post:

JavaScript асинхронный, вы не можете "Паузы" исполнение. Более того, во время работы javascript весь пользовательский интерфейс зависает, поэтому пользователь не может нажать кнопку.

Что касается вашего вопроса,

Если я не следует использовать в то время цикла, что бы заменить его?

потому что 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

В комментарии вы получили отличную информацию. Выпущенная модель может быть идеальной, но вы можете выполнять постоянные циклы. Я не так хорошо знаком с этим, но HTML5 Canvas - это просто. Возможно, посмотрите на это, так как никто еще не упомянул об этом.

Answer 3

Один из подходов состоит в том, чтобы разбить различные этапы игры на функции, соответствующие различным этапам (номера, уровни и т. Д.), Которые вызывают в зависимости от ввода пользователя; вам также понадобится переменная, которая сохраняет текущее состояние игры (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/