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

我從來沒有在JavaScript中使用過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)); 
    } 
    } 
} 

儘管如此，有一些事情需要改進：如

• 球改變顏色只要是對方內線，不只是一次。
• 如果你想讓他們「觸摸」，你可能想要實現某種彈跳效果，使其更逼真。