如何使用Javascript和画布不断生成移动的形状

我目前正在为我的“顶点”项目开发一个小游戏。在游戏中，用户试图避免随机大小的矩形，以设定的速度从屏幕右侧向左移动

它是使用面向对象的Javascript构建的，我给它分配了一个匿名函数，但是，我似乎无法让它生成一个形状，并在调用函数的初始时间为它设置动画。如果我创建多个对象，这个问题就可以解决，但是我希望这个函数能够自动运行并生成多个矩形

我尝试以一定的间隔调用函数，以强制它重新运行函数，但没有结果。我还尝试分离初始化函数，用一个参数调用它，以生成给定给它的形状数

该函数通过初始调用生成形状，并确定颜色、大小和位置，以及在画布上绘制形状

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

在这里初始化对象，循环生成画布上的所有对象和动画

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

我期望矩形以新的尺寸在新的y坐标处连续生成，然后从屏幕的右侧移动到左侧。但是，只创建一个矩形并设置动画。

var list=[]；
var canvas=document.querySelector（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var randomRectangle=函数（）{
this.init=函数（）{
这个速度=4；
这个.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=函数（）{
这个.x-=这个速度；
//重新启动x位置以重用矩形
//您可以将此处的y值更改为新的随机值
//也可以使用array.splice删除
如果（this.x<-50）this.x=canvas.width-50；
}
this.draw=函数（num）{
绘制矩形（这个.x，这个.y，这个.w，这个.h，这个.col）；
}
};
函数循环（）{
draw.clear（）；
//player.draw（）；
//player.move（）；
//墙1.绘制（）；
//墙2.绘制（）；
//为列表中的每个矩形调用draw和move方法
对于（var i=0；i
var list=[]；
var canvas=document.querySelector（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var randomRectangle=函数（）{
this.init=函数（）{
这个速度=4；
这个.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=函数（）{
这个.x-=这个速度；
//重新启动x位置以重用矩形
//您可以将此处的y值更改为新的随机值
//也可以使用array.splice删除
如果（this.x<-50）this.x=canvas.width-50；
}
this.draw=函数（num）{
绘制矩形（这个.x，这个.y，这个.w，这个.h，这个.col）；
}
};
函数循环（）{
draw.clear（）；
//player.draw（）；
//player.move（）；
//墙1.绘制（）；
//墙2.绘制（）；
//为列表中的每个矩形调用draw和move方法
对于（var i=0；iYou需要为您想要绘制的矩形创建一个列表，并不断将新的矩形推送到该列表中。您能澄清一下我该如何操作吗？我尝试了以下方法：
function rectangles（）{var y=Math.floor（Math.random（）*280）+40；var w=Math.floor（Math.random（）*200）+50；var h=Math.floor（Math.random（）*150）+20；console.log（y，w，h）；draw.rectangles（canvas.width，y，w，h）；}
将此作为使其持续运行的方法：
var rectangleGen=setInterval（rectangles，2000）；
但没有结果。数字每2秒生成一次，似乎没有绘制。查看下面答案中的代码，如果需要任何额外帮助，请告诉我！你需要列出你想要绘制的矩形，并不断将新矩形推到该列表中。你能澄清我可能如何进行吗？我尝试过了这：
函数矩形（{var y=Math.floor（Math.random（）*280）+40；var w=Math.floor（Math.random（）*200）+50；var h=Math.floor（Math.random（）*150）+20；console.log（y，w，h）；draw.rectangles（canvas.width，y，w，h）；}
以此作为使其持续运行的方法：
var rectangleGen=setInterval（矩形，2000）；
但没有结果。数字每2秒生成一次，看起来好像没有绘制。请查看下面答案中的代码，如果需要任何额外帮助，请告诉我！
未捕获的语法错误：意外标记}
；）抱歉，我正在编辑以限制列表中的项目数！
未捕获的语法错误：意外标记}
；）抱歉，我正在编辑以限制列表中的项目数！