CODEWITHSUNDEEP
javascripthtmlcanvastimer
ohohohoh00
ohohohoh00

Reputation: 11

Adding a timer to my game

I am currently working on a html5 canvas game. I want to add a timer, so that you have a certain amount of time to collect as many items as possible in. I have tried a few ways of doing it, but due to my lack of skill and experience when it comes to javascript I have not yet made it work. So my question is how to do this in an as simple as possible way?

My code:

Thanks in advance!!

Upvotes: 1

Views: 5998

Answers (2)

markE
markE

Reputation: 105015

requestAnimationFrame is a very efficient way of doing timers in the browser.

Some Benefits of requestAnimationFrame:

  • automatically synchronizes canvas drawings with the current display refresh cycle,

  • multiple requestAnimationFrame calls are coordinated,

  • automatically suspends the loop if the user changes do a different browser tab

  • each loop automatically receives a highly precise timestamp. Use this timestamp to determine when to trigger animation work (like your end-of-game) and/or to determine how much animation work to do.

Here's how to make it work:

Create 1+ javascript objects. Each object is one timer.

Each timer object defines some work that should be done after a specified delay.

var timers=[];

timers.push({

    // this timer fires every 500ms
    delay:500,            

    // fire this timer when requestAnimationFrame's timestamp
    // reaches nextFireTime
    nextFireTime:0,        

    // What does this timer do?
    // It execute the 'doTimers' function when this timer fires
    doFunction:doTimers,  

    // just for testing: accumulate how many times this timer has fired
    counter:0

});

Create an animation loop with requestAnimationFrame

// the animation loop
// The loop automatically receives the currentTime
function timerLoop(currentTime){

    // schedule another frame 
    // this is required to make the loop continue
    // (without another requestAnimationFrame the loop stops)
    requestAnimationFrame(timerLoop);

    // iterate through each timer object
    for(var i=0;i<timers.length;i++){

        // if the currentTime > this timer's nextFireTime...
        // then do the work specified by this timer
        if(currentTime>timers[i].nextFireTime){           

            var t=timers[i];

            // increment nextFireTime
            t.nextFireTime=currentTime+t.delay;

            // do the work specified in this timer
            // This timer will call 'doFunction' & send arguments: t,i
            t.doFunction(t,i);
        }
    }        
}

Start the animation loop

requestAnimationFrame(timerLoop);

Here's example code and a Demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


var timers=[];
timers.push({delay:50,nextFireTime:0,doFunction:doTimers,counter:0});
timers.push({delay:500,nextFireTime:0,doFunction:doTimers,counter:0});
timers.push({delay:5000,nextFireTime:0,doFunction:doTimers,counter:0});

requestAnimationFrame(timerLoop);

function timerLoop(currentTime){
  requestAnimationFrame(timerLoop);

  for(var i=0;i<timers.length;i++){
    if(currentTime>timers[i].nextFireTime){
      var t=timers[i];
      t.nextFireTime=currentTime+t.delay;
      t.doFunction(t,i);
    }
  }

}

function doTimers(t,i){ 
  ctx.clearRect(0,100+i*20-20,cw,20);
  ctx.fillText('Timer#'+i+' with '+t.delay+'ms delay has fired '+(++t.counter)+' times.',20,100+20*i);    
}
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>

Upvotes: 2

Dennis Rasmussen
Dennis Rasmussen

Reputation: 520

When the game begins set a timer using the setTimeout() function.

Since your game is currently running indefinitely I'd change the last bit of your code to give it an ending.

var time = Date.now();
var running = setInterval(run, 10); // Save this so we can clear/cancel it later

setTimeout(function() {        // Set a timer
  clearInterval(running);      // Stop the running loop
  alert('Game over!');         // Let the user know, do other stuff here
}, 30000);                     // time in miliseconds before the game ends

Upvotes: -1

Related Questions