Note that there are some explanatory texts on larger screens.

plurals
  1. POChanging color of Javascript class object dynamically?
    primarykey
    data
    text
    <p>I want to change the color of the balls to red when they collide. I tried using my function <code>check()</code> to change the color of the balls when they collide using <code>balls[i].color</code> but how do I know the positions of the balls to compare when they collide?</p> <pre><code>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(x==y){ balls[i].color='#ff0000'; alert("y"); } else{ } }} setTimeout(check,8); }; loop = function(){ for (var i = 0; i &lt; balls.length; i++){ balls[i].move(); } setTimeout(loop, 8); }; </code></pre> <p><a href="http://jsbin.com/imofat/743/edit" rel="nofollow">http://jsbin.com/imofat/743/edit</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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