title: Applying prototype functions to 2 different objects in a loop only works on the second object
body: <p>Sorry if question is bad. Its my first one. Im setting prototype functions  on Ball object instances but in the loop the function only work on the instance that is called second(last). I tries to search for answer online.</p>
  <pre><code>function Ball(x, y, velX, velY, color, size) {
      this.x = x;
      this.y = y;
      this.velX = velX;
      this.velY = velY;
      this.color = color;
      this.size = size;
  }
  
  Ball.prototype.draw = function() {
      ctx.beginPath();
      ctx.fillStyle = this.color;
      ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
      ctx.fill();
  }
  
  Ball.prototype.boundaries = function() {
      if (this.x - this.size &gt; width) {
          this.x = 0 - this.size;
      } else if (this.x + this.size &lt; 0) {
          this.x = width - this.size;
      } else if (this.y - this.size &gt; height) {
           this.y = 0 - this.size;
      } else if (this.y + this.size &lt; 0) {
          this.y = height - this.size;
      }
  }
  
  /** Controls that is only working on second object**/
  Ball.prototype.setControls = function() {
      let _this = this;
      window.onkeydown = function(e) {
          if (e.key === 'a' &amp;&amp; _this.velX &gt; -4) {
              _this.velX -= 1;
          } else if (e.key === 'd' &amp;&amp; _this.velX &lt; 4) {
              _this.velX += 1;
          } else if (e.key === 'w' &amp;&amp; _this.velY &gt; -4) {
              _this.velY -= 1;
          } else if (e.key === 's' &amp;&amp; _this.velY &lt; 4) {
              _this.velY += 1;
          }
      }
  
     this.x += _this.velX;
     this.y += _this.velY;
  }
  
  
  let testBall = new Ball(50, 100, 4, 4, 'blue', 10);
  let ball2 = new Ball(200, 200, 4, 4, 'green', 12);
  
  function loop() {
      ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
      ctx.fillRect(0, 0, width, height);
  
  
      /** If I switch testBall with ball2** setControls 
      will work on testBall**/
      testBall.draw();
      testBall.setControls();
      testBall.boundaries();
  
      ball2.draw();
      ball2.boundaries();
      ball2.setControls();
  </code></pre>
  <p>I've tried to put an if else statement where I initialize x = 1 before the loop and the for each odd num I run the function on 1 object and then even numbers on the other object but its laggy and it obviously becomes a problem when I need more objects.</p>
  <pre><code>    requestAnimationFrame(loop);
  }
  
  loop();
  </code></pre>