JavaScript 객체에 대한 작은 공 충돌의 기본 원리

중점과 난점을 주로 기록하다

	
function PZ(options){
	this.kwidth= options.kwidth || 600;
	this.kheight= options.kheight || 400;
	this.kclass=options.kclass || "";
	this.bwidth= options.bwidth || 40;
	this.bheight= options.bheight || 40;
	this.bclass=options.bclass || "";
	this.bnum=options.bnum || 1;
	this.balls=[];
	this.K;
	
	this.ck=function(){
		
		this.K=document.createElement("div");
		this.K.style.width=this.kwidth+"px";
		this.K.style.height=this.kheight+"px";
		this.K.className=this.kclass
		document.body.appendChild(this.K);
		
	}
	
	this.cb=function(){
		
		for(var i=0;i<this.bnum;i++){
			var el=document.createElement("div");
			var reg=2*Math.random()*Math.PI;//    ，   
			var bcolor=this.colors();
			var sudu=this.sudu();
			this.balls.push({el:el,reg:reg,x:this.kwidth/2,y:this.kheight/2,bcolor:bcolor,sudu:sudu});
			
			el.style.width=this.bwidth+"px";
			el.style.height=this.bheight+"px";
			el.style.backgroundColor=bcolor;
			el.className=this.bclass
			this.K.appendChild(el);
		}
	}
	
	this.colors=function(){
		var bcolor="";
			for(var j=0;j<3;j++){
				bcolor+=parseInt(Math.random()*255)+",";
			}
			return "rgba("+bcolor+Math.random()+")";
	}
	
	this.sudu=function(){
		return parseInt(Math.random()*10+5);
	}
	
	this.bmove=function(){	
		
		for(var i=0;i<this.balls.length;i++){
			var sudu=this.balls[i].sudu;
			this.balls[i].x=this.balls[i].x+sudu*Math.cos(this.balls[i].reg);
			this.balls[i].y=this.balls[i].y+sudu*Math.sin(this.balls[i].reg);
			this.balls[i].el.style.backgroundColor=this.balls[i].bcolor;
			this.balls[i].el.style.top=this.balls[i].y+"px";
			this.balls[i].el.style.left=this.balls[i].x+"px";
			
			if(this.balls[i].y>this.kheight-this.bheight || this.balls[i].y<0){
				this.balls[i].reg=-this.balls[i].reg;
				this.balls[i].bcolor=this.colors();
			}
			
			if(this.balls[i].x>this.kwidth-this.bwidth || this.balls[i].x<0){
				this.balls[i].reg=Math.PI-this.balls[i].reg;
				this.balls[i].bcolor=this.colors();
			}	
		}
		
		//setTimeout(this.bmove.bind(this),400);
		requestAnimationFrame(this.bmove.bind(this));
		//console.log(this.balls[0].bcolor);
		
	}
	
	this.init=function(){
		this.ck();
		this.cb();
		this.bmove();
	}
	}

	var z=new PZ({
		kwidth:1000,
		kheight:800,
		kclass:"main",
		bclass:"ball",
		bwidth:60,
		bheight:60,
		bnum:62});
	
	z.init();
	
	var z2=new PZ({kwidth:600,
				   kheight:400,
				   kclass:"main",
				   bclass:"ball",
				   bnum:22});
	
	z2.init();
	

어려운 점은 한 공의 초기 운동 방향 알고리즘에 있다
var reg=2*Math.random()*Math.PI;//초기 각도
여기에 삼각 함수를 사용하여 0~2π의 각도(호도제)를 만들었다
this.balls[i].x=this.balls[i].x+8*Math.cos(this.balls[i].reg); this.balls[i].y=this.balls[i].y+8*Math.sin(this.balls[i].reg);
경계를 넘어 반등하는 것도 삼각함수의 특성을 사용해 수학적 기초의 중요성을 알 수 있다.
if(this.balls[i].y>this.kheight-this.bheight || this.balls[i].y<0){                 this.balls[i].reg=-this.balls[i].reg;  }               if(this.balls[i].x>this.kwidth-this.bwidth || this.balls[i].x<0){                 this.balls[i].reg=Math.PI-this.balls[i].reg; }    
기존 setTimeout, setInterval 등과 비교할 수 있는 새로운 애니메이션 API
requestAnimationFrame(this.bmove.bind(this));
이곳의 구덩이는this다.bmove.bind(this)는 일반적으로 우리가 사용할 때 직접 쓰는 방법이지만 현재는 대상을 대상으로 하는this를 사용했기 때문에 일부 문제가 발생했다. 구체적인 문제와 분석은 setInterval과 setTimeout의this지향문제에 대한 것이다.