Forums » Help » Waiting for a keypress? A while loop?

Hello, I've started to use Impact and have had a lot of fun so far. I'm am the point where I am starting to put multiple levels together and am having trouble getting my game to wait for a keypress when showing something like a screen in-between levels with level stats/story, etc. Much like how Biolab Disaster shows you a screen between levels and waits for you to press 'X' or 'C'.

I'm not a pro at Javascript yet but it seems like when I try to use a while loop to wait for a keypress it hangs the game up. I've been trying to do it from within the entity i use to determine when the level has completed and before it loads the next level and maybe that's not the right approach in the scope of things.

Let me first explain why this happens: when you use a while loop that waits for something, it completely blocks the thread running JavaScript. In JavaScript, you have to do your computations in "short bursts" and then hand over the control to the browser again.

The game loop maintained by Impact for instance isn't actually a loop. Instead, the ig.system.run() function updates and draws the game and then completely returns. However, Impact tells the browser to call this run() function every 16 milliseconds. E.g.:

setTimeout( ig.system.run, 16 );

When this run() method never returns (which is the case when you use a "busy while loop" to wait for a keypress) the whole page isn't updated anymore and you'll get a warning from your browser after a few seconds to kill the JavaScript.


Now, how do you wait for a keypress? Well, you have to make sure that the run() method still can be called 60 times per second, so don't wait for the keypress in a loop. Instead, just check for the keypress once for every frame:

update: function() {
	if( this.intermission ) {
		// If the intermission screen is active, check for a 
		// keypress to disable it again
		if( ig.input.pressed('jump') ) {
			this.intermission = false;
		}
	}
	else {
		// No intermission? Just update as normal.
		this.parent();
	}
},

draw: function() {
	if( this.intermission ) {
		// Draw your intermission screen here
	}
	else {
		this.parent(); // Draw the game
	}
}

Thanks for the help, Dominic. I was coming back to the thread to say I resolved it exactly in the fashion you described. Took me a little while but I figured to use the update function to just look for my states!