javascript - 定时矩形动画javascript

Question

我想创建一个需要动画的游戏:首先应该在5秒后绘制一个矩形，在5秒后绘制第二个矩形，在5秒后绘制第三个矩形，在5秒后绘制第四个矩形，在4秒后绘制6-10个矩形、3秒后的10-15个矩形、2秒后的15-20个矩形和1秒后的20-25个矩形。矩形来自上方，并应以 recty 的速度运行到底部。也许这会有所帮助:jsfiddle .

  var x = canvasWidth / 100;
  var y = canvasHeight / 100;
  b = 5000;
     function init() {
    recty = canvasHeight / 100 * 20;
    rectx = (Math.random() *(x * 50)) + (x / 5);
    rectb = (Math.random() * (x * 40)) + x * 20;
    return setInterval(main_loop, 10);


  }


  function draw() {
    rectheight = canvasHeight / 100 * 10;
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    // draw triangles
    ctx.beginPath();
    ctx.moveTo(x * 90, y * 50);
    ctx.lineTo(x * 99, y * 60);
    ctx.lineTo(x * 99, y * 40);
    ctx.closePath();
    ctx.stroke();

  }

  function drawrect() {
    // draw rect
    ctx.beginPath();
    fillStyle = "#000000";
    ctx.rect(rectx, recty, rectb, rectheight);
    ctx.fill();

  }

  function update() {
    recty += 1;
    if (recty > canvasHeight) {
      recty = -rectheight;
      rectx = (Math.random() *(x * 50)) + (x / 5);
      rectb = (Math.random() *(x * 50)) + (x / 5);
      b -=1000;
    }
    if (recty > canvasHeight) {
      recty -= 1;


    }
  }



  function main_loop() {
    draw();
    update();
    collisiondetection();
    drawrect();
  }


  init();
  setInterval ( drawrect, b );

Answer 1

现代浏览器有一个内置计时器:requestAnimationFrame。

requestAnimationFrame 循环大约每 16 毫秒触发一次，并给出一个非常精确的 currentTime 参数。您可以使用以下命令启动计时循环:requestAnimationFrame(Timer);。对于您发出的每个 requestAnimationFrame，循环仅执行一次，因此您将 requestAnimationFrame 放入循环本身以保持其运行。

这是一个示例定时循环，用于计算自定时循环启动以来耗时:

// variable used to calculate elapsed time
var lastTime;

// start the first timing loop
requestAnimationFrame(Timer);

function Timer(time){

    // request another timing loop
    // Note: requestAnimationFrame fires only once,
    //       so you must request another loop inside 
    //       each current loop
    requestAnimationFrame(Timer);

    // if this is the very first loop, initialize `lastTime`
    if(!lastTime){lastTime=time;}

    // calculate elapsed time since the last loop
    var elapsedTime=time-lastTime;
}

为了使您的矩形具有“时间感知”功能，您可以为每个矩形创建一个 javascript 对象，该对象定义在所需的时间间隔绘制该矩形所需的所有内容。然后使用此 JavaScript 对象在所需的时间间隔后在所需的位置绘制矩形。

矩形对象属性示例

• 矩形的位置:x,y
• 下次更新矩形位置之前等待的时间间隔:interval
• 更新期间移动矩形的距离:moveByX、moveByY

这里是示例代码和演示:

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

var rects=[]
rects.push({x:10,y:10,moveByX:5,interval:500,nextMoveTime:0});
rects.push({x:10,y:50,moveByX:5,interval:1000,nextMoveTime:0});
rects.push({x:10,y:110,moveByX:5,interval:2000,nextMoveTime:0});

var isFirstLoop=true;

// start the timing loop
requestAnimationFrame(Timer);

function Timer(currentTime){

  // request another timing loop
  // Note: requestAnimationFrame fires only once,
  //       so you must request another loop inside 
  //       each current loop
  requestAnimationFrame(Timer);

  if(isFirstLoop){
    isFirstLoop=false;
    for(var i=0;i<rects.length;i++){
      rects[i].nextMoveTime=time+rects[i].interval;
    }
  }

  ctx.clearRect(0,0,cw,ch);
  for(var i=0;i<rects.length;i++){
    drawRect(rects[i],currentTime);
  }

}

function drawRect(r,time){
  if(time>r.nextMoveTime){
    r.x+=r.moveByX;
    r.nextMoveTime=parseInt(time+r.interval);
  }
  ctx.strokeRect(r.x,r.y,110,15);
  ctx.fillText('I move every '+r.interval+'ms',r.x+5,r.y+10);
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>