如何在一段时间后绘制每个对象（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&nbsp; &nbsp;Math.random() < .5 && // for randomness&nbsp; &nbsp;circleArray.length <= 10){//limiting the total number of circles at 10&nbsp; &nbsp;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;//objectfunction Circle() {&nbsp; this.array = [100, 300, 400, 200];&nbsp; this.radius = 40;&nbsp; this.x = innerWidth + this.radius;&nbsp; this.y = this.array[Math.floor(Math.random() * 4)];&nbsp; this.speed = -Math.floor(Math.random() * (20 - 4)) + 4;&nbsp;&nbsp;&nbsp; //methods for the object&nbsp; this.draw = function() {&nbsp; &nbsp; g.beginPath();&nbsp; &nbsp; g.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);&nbsp; &nbsp; g.closePath();&nbsp; &nbsp; g.fill();&nbsp; &nbsp;&nbsp;&nbsp; };&nbsp; this.update = function() {&nbsp; &nbsp; this.x += this.speed;&nbsp; &nbsp; // if the circle goes out of the canvas put it back&nbsp;&nbsp; &nbsp; if(this.x < -this.radius){this.x = innerWidth + this.radius;}&nbsp; &nbsp; this.draw();&nbsp; };}var circleArray = [];function animate() {&nbsp; requestAnimationFrame(animate);&nbsp;&nbsp;&nbsp; g.clearRect(0, 0, innerWidth, innerHeight);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(frames % 27 == 0 &&&nbsp;&nbsp; &nbsp; &nbsp;Math.random() < .5 &&&nbsp;&nbsp; &nbsp; &nbsp;circleArray.length <= 10){circleArray.push(new Circle());}&nbsp; &nbsp; for (var i = 0; i < circleArray.length; i++) {&nbsp; &nbsp; &nbsp; circleArray[i].update();&nbsp; &nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; drawLines();&nbsp; frames++&nbsp;&nbsp;&nbsp;}animate();function drawLines(){&nbsp; &nbsp;//lines&nbsp; g.beginPath();&nbsp; g.moveTo(0, 100);&nbsp; g.lineTo(innerWidth, 100);&nbsp; g.strokeStyle = "red";&nbsp; g.stroke();&nbsp; g.closePath();&nbsp; g.beginPath();&nbsp; g.moveTo(0, 200);&nbsp; g.lineTo(innerWidth, 200);&nbsp; g.strokeStyle = "red";&nbsp; g.stroke();&nbsp; g.closePath();&nbsp; g.beginPath();&nbsp; g.moveTo(0, 300);&nbsp; g.lineTo(innerWidth, 300);&nbsp; g.strokeStyle = "red";&nbsp; g.stroke();&nbsp; g.closePath();&nbsp; g.beginPath();&nbsp; g.moveTo(0, 400);&nbsp; g.lineTo(innerWidth, 400);&nbsp; g.strokeStyle = "red";&nbsp; g.stroke();&nbsp; g.closePath();}<canvas id="canvas"></canvas>

Answer 2

如果您希望抽奖之间有随机的时间量，则 setInterval 可能不是您想要使用的。尝试做这样的事情：let randomDelayfor(int i = 0; i < circleArray.length; i++){&nbsp; &nbsp; randomDelay = Math.random() * 100 //maximum number of milliseconds to wait&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;circleArray[i].update()&nbsp; &nbsp; }, randomDelay)}您的代码没有按照您的预期执行的原因是因为您的 for 循环在间隔内，这意味着所有这些都每 1 秒“同时”更新一次