How to constantly generate a moving shape with Javascript and Canvas

Question

I'm currently developing a small game for my capstone project. In the game, the user tries to avoid rectangles of random sizes the move from the right side of the screen to the left at a set speed.

It's built using object-oriented Javascript, and I've assigned it an anonymous function, however, I can't seem to get it to generate a shape and animate it more than the initial time the function is called. The problem can be solved if I create more than one object, but I would like this function to run automatically and generate more than just the first rectangle.

I've tried to call the function with an interval to force it to re-run the function with no results. I also attempted to separate the initialization function to call it with a parameter to generate the number of shapes given to it.

This is the function that generates the shape with the initial call, and determines the color, size, and location as well as draws it on the canvas.

var randomRectangle = function(){
this.init = function() {
this.speed = 4;
this.x = canvas.width-50;
this.y = Math.floor(Math.random()*280) + 40;
this.w = Math.floor(Math.random()*200) + 50;
this.h = Math.floor(Math.random()*150) + 20;
this.col = "#b5e61d";
}
this.move = function(){
this.x -= this.speed;
}

this.draw = function(num){
draw.rectangles(this.x, this.y, this.w, this.h, this.col);
}
};

This is where the object is initialized and the loop generates all objects and animations on the canvas.

randRecs = new randomRectangle();
randRecs.init();

function loop(){
draw.clear();

player.draw();
player.move();

wall1.draw();
wall2.draw();

randRecs.draw();
randRecs.move();


}


var handle = setInterval(loop, 30);

I expected the rectangle to continuously be generated at a new y-coordinate with a new size, then move from the right side of the screen to the left. However, only one rectangle is created and animated.

Answer 1

 var list = []; var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); var randomRectangle = function() { this.init = function() { this.speed = 4; this.x = canvas.width - 50; this.y = Math.floor(Math.random() * 280) + 40; this.w = Math.floor(Math.random() * 200) + 50; this.h = Math.floor(Math.random() * 150) + 20; this.col = "#b5e61d"; } this.move = function() { this.x -= this.speed; // restart x position to reuse rectangles // you can change the y value here to a new random value // or you can just remove with array.splice if (this.x < -50) this.x = canvas.width - 50; } this.draw = function(num) { draw.rectangles(this.x, this.y, this.w, this.h, this.col); } }; function loop() { draw.clear(); //player.draw(); //player.move(); //wall1.draw(); //wall2.draw(); // call the methods draw and move for each rectangle on the list for (var i=0; i<list.length; i++) { rec = list[i]; rec.draw(); rec.move(); } } // spawn any number of new rects in a specific interval var rectsPerSpawn = 1; function addRects() { for (var i=0; i<rectsPerSpawn; i++) { if (list.length < 100) { var rec = new randomRectangle(); list.push(rec); rec.init(); } } } // every half second will spawn a new rect var spawn = setInterval(addRects, 500); var draw = { clear: function () { ctx.clearRect(0,0,canvas.width,canvas.height); }, rectangles: function (x, y, w, h, col) { ctx.fillStyle = col; ctx.fillRect(x,y,w,h); } } var handle = setInterval(loop, 30); 

 <canvas></canvas>