Javascript 每隔一段时间在画布上绘制和移动形状

我想在业余时间制作我自己的“Flappy Bird”克隆，但我很难让“pipes”以设定的间隔绘制和滚动。我能画一组并移动它，但让它在一段时间内反复画并移动它是我无法做到的

任何关于我需要做什么的见解都将不胜感激

$（文档）.ready（函数（）{
//全局变量
var world=document.getElementById（'gameWorld'）；
var startScreen=document.getElementById（'startScreen'）；
var context=world.getContext（'2d'）；
window.requestAnimFrame=（函数（回调）{
返回window.requestAnimationFrame | | | window.webkitRequestAnimationFrame | | | window.mozRequestAnimationFrame | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})()
//bord构造函数
函数bordBuilder（）{
这个半径=10；
这个.x=world.width/2；
此.y=世界高度/2；
这个.vy=-20；
这个重力=0.8；
}
函数pipesBuilder（）{
这个宽度=50；
这个.x=世界宽度；
}
//在舞台上画画
函数drawBord（bord，上下文）{
context.beginPath（）；
弧（bord.x，bord.y，bord.radius，0,2*Math.PI，false）；
context.fillStyle='blue'；
context.fill（）；
context.lineWidth=1；
context.strokeStyle='navyblue'；
stroke（）；
}
//用于检查bord是否撞击舞台顶部或底部的功能
函数fallingBord（bord）{
bord.y+=bord.gravity；
if（边界y<0+边界半径）{
bord.y=bord.radius；
}否则如果（bord.y+bord.radius>世界高度）{
bord.y=世界高度-bord.radius；
}
}
//动画功能始终运行
函数startAnimation（bord、context、pipes）{
clearRect（0，0，world.width，world.height）；
drawBord（bord，上下文）；
法林堡；
setInterval（函数（）{
抽油管（管道、上下文）；
}, 3000);
移动管道（管道）；
requestAnimFrame（函数（）{
startAnimation（bord、context、pipes）；
});
}
//让鸟儿每一次点击都飞得更高
功能更高（bord）{
console.log（'higher'）；
bord.y+=bord.vy；
}
//管道功能/接线盒
函数drawPipes（管道、上下文）{
context.beginPath（）；
rect（pipes.x，world.height-50，pipes.width，50）；
context.fillStyle='green'；
context.fill（）；
context.beginPath（）；
rect（pipes.x，0，pipes.width，50）；
context.fillStyle='green'；
context.fill（）；
}
//函数将管道从左向右移动
功能移动管道（管道）{
管道x-=1；
}
var pipes=new pipesBuilder（）；
var bord=new bordBuilder（）；
//将飞行事件侦听器添加到阶段
addEventListener（“单击”，函数（）{
飞更高（博尔德）；
}，假）；
startScreen.addEventListener（“单击”，函数（）{
startScreen.style.display='none'；
startAnimation（bord、context、pipes）；
}，假）；
});
#游戏世界{
身高：50%；
宽度：50%；
边框：1px纯黑；
}
#startScreen{
位置：绝对位置；
z指数：5；
排名：0；
左：0；
身高：50%；
宽度：50%；
}
#startScreen h1{
文本对齐：居中；
}

开始
您只是缺少了多管道的概念。我已经修改了您的代码，因此
管道
现在是一个管道数组，它们的绘制/移动功能可用于每个管道。我还添加了一个
newPipe
函数，该函数在间隔中被调用（我已将其移出渲染循环）

由于管道堆积，我添加了一个delete函数，删除通过左画布边缘的管道

我们开始：


$（文档）.ready（函数（）{
//全局变量
var world=document.getElementById（'gameWorld'）；
var startScreen=document.getElementById（'startScreen'）；
var context=world.getContext（'2d'）；
window.requestAnimFrame=（函数（回调）{
返回window.requestAnimationFrame | | | window.webkitRequestAnimationFrame | | | window.mozRequestAnimationFrame | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})()
//bord构造函数
函数bordBuilder（）{
这个半径=10；
这个.x=world.width/2；
此.y=世界高度/2；
这个.vy=-20；
这个重力=0.8；
}
函数pipesBuilder（）{
这个宽度=50；
这个.x=世界宽度；
}
//在舞台上画画
函数drawBord（bord，上下文）{
context.beginPath（）；
弧（bord.x，bord.y，bord.radius，0,2*Math.PI，false）；
context.fillStyle='blue'；
context.fill（）；
context.lineWidth=1；
context.strokeStyle='navyblue'；
stroke（）；
}
//用于检查bord是否撞击舞台顶部或底部的功能
函数fallingBord（bord）{
bord.y+=bord.gravity；
if（边界y<0+边界半径）{
bord.y=bord.radius；
}否则如果（bord.y+bord.radius>世界高度）{
bord.y=世界高度-bord.radius；
}
}
//动画功能始终运行
函数startAnimation（bord、context、pipes）{
clearRect（0，0，world.width，world.height）；
drawBord（bord，上下文）；
法林堡；
抽油管（管道、上下文）；
移动管道（管道）；
requestAnimFrame（函数（）{
startAnimation（bord、context、pipes）；
});
}
//使鸟飞翔