76、页面中撞击的小球

76、页面中撞击的小球

脚本说明:

第一步:把如下代码加入<body>区域中

<script language="JavaScript">

<!--

 

function link(){

alert("Demo only - Goes to first page of your site.");

}

 

//Size of stationary ball.

F=90;

 

//Moving ball sizes. Add to array for more balls, min 2.

S=new Array(90,20,30,40,50)

 

//Speeds.

min=10;

max=30;

 

//Alter nothing past here.

n6=(document.getElementById&&!document.all);

n4=(document.layers);

ie=(document.all);

 

d=(n4||ie)?'document.':'document.getElementById("';

a=(n4||n6)?'':'all.';

n6r=(n6)?'")':'';

s=(n4)?'':'.style';

TY=0;

TX=0;

I=new Array();

P=new Array();

HT=new Array();

HY=new Array();

HX=new Array();

Y=new Array();

X=new Array();

A=new Array();

PY=new Array();

PX=new Array();

CR=new Array();

D=new Array();

B=new Array();

SP=new Array();

SP2=new Array();

Q=new Array();

CY=new Array();

CX=new Array();

IL=new Array();

ILS=new Array();

TD=new Array();

SH=new Array();

L=new Array();

p1x=new Array();

p1y=new Array();

p2x=new Array();

p2y=new Array();

CY=new Array();

CX=new Array();

FDS=new Array();

DS=new Array();

 

if (ie){

document.write("<a href='javascript:link()'><img src='ballB.gif' border='0' height='"+F+"' width='"+F+"' id='still' style='position:absolute;top:300px;left:438px;width:"+F+";height:"+F+"'></a>");

}

if (n6){

document.write("<div id='still' style='position:absolute;top:179px;left:438px;width:"+F+";height:"+F+";cursor:move'>");

document.write("<img src='ballB.gif' height='"+F+"' width='"+F+"'>");

document.write("</div>");

}

if (n4){

document.write("<layer name='still' top=200 left=450>");

document.write("<img src='ballB.gif' height='"+F+"' width='"+F+"'>");

document.write("</layer>");

}

for (i=0; i < S.length; i++){

if (ie){

document.write("<img id='move"+i+"' src='ballA.gif' height='"+S[i]+"' width='"+S[i]+"' style='position:absolute;top:0px;left:0px;height:"+S[i]+";width:"+S[i]+"'>");

}

if (n6){

document.write("<div id='move"+i+"' style='position:absolute;top:0px;left:0px;height:"+S[i]+";width:"+S[i]+"'>");

document.write("<img src='ballA.gif' height='"+S[i]+"' width='"+S[i]+"'>");

document.write("</div>");

}

if (n4){

document.write("<layer name='move"+i+"' top=0 left=0>");

document.write("<img src='ballA.gif' height='"+S[i]+"' width='"+S[i]+"'>");

document.write("</layer>");

}

 

Y[i]=10;

X[i]=10;

D[i]=30;

SP[i]=min+Math.floor(Math.random()*max);

SP2[i]=SP[i];

}

 

 

