在我的游戏中添加计时器

Question

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!!

Answer 1

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> 

Answer 2

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