Javascript对象颜色动态变化
Javascript object color change dynamically?
这是当两个球碰撞时将球的颜色更改为红色的代码。我快到了,但我似乎没有发现问题,因为一个球没有改变颜色。伙计们,请帮帮我!!
//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
球都在碰撞;碰撞的公式是正确的,即:
(dx * dx) + (dy * dy) <= sum of the circles' radii
问题是,由于JavaScript的单线程特性,以及if
中重置颜色的else
部分,有时屏幕不会更新以反映新颜色。
例如,当ball[0]
与ball[1]
碰撞时,在if
中将ball[0]
的颜色设置为red
,这是OK。但是,如果ball[0]
在内部循环(j=2
)的下一次迭代中没有与ball[2]
冲突,例如,它将将ball[0]
的颜色重置回其原始颜色,并且由于屏幕将仅在[/strong>之后渲染,因此循环结束(同样,由于JavaScript的单线程特性),在这种情况下,您永远看不到red
颜色。
所以,你有两个选择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
而不是0
开始。这样,不仅可以减少碰撞测试的数量,还可以删除i != j
测试。
演示。
如果你想在碰撞发生后保持红色,你需要设置球的颜色:
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.
}
};
相关文章:
- Javascript对象颜色动态变化
- 如何将(a*b)两个输入文本值相乘,并在javascript中随文本变化动态显示
- Jquery手机单页app+视频+动态变化视频
- 如何在浏览器宽度/高度变化时动态调整图像网格的大小
- Twitter Bootstrap - 带有动态变化插入的工具提示
- 如何动态检测浏览器视口大小的变化
- 如何根据动态变化的百分比值为图像上色
- HighCharts.js TickInterval动态变化
- 如何在svg高度动态变化时使用viewbox
- 如何根据高图中的值获得动态颜色变化
- JS触发的复选框's已检查属性;t动态变化
- 在交互式图表中动态缩放数据,其中数据会发生变化
- 如果两个值都会动态变化,则用变量替换某个字符串的一部分 - Javascript
- 聚合物动态变化数据阵列
- 如何检测表中动态行的列中的值变化
- jQuery UI - 多个动态生成的滑块和函数,每个滑块和函数都会发生变化
- 有没有办法防止选择菜单在值动态变化时关闭
- 动态变化的角度全局值
- jquery动态位置变化
- 如何使jQuery UI对话框占据整个窗口,并根据窗口大小的变化动态调整