На экране шарик со случайным цветом,который двигается в разных направлениях и отбивается от стен. Каждые 200 миллисекунд появляется ещё 1 шарик, у которого есть случайный цвет и двигается в случайном направлении. Максимальное количество шариков не должно превышать 20.
Помогите пожалуйста понять и реализовать задачу.
class GraphicTools{
constructor(){
this.canvas=document.querySelector('canvas')
this.ctx=this.canvas.getContext('2d')
}
}
//===================================================
class Ball extends GraphicTools{
constructor(){
super()
this.x=Math.random()*this.canvas.width;
this.y=Math.random()*this.canvas.height;
this.z=20;
this.dx=Math.random()*2
this.dy=Math.random()*2
this.a=Math.random()*255
this.b=Math.random()*255
this.c=Math.random()*255
this.col=`rgb(${this.a},${this.b},${this.c})`
}
move(){
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)
if(this.x>this.canvas.width||this.x<0){
this.dx=-this.dx
}
if(this.y>this.canvas.height||this.y<0){
this.dy=-this.dy
}
this.x+=this.dx
this.y+=this.dy
this.paint()
}
paint(){
this.ctx.beginPath()
this.ctx.fillStyle=this.col
this.ctx.arc(this.x,this.y,this.z,0,6.28)
this.ctx.fill()
this.ctx.closePath()
}
}
//=================================================
class Animation{
static start(){
let ball=new Ball()
ball.paint()
// for(let i=0;i<20;i++){
// setInterval(function(){
// ball.paint()
// },200)
// }
setInterval(function(){
ball.move();
},2)
}
}
<canvas height="600" width="1366" style="background: yellowgreen"></canvas>
ball=new Ball()
, можно ли сделатьpush()
в него используя ещё и цикл?