На экране шарик со случайным цветом,который двигается в разных направлениях и отбивается от стен.
Каждые 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=50;
this.y=50;
this.z=20;
this.dx=1;
this.dy=1;
}
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.paint()
this.dy=-this.dy
}
this.x+=this.dx
this.y+=this.dy
this.paint()
}
paint(){
this.ctx.beginPath()
this.ctx.fillStyle='red'
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()
setInterval(function(){
ball.move();
},0)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="margin: 0">
<canvas height="600" width="1366" style="background: yellowgreen"></canvas>
<script>
Animation.start()
</script>
</body>
</html>