Databases
StackOverflow2013
Postsdbo
POJavascript object color change dynamically?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript object color change dynamically?
    text
    copied!<p>Here's the code to change color of balls to red when two balls collide.I'm almost there but but i don't seem to find the fault because one ball is not changing the color.Please help me out guys!! </p> <pre><code> //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 = $('&lt;p class="circle"&gt;&lt;/p&gt;').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 &lt; 0 || this.center.x + radius &gt; this.boundaryWidth ) { this.dx = -this.dx; } if (this.center.y - radius &lt; 0 || this.center.y + radius &gt; 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 &lt; 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 &lt; balls.length; i++){ for(var j=0;j&lt;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) &lt;= 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 &lt; balls.length; i++){ balls[i].move(); } setTimeout(loop, 8); }; </code></pre> <p>Here's the jsbin : <a href="http://jsbin.com/imofat/790/edit" rel="nofollow">http://jsbin.com/imofat/790/edit</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload