10秒后停止执行javascript / jquery

Question

i'm working on a simple game in javascript, just to learn jquery and animations, the game is very simple, just a couple of bouncing balls to hit.

$(document).ready(function() { 
        $('#stage').bind('click',function(e){ 
        $("#bomb").show(); 
        var x = e.clientX - this.offsetLeft -35 ;
        var y = e.clientY - this.offsetTop -35 ;
        $("#bomb").animate({left:x,top:y}, 200, function(){
        $("#bomb").hide(); 
        $("#bomb").css({ top: "365px",left:"240px"});
        $("#bomb").show(); 
                         });    
        }); 
                $("#box1").click(function() {hit("#box1");})
                $("#box2").click(function() {hit("#box2");})
                $("#box3").click(function() {hit("#box3");})


        });

i would like to stop the execution after 10 seconds, but I didn't figura out how to make this happen, i have make a simple setTimeout, ut when i click (and fire the binded method) the counter stops itself... any advice? the code of the counter is:

var counter=setInterval(timer, 10000);
         function timer()
        { count=count-1;
        if (count < timeout)
    {   clearInterval(counter);
        imageUrl="img/BGgameover.gif"; 
        $('#stage').css('background-image', 'url(' + imageUrl + ')'); 
        $('#bomb').remove();  
        $('#stage').removeClass('running');
        return;
                        }
        document.getElementById("timer").innerHTML=count;
            }

Answer 1

Your counter stops because you only run the code to update it once every 10 seconds.

You are using setInterval with a 10000 millisecond delay, so the timer function is called every 10 seconds, I think you should use a 1 second interval instead.

The following code will run every second, so the "timer" div will be updated with the number of seconds left, then when count becomes less then timeout , the game over code will run.

var counter = setInterval(timer, 1000);

// Make sure "count" and "timeout" are sane values. What are they defined to initially?

function timer() { 
  count = count - 1;

  if (count < timeout) {   
    clearInterval(counter);
    imageUrl = "img/BGgameover.gif"; 

    $('#stage').css('background-image', 'url(' + imageUrl + ')'); 
    $('#bomb').remove();
    $('#stage').removeClass('running');
    return;
  }

  document.getElementById("timer").innerHTML = count;
}

On a side note, using setInterval can be a bit dodgy, you might want to look into using requestAnimationFrame instead: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Answer 2

How did you use the setTimeout function in the first place?

Let's hope I understood what you're trying to achieve on the lowest level here.

If you use setInterval to manage game loops, you can set a setTimeout that has a 10 second timeout value to unset the setInterval game loop with clearInterval . Eg:

// Interval to do game functions at set timeframes.
var game_loop = window.setInterval(
    function_here,
    1000 // = 1 second, can be as long as short you need.
);

// Timeout to clear the above game interval loop.
var game_end_timeout = window.setTimeout(
    function() {
        window.clearInterval( game_loop );
        /* Possible additional cleanups here. */
    },
    10000 // = 10 seconds or whatever time you want to stop the loop execution.
);

I created a fiddle using the above technique (which works as expected so far). You can set the game_loop interval value to whatever you need and the game_end_timeout (which calls clearInterval ) will take care of determining when the game loop should stop.