Changing color of Javascript class object dynamically?

Question

I want to change the color of the balls to red when they collide. I tried using my function check() to change the color of the balls when they collide using balls[i].color but how do I know the positions of the balls to compare when they collide?

function randomXToY(minVal,maxVal,floatVal)
{
  var randVal = minVal+(Math.random()*(maxVal-minVal));
  return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}

// The Ball class
Ball = (function() {

  // constructor
  function Ball(x,y,radius,color){
    this.center = {x:x, y:y};  
    this.radius = radius;               
    this.color = color;
    this.dx = 2;               
    this.dy = 2;        
    this.boundaryHeight = $('#ground').height();
    this.boundaryWidth = $('#ground').width();

    this.dom  = $('<p class="circle"></p>').appendTo('#ground');

    // the rectange div a circle
    this.dom.width(radius*2);
    this.dom.height(radius*2);
    this.dom.css({'border-radius':radius,background:color});

    this.placeAtCenter(x,y);         
  }

  // Place the ball at center x, y
  Ball.prototype.placeAtCenter = function(x,y){
    this.dom.css({top: Math.round(y- this.radius), left: Math.round(x - this.radius)});
    this.center.x = Math.round(x);        
    this.center.y = Math.round(y);             
  };

  Ball.prototype.setColor = function(color) {
    if(color) {
      this.dom.css('background',color);
    } else {
      this.dom.css('background',this.color);
    }           
  };

  // move and bounce the ball
  Ball.prototype.move = function(){
    var diameter = this.radius * 2;                                               
    var radius = this.radius;  
    if (this.center.x - radius < 0 || this.center.x + radius > this.boundaryWidth ) {
      this.dx = -this.dx;
    }
    if (this.center.y - radius < 0 || this.center.y  + radius > this.boundaryHeight ) {
      this.dy = -this.dy;
    }
    this.placeAtCenter(this.center.x + this.dx ,this.center.y +this.dy);

  };



  return Ball;
})();

var number_of_balls = 5;
var  balls = [];   
  var x; 
var y;
$('document').ready(function(){
  for (i = 0; i < number_of_balls; i++) { 
    var boundaryHeight = $('#ground').height();
    var boundaryWidth = $('#ground').width();
     y = randomXToY(30,boundaryHeight - 50);
     x = randomXToY(30,boundaryWidth - 50);
    var radius = randomXToY(15,30);
    balls.push(new Ball(x,y,radius, '#'+Math.floor(Math.random()*16777215).toString(16))); 
  }
  loop(); 
  check();

});

check = function(){
  for (var i = 0; i < balls.length; i++){

  for(var j=0;j<balls.length;j++){
      if(x==y){
      balls[i].color='#ff0000';
       alert("y");         
 }
    else{
    }
    }}

   setTimeout(check,8);  
};

loop = function(){
  for (var i = 0; i < balls.length; i++){
    balls[i].move();
  }

  setTimeout(loop, 8);    
};

http://jsbin.com/imofat/743/edit

Answer 1

Calculate the Eucledian distance between the centers of each ball. Then, when this distance is smaller or equal to the sum of their radiuses, there's a collision:

check = function() {
  for (var i = 0; i < balls.length; i++) {
    for(var j = 0; j < balls.length; j++) {
      if (i != j) { // ignore self-collision
        if (Math.pow(balls[j].center.x - balls[i].center.x, 2) + Math.pow(balls[j].center.y - balls[i].center.y, 2) <= Math.pow(balls[i].radius + balls[j].radius, 2)) {
          balls[j].setColor('red');
        } else {
          balls[j].setColor(balls[j].color);
       } 
    }
 }}

Here's a DEMO.