//x,y是圆心坐标
this.x=x;
this.y=y;
this.r=20;
//小球颜色
this.color=‘white’;
this.init();
//小球和y的增量y
this.dx=parseInt(Math.random()*20)-10;
this.dy=parseInt(Math.random()*20)-10;
ballarr.push(this);//这里的this不是类本身,而是实例
}
Ball.prototype.init=function(){
this.dom=document.createElement(‘div’);
this.dom.className=‘ball’;
this.dom.style.width=this.r*2+‘px’;
this.dom.style.height=this.r*2+‘px’;
this.dom.style.left=this.x-this.r+‘px’;
this.dom.style.top=this.y-this.r+‘px’;
this.dom.style.backgroundColor=this.color;
//上树
document.body.appendChild(this.dom);
}
Ball.prototype.update=function(){
this.x +=this.dx;
this.y +=this.dy;
this.dom.style.width=this.r*2+‘px’;
this.dom.style.height=this.r*2+‘px’;
this.dom.style.left=this.x-this.r+‘px’;
this.dom.style.top=this.y-this.r+‘px’;
}
var ballarr=[];
setInterval(function(){
for(var i=0;i<ballarr.length;i++){
ballarr[i].update();
}
},20)
document.οnmοusemοve=function(e){
var x=e.clientX;
var y=e.clientY;
new Ball(x,y);
//当new一个实例的时候,首先会对小球进行初始化,并且渲染到dom,然后这个实例会被追加到数组里。
//定时器会遍历每一个数组,然后更新小球的轨迹
//而当鼠标移动的时候,把获得的鼠标定位传入实例,
//只要不断地移动鼠标,就能不断地创建运动轨迹不一样的实例
}