Stop awaiting input after fixed time

Question

I'm new to web programming and I stumbled upon a problem that I couldn't solve and I'm not sure it can be solved. I'm creating a very simple "game" using jquery, and I want to make the thread to stop waiting for the (keydown) input and just carry on with the code, so I can perform either a simple upwards "jump", or a " left jump"/"right jump". Can it be done?
Here follows the codebit from what I've been doing so far:

http://www.codecademy.com/pt/pySlayer10761/codebits/OYQ11a/edit

Answer 1

You need a game loop thats running independantly from your keydown-handler. Elsewise any animation you might hack into the keydown handler might stop the moment no inputs are made anymore.

By looking at your code, I can see you tried to do it by creating a new setTimeout() on those keydowns. You are creating this for every keydown event fired. This is very likely to crash/freeze your browser at some point if the engine does not realize you are creation the same timeout over and over again.

Do it like this: in the onkeydown handler you only set a variable keydowncode to the keycode value. Then you create a new game loop like this

<script>
var keydownCode = 0;
var isInAnimation = false;
var animatedKeydownCode = 0;
var animationStartTime = 0;
var animationStartValue = 0;

// Lightweight keydown handler:
$(document).keydown(function(key) {
  keydownCode = parseInt(key.which,10);
}
$(document).keyup(function(key) {
  keydownCode = 0;
}

function animation() {

  // here comes your animation logic.. 
  // e.g. keep moving for 100 to 200 milliseconds after keypress

  // Milli secs difference from 
  var nowTime = Date.now();

  // Animations get prioritized: Only one animation at the same time!
  if(isInAnimation) {
    switch(animatedKeydownCode) {
      case 37:
        var delta = (nowTime-animationStartTime)/100*10;
        if(delta > 10) { delta = 10; isInAnimation = false; }; // Animation over!
        $('img').left(animationStartValue-delta);
      case 37:
        var delta = (nowTime-animationStartTime)/200*10;
        if(delta > 10) { delta = 10; isInAnimation = false; }; // Animation over!
        $('img').top(animationStartValue-delta);
      case 39:
        var delta = (nowTime-animationStartTime)/100*10;
        if(delta > 10) { delta = 10; isInAnimation = false; }; // Animation over!
        $('img').left(animationStartValue+delta);
    }


  // Ready to take new input, if its not outdated
  } else {

    // If some key is down and no animations active
    if(keydownCode > 0) {
      switch(keydownCode) {
        case 37:
          animationStartTime = nowTime;
          animatedKeydownCode = keydownCode;
          animationStartValue = $('img').left();
          isInAnimation = true;

        case 38:

          // Only start a jump if on bottom
          if($('img').css("top") == '390px') {
            animationStartTime = nowTime;
            animatedKeydownCode = keydownCode;
            animationStartValue = $('img').top();
            isInAnimation = true;
          }

        case 39:
          animationStartTime = nowTime;
          animatedKeydownCode = keydownCode;
          animationStartValue = $('img').left();
          isInAnimation = true;

      }
    }
  }
  window.requestAnimationFrame(animation);
}
window.requestAnimationFrame(animation);
</script>

This is no full game, you need to adjust it by yourself to get a working game. Eg you might want to add some gravity to get mario down again when there is no input..

Answer 2

I think you are looking for setTimeout() .

Like this:

setTimeout(function(){
   // do something here which will be executed after 5 seconds.
},5000);

You can't stop a thread in javascript as it is single threaded.