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

  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 = [];   

$('document').ready(function(){
  for (i = 0; i < number_of_balls; i++) { 
  var boundaryHeight = $('#ground').height();
  var boundaryWidth = $('#ground').width();
  var y = randomXToY(30,boundaryHeight - 50);
  var 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(); 
 });

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

   setTimeout(loop, 8);    
};

I have never used in oops concepts in javascript. How do I change the ball color when the balls touches each other?

This is the link : http://jsbin.com/imofat/1/edit

Shaeldon
  • 873
  • 4
  • 18
  • 28
Karthick V
  • 1,269
  • 5
  • 16
  • 31
  • 1
    How can you tell if they are touching each other? You'll need to modify move to check if any of the balls are on top of each other. That means you'll need to calculate for each ball how far away it's center is from each of the other balls – if the distance is less than the sum of their diameters, then they are touching. – Rich Bradshaw Sep 07 '12 at 17:42

1 Answers1

2

You currently don't have any interaction with the balls. What you can do is checking whether two balls are "inside" each other, and change colors in that case: http://jsbin.com/imofat/1491/.

// calculates distance between two balls
var d = function(a, b) {
  var dx = b.center.x - a.center.x;
  var dy = b.center.y - a.center.y;
  return Math.sqrt(dx*dx + dy*dy);
};

and:

// for each ball
for(var i = 0; i < balls.length; i++) {
  // check against rest of balls
  for(var j = i + 1; j < balls.length; j++) {
    var a = balls[i];
    var b = balls[j];
    // distance is smaller than their radii, so they are inside each other
    if(d(a, b) < a.radius + b.radius) {
      // set to some other color using your random color code
      a.setColor('#'+Math.floor(Math.random()*16777215).toString(16));
      b.setColor('#'+Math.floor(Math.random()*16777215).toString(16));
    }
  }
}

Still, there are things for improvement:

  • Balls are changing colors as long as they are inside each other, not just once.
  • If you want them to "touch", you might want to implement some kind of bouncing effect to make it more realistic.
pimvdb
  • 151,816
  • 78
  • 307
  • 352