CODEWITHSUNDEEP
javascriptjqueryconsole
Phil C.
Phil C.

Reputation: 114

Slow down, console. (javascript/jquery)

I'm working on a console game and I don't like the speed at which the console.logs and how little time there is in between prompts and such. Is there a javascript/jquery method to slow down the game? To that effect, can I simply delay() every line (which sounds tedious), or if I were to use setTimeout(), would I theoretically have to split my game into a lot of different functions and set timeouts or intervals? What are your suggestions?

snippet for example:

alert('~~ WELCOME TO [x] ~~');
console.log('Before we get started, let\'s find out a little about you.');
var usr = {
    name : prompt('What\'s your name?'),
    age : prompt('How old are you?'),
    clr : prompt('What\'s your favorite color?'),
    pref : prompt('Which [x] is your favorite?'),
}


console.log('The air smells pungent today, and the weather is perfect.');
console.log(''); console.log('');
console.log('Did you hear that? I think something may be following us down the path to the [x]...');
console.log('');


var alpha = prompt('');

There will be if/elses, switches, all sorts of functions and choices. But I want the feel of a text-based console game.

I plan on adding a lot of different routes, features, and hopefully movement at some point. But that's all beside the point. If anyone knows a way or two to slow down a game that would follow this guideline, post any suggestion.

Upvotes: 0

Views: 302

Answers (2)

Shaun
Shaun

Reputation: 927

Create your own console, alert and prompt methods wrapping the natives.

For instance:

function logConsole(text, delay) {
  window.setTimeout(function() { 
     console.log(text);
  }, delay || 0);
};

You can change the 0 value in above to be a default delay if no delay argument is passed in.

logConsole('The air smells pungent today, and the weather is perfect.', 1000);

Just an idea

Upvotes: 1

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34244

Most users consider prompts to be annoying and ugly. A user won't be able to interact with anything else including other tabs or console during the execution of prompts. Moreover, it is very inconvenient to work with it as a developer, because they are not configurable and they are hard in development, support and, especially, debugging.

It is a better idea to implement an HTML page which will interace with a user. So, you will be able to customize it and look nice.

For example, you can create a page which looks like chat - text window and input at the bottom. Like this:

function tell(text) 
{
  $("<p/>").text(text).appendTo($('#chat'));
}

function ask(text, callback)
{
  $("<p/>").text(text).addClass('question').appendTo($('#chat'));
  
  $('#send')
    .prop('disabled', false)
    .one('click', function() {
      var text = $("#message").val();
      callback(text);
      $("#message").val("");
      $(this).prop('disabled', true);
    });
}

tell("Hi");

ask("What is your name?", function(x) {
  tell("So strange...my name is " + x + ", as well...");  
});
#chat {
  padding: 20px;
  position: absolute;
  top: 0px;
  bottom: 20px;
  left: 0px;
  right: 0px;
  background-color: #DDDDDD;
}

#message {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 14px;
  width: 80%;
}

#send {
  position: absolute;
  bottom: 0px;
  left: 80%;
  width: 20%;
  height: 20px;
}

.question {
  font-weight: bold;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="chat"></div>
<input type="text" id="message"/>
<input type="submit" id="send" disabled/>

It is just an example. You may add any things like delays or CSS styling.

Upvotes: 2

Related Questions