使用一个动画循环（requestanimationframe）对矩形进行独立动画处理

Question

I'm trying to represent rows of moving rectangles horizontally. For this matter I created instances of the rectangle "class" and move them around incrementing their X property. Following the advise on this forum I used requestAnimationFrame for this task.

Logic problem

I'm trying to represent packages sent from clients to a server. (From the left to the right).

Here's a print screen:

The problem I face is that when a rectangle "intersects" with any other rectangle (meaning intersecting that one or more rectangles have the same x value at the same time ) I need to wait a random time before I draw a new rectangle in the same row.

Right now I'm doing all the animation inside a single requestAnimationFrame loop. How can I wait and draw separately each rectangle.

I googled a lot over the topic and it seems like you're supposed to use just one loop, but in this case, how can I do this without using threads like in Java?

How can I wait a random time without stopping the whole animation loop?
Should I use independent requestAnimationFrame loops for each rectangle?

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

You can suspend a rect's movement for a random # of animation loops by:

• adding a this.suspend property to the Rectangle class

• when a rect collides then set its suspend countdown to a random delay

• if a rect is "suspended", instead of moving it just reduce its .suspend countdown

• if a rect is active, just move it

Example code (untested):

// 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

I think you didn't understand properly what I meant by waiting a random time. It's not that I want to delay the rectangle that colided, but create a new one from the left margin (like it was sent again from the same client). But both of your approaches were really useful, just that I needed to add the suspend property to a new instance of rectangle (or add a negative x to the new rectangle).

Anyway, my new function looks like that, but I don't know for what reason the whole code is not running when I create the new instances inside the if sentence.

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);

};