title: How can i change variables every 5 sec so that the next ball behaves different than the previous? And how can i add multiple balls?
body: <p>How can i add several balls to the same canvas, using the same class, but change its values every time? e.g First a blue ball that moves to the right, and then 5 sec later, spawn a red ball that moves another direction. And how can i store all these balls in an array? </p>
  
  <p>I have tried just repeating the "new Ball(...)" with the same variables as the previous, where each variable contains a random number, thinking they would change that random value each time i create a new ball from that class. But nothing happens, or i think it just creates a new ball exactly the same and on top of the last. I have also tried this, just with a function that repeats every 5 sec, but same result.</p>
  
  <pre><code>&lt;!Doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Ballgame&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;style&gt;
      canvas{
          background-color: lightgrey;
          outline:2px solid black;
          margin-top:20;
      }
      div{
          width:200px;
          height:200px;
          background-color: red;
          margin: 100px auto;
  
      }
  
  &lt;/style&gt;
  &lt;body&gt;
      &lt;center&gt;
          &lt;canvas id="canvas" height="600" width="800"&gt;&lt;/canvas&gt;
      &lt;/center&gt;
      &lt;audio src="Media/bounce.mp3"&gt;
  
  
  &lt;script&gt;
      "use strict"
  
  
  
          var canvas = document.getElementById("canvas");
          var canvasContext = canvas.getContext("2d");
  
  
  
  
          var bounce = document.querySelector("audio")
          var color;
          var radius;
          var posNeg = [-1,1]
          var speedx = 5 * posNeg[Math.floor(Math.random()*2)];
          var speedy = 3 * posNeg[Math.floor(Math.random()*2)];
          var randomx = Math.floor(Math.random()*700 +50)
          var randomy = Math.floor(Math.random()*500 +50)
      class Ball{
          constructor(x, y, speedx,speedy, radius, color){
              color = "hsla(" + Math.floor(Math.random()*360+1) +  ", 100%, 50%, 1)";
              radius = Math.floor(Math.random()*30 +2);
              this.x = x;
              this.y = y;
              this.speedx = speedx;   
              this.speedy = speedy;
              this.radius = radius
              this.color = color
          }
  
  
          draw(){
              canvasContext.beginPath ();
              canvasContext.arc(this.x,this.y,this.radius,0,Math.PI *2);
              canvasContext.strokeStyle = "black";
              canvasContext.lineWidth = 5;
              canvasContext.stroke();
              canvasContext.fillStyle = this.color;
              canvasContext.fill();
              canvasContext.closePath();
          }
  
          move(){
              this.x += this.speedx;
              this.y += this.speedy;
              if(this.x - this.radius &lt; 0 || this.x +this.radius &gt; canvas.width){
                  this.speedx = -1 * this.speedx;
                  bounce.play()
              }
              if(this.y - this.radius &lt; 0 || this.y + this.radius &gt; canvas.height){
                  this.speedy = -1 * this.speedy;
                  bounce.play()
              }
          }
      }
      var ball = new Ball(randomx, randomy, speedx, speedy, radius, color)
  
      function animate(){
          canvasContext.clearRect (0,0,canvas.width,canvas.height);
          ball.move();
          ball.draw();
          requestAnimationFrame(animate);
      }
      setInterval(function(){
          new Ball(randomx, randomy, speedx, speedy, radius, color);
      }, 5000)
      requestAnimationFrame(animate);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As i said earlier, I think it just prints a new ball that is exactly the same as, and on top the previous ball. Hence i cant see any difference. I want it to create a new ball but with different values e.g different color, radius, and direction.</p>