Question

我目前正在开发一款html5帆布游戏。我想添加一个计时器，这样你就有一定的时间来收集尽可能多的项目。我尝试了几种方法，但由于我在javascript方面缺乏技巧和经验还没有成功。所以我的问题是如何以尽可能简单的方式做到这一点？

我的代码：

提前致谢!!

Answer 1

requestAnimationFrame是在浏览器中执行计时器的一种非常有效的方式。

requestAnimationFrame的一些好处：

自动将画布图与当前显示刷新周期同步，
协调多个requestAnimationFrame调用，
如果用户更改了其他浏览器标签
每个循环自动接收高度精确的时间戳。使用此时间戳确定何时触发动画工作（如游戏结束）和/或确定要做多少动画工作。

以下是如何使其发挥作用：

创建1个以上的javascript对象。每个对象都是一个计时器。

每个计时器对象定义了在指定的延迟后应该完成的一些工作。

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

});

使用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);
        }
    }        
}

启动动画循环

requestAnimationFrame(timerLoop);

这是示例代码和演示：

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

游戏开始时使用setTimeout()功能设置计时器。

由于您的游戏目前无限期运行，我会更改代码的最后一位以使其结束。

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

在我的游戏中添加计时器

2 个答案:

这是示例代码和演示：