动态更改Javascript类对象的颜色？

Question

我想在碰撞时将球的颜色改为红色。我尝试使用我的函数check()在使用balls[i].color碰撞时更改球的颜色但是我怎么知道球碰撞时要比较的位置？

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

计算每个球的中心之间的Eucledian distance。然后，当这个距离小于或等于它们的半径之和时，就会发生碰撞：

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);
       } 
    }
 }}

这是 DEMO 。

Answer 2

编辑：

与其他球碰撞，需要更多工作..查看这篇文章：Ball to Ball Collision

---

当方向改变时，只需setColor，假设“碰撞”意味​​着“撞墙”：

// 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;
    this.setColor( 'red' );
  }
  if (this.center.y - radius < 0 || this.center.y  + radius > this.boundaryHeight ) {
    this.dy = -this.dy;
    this.setColor( 'red' );
  }
  this.placeAtCenter(this.center.x + this.dx ,this.center.y +this.dy);
};  

Answer 3

我在check方法中添加了一个实际的球碰撞检查：

check = function(){
  var dx, dy;
  var x1, x2, y1, y2, r1, r2;
  for (var i = 0; i < balls.length; i++){
      x1 = balls[i].center.x;y1=balls[i].center.y;r1=balls[i].radius;
      for(var j=0;j<balls.length;j++){
          if (i===j) {continue;} // collision with self

          x2 = balls[j].center.x;y2=balls[j].center.y;r2=balls[j].radius;


          if( Math.sqrt((x1-x2)*(x1-x2) +  (y1-y2)*(y1-y2)) <=(r1+r2)  ){ // check collision
              balls[i].setColor('#ff0000');
          }
          else{
          }
      }
  }

  setTimeout(check,8);  
};