<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" ></script>
		<style>
			*{ margin: 0; padding: 0;}
			body,html{width: 100%; height: 100%;}
			canvas{display: block;}
			#mycanvas{background: #001022;}
			#mybuttons{position: absolute; bottom: 20px; left: 20px;}
			#mybuttons button{ padding: 5px;}
		</style>
	</head>
	<body>
		<canvas id="mycanvas" width="500" height="500"></canvas>
		<div id="mybuttons">
			<button id="startAnimation">开始</button>
			<button id="stopAnimation">停止</button>
		</div>
	</body>
	<script>
		$(function(){
			var canvas=$('#mycanvas');
			var ctx=canvas.get(0).getContext('2d');
			
			var canvasWidth=canvas.width();
			var canvasHeight=canvas.height();
			
			$(window).resize(resizeCanvas);
			function resizeCanvas(){
				$('#mycanvas').attr('height',$(window).get(0).innerHeight);
				$('#mycanvas').attr('width',$(window).get(0).innerWidth);
				canvasWidth=canvas.width();
				canvasHeight=canvas.height();
			}
			resizeCanvas();
			
			var playAnimation=true;
			var startButton=$("#startAnimation");
			var stopButton=$("#stopAnimation");
			
			startButton.hide();
			startButton.click(function(){
				$(this).hide();
				stopButton.show();
				playAnimation=true;
				animate();
			})
			stopButton.click(function(){
				$(this).hide();
				startButton.show();
				playAnimation=false;
			})
			var Asteroid=function(x,y,radius,mass,vX,vY,aX,aY){
				this.x=x;
				this.y=y;
				this.radius=radius;
				this.mass=mass;
				
				this.vX=vX;
				this.vY=vY;
				
				this.aX=aX;
				this.aY=aY;
			}
			var asteroid=new Array();
			for(var i=0;i<40;i++){
				var x=20+(Math.random()*(canvasWidth-40));
				var y=20+(Math.random()*(canvasHeight-40));
				var radius=5+Math.random()*10;
				
				var mass=radius/2;
				
				var vX=Math.random()*4-2;
				var vY=Math.random()*4-2;
				
				var aX=0;
				var aY=0;
				
				asteroid.push(new Asteroid(x,y,radius,mass,vX,vY,aX,aY));
			}
			function animate(){
				ctx.clearRect(0,0,canvasWidth,canvasHeight);
				ctx.fillStyle='rgb(255,255,255)';
				
				var asteroidLength=asteroid.length;
				for(var i=0;i<asteroidLength;i++){
					var tmpAsteroid=asteroid[i];
					tmpAsteroid.x+=tmpAsteroid.vX;
					tmpAsteroid.y+=tmpAsteroid.vY;
					
//					if(Math.abs(tmpAsteroid.vX)>0.1){
//						tmpAsteroid.vX*=0.9;
//					}else{
//						tmpAsteroid.vX=0;
//					};
//					if(Math.abs(tmpAsteroid.vY)>0.1){
//						tmpAsteroid.vY*=0.9;
//					}else{
//						tmpAsteroid.vY=0;
//					};
					
					for(var j=i+1;j<asteroidLength;j++){
						var tmpAsteroidB=asteroid[j];
						var dX=tmpAsteroidB.x-tmpAsteroid.x;
						var dY=tmpAsteroidB.y-tmpAsteroid.y;
						var distance=Math.sqrt((dX*dX)+(dY*dY));
					
						if(distance<tmpAsteroid.radius+tmpAsteroidB.radius){
							var angle=Math.atan2(dY,dX);
							var sine=Math.sin(angle);
							var cosine=Math.cos(angle);
							
							var x=0;
							var y=0;
							var xB=dX*cosine+dY*sine;
							var yB=dY*cosine-dX*sine;
							
							var vX=tmpAsteroid.vX*cosine+tmpAsteroid.vY*sine;
							var vY=tmpAsteroid.vY*cosine-tmpAsteroid.vX*sine;
							
							var vXb=tmpAsteroidB.vX*cosine+tmpAsteroidB.vY*sine;
							var vYb=tmpAsteroidB.vY*cosine-tmpAsteroidB.vX*sine;

							var vTotal=vX-vXb;
							vX=((tmpAsteroid.mass-tmpAsteroidB.mass)*vX+2*tmpAsteroidB.mass*vXb)/(tmpAsteroid.mass+tmpAsteroidB.mass)
							vXb=vTotal+vX;
							
							xB=x+(tmpAsteroid.radius+tmpAsteroidB.radius);
							tmpAsteroid.x=tmpAsteroid.x+(x*cosine-y*sine);
							tmpAsteroid.y=tmpAsteroid.y+(y*cosine+x*sine);
							
							tmpAsteroidB.x=tmpAsteroid.x+(xB*cosine-yB*sine);
							tmpAsteroidB.y=tmpAsteroid.y+(yB*cosine+xB*sine);
							
							tmpAsteroid.vX=vX*cosine-vY*sine;
							tmpAsteroid.vY=vY*cosine+vX*sine;
						
							tmpAsteroidB.vX=vXb*cosine-vYb*sine;
							tmpAsteroidB.vY=vYb*cosine+vXb*sine;
							
						}
					}
					
					if(tmpAsteroid.x-tmpAsteroid.radius<0){
						tmpAsteroid.x=tmpAsteroid.radius;
						tmpAsteroid.vX*=-1;
						tmpAsteroid.aX*=-1;
					}else if(tmpAsteroid.x+tmpAsteroid.radius>canvasWidth){
						tmpAsteroid.x=canvasWidth-tmpAsteroid.radius;
						tmpAsteroid.vX*=-1;
						tmpAsteroid.aX*=-1;
					}
					if(tmpAsteroid.y-tmpAsteroid.radius<0){
						tmpAsteroid.y=tmpAsteroid.radius;
						tmpAsteroid.vY*=-1;
						tmpAsteroid.aY*=-1;
					}else if(tmpAsteroid.y+tmpAsteroid.radius>canvasHeight){
						tmpAsteroid.y=canvasHeight-tmpAsteroid.radius;
						tmpAsteroid.vY*=-1;
						tmpAsteroid.aY*=-1;
					}
					
					if(Math.abs(tmpAsteroid.vX)<10){
						tmpAsteroid.vX+=tmpAsteroid.aX;
					}
					if(Math.abs(tmpAsteroid.vY)<10){
						tmpAsteroid.vY+=tmpAsteroid.aY;
					}
					
					ctx.beginPath();
					ctx.arc(tmpAsteroid.x,tmpAsteroid.y,tmpAsteroid.radius,0,Math.PI*2,false);
					ctx.closePath();
					ctx.fill();
				}
				if(playAnimation){
					setTimeout(animate,33);
				}
				
			}
			animate();			
	})
	</script>
</html>