3

2つのボールが衝突したときにボールの色を赤に変えるコードは次のとおりです。もうすぐそこにいますが、1つのボールが色を変えていないので、問題は見つからないようです。みんな助けてください！

 //generate a random number within a range
    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 (i!=j) {
          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)) {
            console.log(true);
            balls[j].setColor('red');
            balls[i].setColor('red');
          } else {
            balls[j].setColor(balls[j].color);

          } 
        }

     }}

       setTimeout(check,8);  
    };

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

      setTimeout(loop, 8);    
    };

これがjsbinです：http： //jsbin.com/imofat/790/edit

4

2 に答える 2

3

ボールはすべて衝突しています。衝突の式は正しいです。つまり、次のようになります。

(dx * dx) + (dy * dy) <= sum of the circles' radii

問題は、JavaScriptのシングルスレッドの性質と、そのelse一部がif色をリセットするために、画面が新しい色を反映するように更新されない場合があることです。

たとえば、とball[0]衝突するときは、の色をにball[1]設定します。これはOKです。ただし、たとえば、内側のループの次の反復で衝突しない場合（）は、の色を元の色にリセットします。画面はループが終了した後にのみレンダリングされるため（これも、 JavaScriptのシングルスレッドの性質に）、この状況では色が表示されることはありません。ball[0]redifball[0] ball[2]j=2 ball[0]red

したがって、2つのオプションがあります。1）衝突が発生したときに内側のbreakループから外れます（他のすべての衝突をテストする必要がない場合）。2）どのボールがすでに衝突したかをマークし、ループ内でこれまで衝突したことがないボールの色のみをリセットします。たとえば、次のようにします。Array

var collisions = [];
for (var i = 0; i < balls.length; i++) {
  for (var j = 0; j < balls.length; j++) {
    if (i!=j) {
      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)) {
        collisions[i] = true;
        balls[i].setColor('red');
      } else {
        if (!collisions[i]) {
          balls[i].setColor(balls[i].color);
        }
      } 
    }
  }
}

i + 1また、2番目のループは、の代わりに開始するように簡略化できます0。このようにして、衝突テストの数を減らすだけでなく、i != jテストを削除することもできます。

デモ。

于 2012-09-04T19:34:39.177 に答える
0

衝突が発生した後も赤を維持したい場合は、ボールの色を設定する必要があります。

Ball.prototype.setColor = function(color) {        
    if(color) {
      this.color = color;  // The ball's color is now this value. 
      this.dom.css('background',color);
    } else {
      this.dom.css('background',this.color); // so when this is called, the ball will be that color going forward.
    }           
};
于 2012-09-04T19:39:49.483 に答える