function Move(){

H=(n4||n6)?window.innerHeight:document.body.clientHeight;

W=(n4||n6)?window.innerWidth:document.body.clientWidth;

T1=eval(d+a+"still"+n6r+s);

R1=F/2;

T1.top=H/2-R1;

T1.left=W/2-R1;

//center of stationary ball!!

TY=(ie)?T1.pixelTop+F/2:parseInt(T1.top)+F/2;

TX=(ie)?T1.pixelLeft+F/2:parseInt(T1.left)+F/2;

for (i=0; i < S.length; i++){

T2=eval(d+a+"move"+i+n6r+s);

R2=S[i]/2;

CR[i]=R2+R1;

//center of moving balls!!

PY[i]=(ie)?T2.pixelTop+S[i]/2:parseInt(T2.top)+S[i]/2;

PX[i]=(ie)?T2.pixelLeft+S[i]/2:parseInt(T2.left)+S[i]/2;

//Angle between center of balls and still!!

ay=PY[i]-TY;

ax=PX[i]-TX;

A[i]=Math.atan2(ay,ax)*180/Math.PI;

if (A[i] < 0) A[i]+=360;

//Shortest distance between centre's of stationary and moving balls!!

dx=TY-PY[i];

dy=TX-PX[i];

DS[i]=Math.sqrt(dx*dx+dy*dy);

FDS[i] = Math.floor(DS[i]);

Q[i]=(FDS[i]-CR[i]);

if (Q[i] < 0) Q[i]=0;

//The following is based on a standard line/circle intersection routine.

B[i]=R1/R2+1;

CY[i]=PY[i]-(DS[i]/B[i])*Math.sin(A[i]*Math.PI/180);

CX[i]=PX[i]-(DS[i]/B[i])*Math.cos(A[i]*Math.PI/180);

//Line start point!!

p1y[i]=CY[i];

p1x[i]=CX[i];

//Line end point!!

p2y[i]=CY[i]+1*Math.sin(D[i]*Math.PI/180);

p2x[i]=CX[i]+1*Math.cos(D[i]*Math.PI/180);

L[i]=(p2x[i]-p1x[i])*(p2x[i]-p1x[i])+(p2y[i]-p1y[i])*(p2y[i]-p1y[i]);

//Travelling towards if SH is less than zero.

SH[i]=2*((p2x[i]-p1x[i])*(p1x[i]-TX)+(p2y[i]-p1y[i])*(p1y[i]-TY));

TD[i]=TX*TX+TY*TY+p1x[i]*p1x[i]+p1y[i]*p1y[i]-2*(TX*p1x[i]+TY*p1y[i])-R1*R1;//OK!

//Contact possible if IL is greater than zero!

IL[i]=SH[i]*SH[i]-4*L[i]*TD[i];

ILS[i]=Math.sqrt(IL[i]);

HT[i]=(-SH[i]-ILS[i])/(2*L[i]);

HX[i]=p1x[i]+HT[i]*(p2x[i]-p1x[i]);//Contact point x.

HY[i]=p1y[i]+HT[i]*(p2y[i]-p1y[i]);//Contact point y. 

//Required angle.

a1= HY[i]-TY;

a2= HX[i]-TX;

I[i]=Math.atan2(a1,a2)*180/Math.PI;

if (I[i] < 0) I[i]+=360;

//Distance to impact point.

d1=HY[i]-CY[i];

d2=HX[i]-CX[i];

P[i]=Math.floor(Math.sqrt(d1*d1+d2*d2)*2);

//Error adjust. For this situation only!

if (Q[i] <= 0) Q[i]=0;

if (SP[i] == 0) Q[i]=0;

E=(R1 > R2)?SP[i]*2:SP[i];

 

if ((P[i] <= E) && (IL[i] > 1) && (SH[i] < 0)){

SP[i]=0;

Y[i]=(TY-R2)+CR[i]*Math.sin(I[i]*Math.PI/180);

X[i]=(TX-R2)+CR[i]*Math.cos(I[i]*Math.PI/180);

}

if ((Q[i] == 0) && (SH[i] <= -1)){

D[i]=A[i]*2-180-D[i];

SP[i]=SP2[i];

}

if (D[i] < 0) D[i]+=360;

Y[i]+=SP[i]*Math.sin(D[i]*Math.PI/180);

X[i]+=SP[i]*Math.cos(D[i]*Math.PI/180);

VB=180-D[i];

HB=0-D[i];

//Edge rebounds!

if(Y[i]<1){Y[i]=1;D[i]=HB} 

if(Y[i]+S[i]>H){Y[i]=H-S[i];D[i]=HB} 

if(X[i]<1){X[i]=1;D[i]=VB}     

if(X[i]+S[i]>W){X[i]=W-S[i];D[i]=VB}

//Corner rebounds! not necessary but looks nice.

if((Y[i]<1)&&(X[i]<1)){Y[i]=1;X[i]=1;D[i]=45}

if((Y[i]<1)&&(X[i]+S[i]>W)){Y[i]=1;X[i]=W-S[i];D[i]=135}

if((Y[i]+S[i]>H)&&(X[i]<1)){Y[i]=H-S[i];X[i]=1;D[i]=315}

if((Y[i]+S[i]>H)&&(X[i]+S[i]>W)){Y[i]=H-S[i];X[i]=W-S[i];D[i]=225}

T2.top=Y[i];

T2.left=X[i];

}//end loop!

setTimeout('Move()',20);

}

//-->

</script>

 

 

 

第二步:把<body>中的内容改为:

<body onload="Move()">

 

Write a comment

Comments: 0