好酷的球體下墜碰撞彈跳特效_計算轉換特效

超級酷的球體下墜碰撞彈跳效果，JavaScript完成的特效，小球從天而降，砸落到其它球體上，通過JS的算法會使相互碰撞的球體相互作用，總是會給下落的球體“讓道”，如果沒有讓道，請你用鼠標幫它一下，它又開始下落了，而且速度會越來越快。

<html>
<head>
<title>小球下墜碰撞特效</title>
<style type="text/css">
body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#eee; left:0; top:0; width:100%; height:100%;}
img {position:absolute;left:-1000;}
</style>
<script type="text/javascript"><!--
window.onerror = new Function("return true");
document.onselectstart = new Function("return false");
o   = new Object();
xm  = 0;
ym  = 0;
nx  = 0;
ny  = 0;
img = 0;
bO  = 0;
BX  = 0;
BY  = 0;
WB  = 0;
VX  = 0;
VY  = 0;
X   = 0;
Y   = 0;
xZ  = 0;
yZ  = 0;
M   = false;
Nb  = 0;
SP  = 0;
DS  = 70 
document.onmousemove = function(e){
	if (!e) e = window.event;
	xm = (e.x || e.clientX);
	ym = (e.y || e.clientY);
	return false;
}
function resize() {
	nx = document.body.offsetWidth;
	ny = document.body.offsetHeight;
	N = Math.round(.001*(nx*nx)/DS);
	SP = ny/40;
	VY = -SP;
	if(N>Nb){
		for(i=Nb;i<N;i++)o[i] = new CObj(img[(i%img.length)]);
		Nb = N;
	} else {
		bN=Nb, Nb=N;
		for(i=N;i<bN;i++)document.body.removeChild(o[i].O);
	}
}
onresize = resize;
document.onmousedown = function(e){
	if (!e) e = window.event;
	tg = (e.target) ? e.target : e.srcElement;
	if(tg==bO){
		M = true;
		xZ = X-xm;
		yZ = Y-ym;
		bO.style.cursor="move";
	}
	return false;
}

document.onmouseup = function(){
	M = false;
	bO.style.cursor="pointer";
	VY=-SP;
}

CObj = function(img) {
	this.W  = img.width*.5;
	this.x  = Math.round(nx*Math.random());
	this.y  = Math.round(ny*Math.random());
	this.vx = 0;
	this.vy = 0;
	this.O = document.createElement("img");
	this.O.src = img.src;
	this.O.style.zIndex = this.W;
	document.body.appendChild(this.O);
}

function mainloop(){
	if(!M){
		BY=((ny*.7)-(Y+WB))/(SP*.9);
		BX=((nx*.5)-X)/(SP*2);
		Y+=BY;
		X+=BX;
	} else {
		X=xm+xZ;
		Y=ym+yZ;
		VX *=.96;
		BX *=.96;
		VY *=.96;
		BY *=.96;
	}

for(i=0;i<Nb;i++){
		with(o[i]){

dx = (x+W)-(X+WB);
			dy = (y+W)-(Y+WB);
			d = Math.sqrt(dx*dx+dy*dy);

if(d<=W+WB){
				d = (W+WB)-d;
				ang = Math.atan2(dy, dx);
				dx = d * Math.cos(ang);
				dy = d * Math.sin(ang);
				X-=dx;
				Y-=dy;
				if(M){
					vx+=dx/100;
					vy+=dy/100;
				}
			}

x+=VX+BX+vx;
			y+=VY+BY+vy;

if(x>nx || x<-W*2 || y<-W*2){
				x  = -W*4+Math.round((nx+W*4)*Math.random());
				if(x>nx || x<-W*2){
					y  = Math.round(ny*Math.random());
				} else y  = ny;
				vx = .5*(Math.random()-.5);
				vy = .5*(Math.random()-.5);
			}

O.style.left = x;
			O.style.top  = y;
		}
	}

bO.style.left = X;
	bO.style.top  = Y;

setTimeout("mainloop()",16);
}

onload = function() {
	img = document.getElementById("images").getElementsByTagName("img");
	bO  = document.getElementById("bool");
	WB  = Math.max(bO.width,bO.height)/2;
	resize();
	X = nx/2-WB;
	Y = ny/2-WB;
	VY=-SP;
	mainloop();
}
//-->
</script>
</head>
<body>
<img id="bool" src="http://www.zhaotila.cn/jscss/demoimg/200908/b1.gif" style="z-index:2000;cursor:pointer">
<div id="images" style="visibility:hidden">
<img src="/jscss/demoimg/200908/c11.gif">
<img src="/jscss/demoimg/200908/c12.gif">
</div>
</body>
</html>

所屬頻道：計算轉換特效/更新時間：2012-10-28

[收藏][報錯][返回列表]

相關計算轉換特效：

好酷的球體下墜碰撞彈跳特效_計算轉換特效

計算轉換特效Rss訂閱特效代碼搜索

計算轉換特效推薦

猜你也喜歡看這些