Chcę zmienić kolor piłek na czerwony, gdy zderzyli się. Próbowałem użyć mojej funkcji check(), aby zmienić kolor kulki, gdy zderzają się za pomocą balls[i].color, ale skąd mam znać pozycje piłek, aby porównać, kiedy się zderzyli?

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.

0
Aditya 2 wrzesień 2012, 00:39

3 odpowiedzi

Najlepsza odpowiedź

Oblicz Odległość Euledian między centrami każdej kuli. Następnie, gdy ta odległość jest mniejsza lub równa sumie ich promień, jest kolizja:

enter image description here

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

Oto Demo .

5
João Silva 1 wrzesień 2012, 22:01

Edytować:

Aby zderzyć się z innymi kulkami, będzie wymagać więcej pracy .. Sprawdź ten post: Piłka do kolizji kuli


Just setColor Gdy zmienia się kierunek, zakładając, że "zderzenie" oznacza "uderzyć w ścianę":

// 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);
};  
0
Community 23 maj 2017, 12:24

Dodałem rzeczywistą kolizję kulową sprawdzić w metodzie Sprawdź:

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);  
};
0
batzkoo 1 wrzesień 2012, 20:59