如何在一段时间后绘制每个对象（JavaScript 小游戏）

Question

我正在为 Uni 做一个项目，想用 JavaScript 制作一个代表吉他英雄的小游戏（https://www.gameinformer.com/s3/files/styles/body_default/s3/legacy-images/imagefeed/Reunion %20Tour%3A%20The%20Best%20And%20Worst%20Of%20Guitar%20Hero/Gh3_2D00_337_2D00_610.jpg ) 我一个月前才开始学习 JavaScript，但被画布库吸引，决定用它来做我的项目。我设法制作了一组圆形对象，每个对象具有不同的速度和 y 位置，并使它们一起出现在屏幕上。var canvas = document.getElementById("canvas");    var g = canvas.getContext("2d");    canvas.width = window.innerWidth;    canvas.height = window.innerHeight;    //object    function Circle(x, y, speed, radius){           this.x=x;        this.y=y;        this.speed=speed;        this.radius=radius;        //methods for the object        this.draw = function(){                g.beginPath();                g.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);                g.fill();                g.closePath();            }        this.update = function(){                this.x += this.speed;                this.draw();            }     }    var circleArray = [];    for ( var i=0; i<10; i++){        var stringA = 100;        var stringS = 200;        var stringD = 300;        var stringF = 400;        var array = [stringA, stringD, stringF, stringS];        radius=40;        var x= innerWidth - radius;        var y=array[Math.floor(Math.random() * 4)];        var speed = Math.floor(Math.random() * (10 - 4) ) + 4;  //(max-min) + min        speed = -speed;        circleArray.push(new Circle(x, y, speed, radius));    }    function animate() {        requestAnimationFrame(animate);          g.clearRect(0, 0, innerWidth, innerHeight);        //this is where it all went downhill - without setInterval method, it works        setInterval( function(){        for ( var i=0; i< circleArray.length; i++ ){            circleArray[i].update();        }        }, 1000);        //    }我接下来要做的是让圆形对象一个接一个地出现在屏幕上。最好在随机间隔之后。但是我无法理解 setInterval 方法。我的想法是在内部创建另一个 setInterval 方法，但这似乎不起作用。谁能告诉我如何或指向我的教程？谢谢！

Answer 1

为了实现这一点，我声明了一个新变量：frames帧会随着每一animate()帧增加它的值。

我在里面创建圆圈animate()，只有当

if(frames % 27 == 0 && //you can choose a different number

   Math.random() < .5 && // for randomness

   circleArray.length <= 10){//limiting the total number of circles at 10

   circleArray.push(new Circle());}

我希望这是你想要达到的目标。

var canvas = document.getElementById("canvas");

var g = canvas.getContext("2d");

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

var frames = 0;

//object

function Circle() {

  this.array = [100, 300, 400, 200];

  this.radius = 40;

  this.x = innerWidth + this.radius;

  this.y = this.array[Math.floor(Math.random() * 4)];

  this.speed = -Math.floor(Math.random() * (20 - 4)) + 4;

  

  //methods for the object

  this.draw = function() {

    g.beginPath();

    g.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);

    g.closePath();

    g.fill();

    

  };

  this.update = function() {

    this.x += this.speed;

    // if the circle goes out of the canvas put it back 

    if(this.x < -this.radius){this.x = innerWidth + this.radius;}

    this.draw();

  };

}

var circleArray = [];

function animate() {

  requestAnimationFrame(animate);

  

  g.clearRect(0, 0, innerWidth, innerHeight);

  

  

  if(frames % 27 == 0 && 

     Math.random() < .5 && 

     circleArray.length <= 10){circleArray.push(new Circle());}

    for (var i = 0; i < circleArray.length; i++) {

      circleArray[i].update();

    }

  

  

  

  drawLines();

  frames++

 

  

}

animate();

function drawLines(){

   //lines

  g.beginPath();

  g.moveTo(0, 100);

  g.lineTo(innerWidth, 100);

  g.strokeStyle = "red";

  g.stroke();

  g.closePath();

  g.beginPath();

  g.moveTo(0, 200);

  g.lineTo(innerWidth, 200);

  g.strokeStyle = "red";

  g.stroke();

  g.closePath();

  g.beginPath();

  g.moveTo(0, 300);

  g.lineTo(innerWidth, 300);

  g.strokeStyle = "red";

  g.stroke();

  g.closePath();

  g.beginPath();

  g.moveTo(0, 400);

  g.lineTo(innerWidth, 400);

  g.strokeStyle = "red";

  g.stroke();

  g.closePath();

}

<canvas id="canvas"></canvas>

Answer 2

如果您希望抽奖之间有随机的时间量，则 setInterval 可能不是您想要使用的。尝试做这样的事情：

let randomDelay

for(int i = 0; i < circleArray.length; i++){

    randomDelay = Math.random() * 100 //maximum number of milliseconds to wait

    setTimeout(() => {

         circleArray[i].update()

    }, randomDelay)

}

您的代码没有按照您的预期执行的原因是因为您的 for 循环在间隔内，这意味着所有这些都每 1 秒“同时”更新一次