볼 바운스 - javascript

Question

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

저는 자바 스크립트에서 oops 개념을 사용한 적이 없습니다. 공이 서로 닿으면 볼 색을 어떻게 바꿀 수 있습니까? http://jsbin.com/imofat/1/edit

Answer 1

당신은 볼과의 상호 작용이없는 :

이

는 링크입니다. 당신이 할 수있는 것은 두 개의 공이 서로 "안쪽"에 있는지 확인하고, 그 경우에 색을 바꾸는 것입니다 : 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); 
}; 

과 :

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

그럼에도 불구하고, 개선을위한 일이 있습니다 :

• 공은 변화하는 색상만큼 그들은 서로 내부에있는대로, 그냥 한 번.
• "터치"하고 싶다면 좀 더 사실적으로 만들기 위해 어떤 종류의 튀는 효과를 구현하는 것이 좋습니다.