使用一个动画循环（requestanimationframe）独立动画矩形

Question

我正在尝试水平表示多行移动的矩形。为此，我创建了矩形“类”的实例并移动它们以增加它们的 X 属性。 按照这个论坛上的建议，我使用 requestAnimationFrame 来完成这项任务。

逻辑问题

我正在尝试表示从客户端发送到服务器的包。 （从左到右）。

这是一个打印屏幕：

我面临的问题是，当一个矩形与任何其他矩形“相交”时（意味着相交一个或多个矩形同时具有相同的 x 值）我需要等待随机时间才能绘制一个新矩形在同一行。

现在我正在一个 requestAnimationFrame 循环中完成所有动画。如何等待并分别绘制每个矩形。

我在谷歌上搜索了很多关于这个主题的内容，看起来你应该只使用一个循环，但在这种情况下，我如何不使用 Java 中的线程来做到这一点？

如何在不停止整个动画循环的情况下等待随机时间？
我应该为每个矩形使用独立的 requestAnimationFrame 循环吗？

Rectangle.prototype.move=function(){

    var maxRight=canvas.width-this.width;

    for(var i=0; i< rectangles.length; i++){
        if(rectangles[i].y!=this.y){

            if(intersects(this.x,this.width,rectangles[i].x,this.width) && this.colided==false){
                console.log("choque");
                this.colided=true;
                this.color="#DC143C";
                rectangles[i].color="#DC143C";
                rectangles[i].colided=true;
                numColisions+=2;
            }
        }

    }

    this.x+=this.velocityX;


    if(this.x>maxRight){
        this.end=true;

    }
    return(this);
};

// draw this rect on the canvas
Rectangle.prototype.render=function(){
    ctx.fillStyle=this.color;
    ctx.fillRect(this.x,this.y,this.width,this.height);
    return(this);
}

Answer 1

您可以通过以下方式暂停矩形的移动以进行随机的 # 个动画循环：

• 向 Rectangle 类添加 this.suspend 属性

• 当矩形发生碰撞时，将其暂停倒计时设置为随机延迟

• 如果一个矩形被“暂停”，而不是移动它，只需减少它的 .suspend 倒计时

• 如果矩形处于活动状态，只需移动它

示例代码（未经测试）：

// add a this.suspend property to the Rectangle class

this.suspend=0;
...

// only move the rect if the rect is not suspended

Rectangle.prototype.move=function(){

    var maxRight=canvas.width-this.width;

    for(var i=0; i< rectangles.length; i++){
        if(rectangles[i].y!=this.y){

            if(intersects(this.x,this.width,rectangles[i].x,this.width) && this.colided==false){
                console.log("choque");
                this.colided=true;
                this.color="#DC143C";
                rectangles[i].color="#DC143C";
                rectangles[i].colided=true;
                numColisions+=2;

                // suspend moving this rect for random time (0-5 loops)
                this.suspend=parseInt(Math.random()*5);
            }
        }

    }

    // decide whether or not to move this rectangle
    if(this.suspend>0){
        // this rect is suspended, reduce the suspension countdown
        this.suspend--;
    }else{
        // this rect is active, move it
        this.x+=this.velocityX;
    }

    if(this.x>maxRight){
        this.end=true;

    }
    return(this);
};

Answer 2

我认为您没有正确理解我所说的随机等待是什么意思。这不是我想延迟碰撞的矩形，而是从左边距创建一个新的矩形（就像它是从同一个客户端再次发送的一样）。 但是您的两种方法都非常有用，只是我需要将 suspend 属性添加到 rectangle 的新实例（或将负 x 添加到新矩形）。

无论如何，我的新函数看起来像这样，但我不知道是什么原因，当我在 if 语句中创建新实例时，整个代码没有运行。

Rectangle.prototype.move=function(){

var maxRight=canvas.width-this.width;

for(var i=0; i<rectangles.length; i++){
    if(rectangles[i].y!=this.y){

        if(intersects(this.x,this.width,rectangles[i].x,this.width) && this.colided==false){
            console.log("choque");
            this.colided=true;
            this.color="#DC143C";
            rectangles[i].color="#DC143C";
            rectangles[i].colided=true;
            numColisions+=2;

            //Create 2 new rectangles 

            var rect1=newRect(0,this.y,40,30);
            rect1.velocityX=speed;
            rectangles.push(rect1);
            rect1.suspend=parseInt(Math.random()*5);


            var rect2=newRect(0,rectangles[i].y,40,30);
            rect2.velocityX=speed;
            rect2.suspend=parseInt(Math.random()*5);
            rectangles.push(rect2); 

        }


    }
}


// decide whether or not to move this rectangle
if(this.suspend>=0){
    // this rect is suspended, reduce the suspension countdown
    this.suspend--;
}else{
    // this rect is active, move it
    this.x+=this.velocityX;
} 

this.x+=this.velocityX;
if(this.x>maxRight){
    this.end=true;

}
return(this);

};