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; }    
新しいアニメーションAPIは、古いsettimeout、setIntervalなどより優れています.
requestAnimationFrame(this.bmove.bind(this));
ここの穴はthisです.bmove.bind(this)は、一般的には直接書く方法ですが、現在はオブジェクト向けにthisを使用しています.これはいくつかの問題を引き起こしています.具体的な問題と分析はsetIntervalとsettimeoutのthis指向問題について参照してください.