Animasyon-1 (blok)
Ne işinize yarar bilmem ama yinede görmeye değer.
ÖRNEK
<script language="JavaScript"> <!-- 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'; n=15; //Just the Drag stuff. Scroll down for collision script. function down(e){ if (ie){ if (window.event.srcElement.id.indexOf("G") != -1){ document.onmousemove=move; dz=window.event.srcElement; dy=window.event.offsetY; dx=window.event.offsetX; window.event.srcElement.style.zIndex=n++; } } if (n6){ if (e.target.id.indexOf("G") != -1){ document.onmousemove=move; dz=e.target.style; dx=e.clientX - parseInt(dz.left); dy=e.clientY - parseInt(dz.top); dz.zIndex=n++; } else return true; } } function move(e){ if (dz){ if (ie){ dz.style.pixelLeft=window.event.clientX-dx; dz.style.pixelTop=window.event.clientY-dy+window.document.body.scrollTop; } if (n6){ dz.top=parseInt(e.clientY)-dy; dz.left=parseInt(e.clientX)-dx; } } return false; } function up(){ if (ie||document.getElementById){ document.onmousemove=null; dz=null; } } if (ie||document.getElementById){ document.onmousedown=down; document.onmouseup=up; } //--> </script> <script language="JavaScript"> <!-- Collision Detection by Kurt Grigg @ http://website.lineone.net/~kurt.grigg/javascript blocks=15;//number of blocks /*Use for same size blocks. BD=new Array(); for (i=0; i < blocks; i++) BD[i]=30;//Block size. */ //Get different size blocks. BD=new Array(); for (i=0; i < blocks; i++){ RandomBlockSize=Math.round(20+Math.random()*70); for (j=0; j < blocks; j++){ if (RandomBlockSize == BD[j]){RandomBlockSize=Math.round(20+Math.random()*70);j=0} j++; } BD[i]=RandomBlockSize; } blockcolors=new Array('#ee0000','#00cc00','#0000cc') spread=new Array(); Top=50; ini=-50; for (i=0; i < blocks; i++){ spread[i] = ini+=110; var col1=Math.floor(Math.random()*blockcolors.length); //Draw the blocks. if (ie||n6) document.write('<div id="G'+i+'" style="position:absolute;top:'+Top+'px;left:'+spread[i]+'px;height:'+BD[i]+'px;width:'+BD[i]+';font-size:'+BD[i]+'px;background:'+blockcolors[col1]+'"></div>'); if (n4) document.write('<layer name=G'+i+' top='+Top+' left='+spread[i]+' width='+BD[i]+' height='+BD[i]+' bgcolor='+blockcolors[col1]+'></layer>'); if (i == 4){Top+=110;ini=-50;} if (i == 9){Top+=110;ini=-50;} if (i == 14){Top+=110;ini=-110;} if (i == 19){Top+=110;ini=-110;} } //Draw the ball. ballcolor='#000000'; B=6;//Ball size. if (ie||n6) document.write('<div id="ball" style="position:absolute;top:385px;left:128px;height:'+B+'px;width:'+B+'px;font-size:'+B+'px;background:'+ballcolor+'"></div>'); if (n4) document.write('<layer name="ball" top=385 left=128 width='+B+' height='+B+' bgcolor='+ballcolor+'></layer>'); D=45;//Initial ball direction. Y=385;//Initial ball position. X=128;//Initial ball position. speed=10; preY=0; preX=0; Q=0; ts=0; bs=0; ls=0; rs=0; ty=0; tx=0; by=0; bx=0; ly=0; lx=0; ry=0; rx=0; t=null; function Move(){ t=setTimeout('Move()',30); if (ie){if (B > 10)ball.style.fontSize=1} //Get window height & width. H=(n4||n6)?window.innerHeight:document.body.clientHeight; W=(n4||n6)?window.innerWidth:document.body.clientWidth; //One step at this angle and speed. y=speed*Math.sin(D*Math.PI/180); x=speed*Math.cos(D*Math.PI/180); if (D < 0) D+=360;//Keep angle/degree reading between 0 and 360. Not necessary. //Repeat steps. Y+=y; X+=x; VB=180-D;//Wanted angle after hitting a vertical surface. HB=0-D; //Wanted angle after hitting a horizontal surface. //***************************[The main detection is here]********************************* //Actual distance between horizontal & vertical steps. ay=Y+speed*Math.sin(D*Math.PI/180); ax=X+speed*Math.cos(D*Math.PI/180); dify = Y-ay; difx = X-ax; //Step before impact for all sides. preY=Y+dify; preX=X+difx; for (i=0; i < blocks; i++){ block=eval(d+a+"G"+i+n6r+s);//Your blocks are now called "block". if (ie){ if(BD[i] > 10)block.fontSize=1; } //Get block top, bottom etc positions. TOP=(!ie)?parseInt(block.top):block.pixelTop; BOTTOM=(!ie)?parseInt(block.top)+BD[i]:block.pixelTop+BD[i]; LEFT=(!ie)?parseInt(block.left):block.pixelLeft; RIGHT=(!ie)?parseInt(block.left)+BD[i]:block.pixelLeft+BD[i]; //Work out where the ball was 1 step before contact. //difference between top-centre & pre-hit. ty=(ie)?block.pixelTop - (preY+B/2):parseInt(block.top) - (preY+B/2); tx=(ie)?block.pixelLeft+(BD[i]/2) - (preX+B/2):parseInt(block.left)+(BD[i]/2) - (preX+B/2); ts=Math.sqrt(tx*tx + ty*ty); //difference between bottom-centre & pre-hit! by=(ie)?(block.pixelTop+BD[i]) - (preY+B/2):parseInt(block.top)+BD[i] - (preY+B/2); bx=(ie)?(block.pixelLeft+(BD[i]/2)) - (preX+B/2):parseInt(block.left)+(BD[i]/2) - (preX+B/2); bs=Math.sqrt(by*by + bx*bx); //difference between left-centre & pre-hit! ly=(ie)?(block.pixelTop+(BD[i]/2)) - (preY+B/2):parseInt(block.top)+(BD[i]/2) - (preY+B/2); lx=(ie)?block.pixelLeft - (preX+B/2):parseInt(block.left) - (preX+B/2) ls=Math.sqrt(lx*lx + ly*ly); //difference between right-centre & pre-hit! ry=(ie)?(block.pixelTop+(BD[i]/2)) - (preY+B/2):parseInt(block.top)+(BD[i]/2) - (preY+B/2); rx=(ie)?(block.pixelLeft+BD[i]) - (preX+B/2):parseInt(block.left)+BD[i] - (preX+B/2); rs=Math.sqrt(rx*rx + ry*ry); //Place the ball where it should be on block edge and bounce off at required angle. if((Y+B>TOP)&&(Y<BOTTOM)&&(X+B>LEFT)&&(X<RIGHT)){ //Exact corner hits. //Top left corner hit. if((ts==ls)&&(ts&&ls<rs&&bs)){Y=TOP-B;X=LEFT-B;D=225} //Top right corner hit. if((ts==rs)&&(ts&&rs<ls&&bs)){Y=TOP-B;X=RIGHT;D=315} //Bottom left corner hit. if((bs==ls)&&(bs&&ls<ts&&rs)){Y=BOTTOM;X=LEFT-B;D=135} //Bottom right corner hit. if((bs==rs)&&(bs&&rs<ls&&ts)){Y=BOTTOM;X=RIGHT;D=45} //Top hit. if ((ts<ls)&&(ts<rs)&&(ts<bs)){Q=TOP-(Y+B);Y=TOP-B;X=X+Q*Math.cos(D*Math.PI/180);D=HB;ts=0;Q=0} //Left hit. if ((ls<ts)&&(ls<rs)&&(ls<bs)){Q=LEFT-(X+B);Y=Y+Q*Math.sin(D*Math.PI/180);X=LEFT-B;D=VB;ls=0;Q=0} //Bottom hit. if ((bs<ls)&&(bs<rs)&&(bs<ts)){Q=BOTTOM-Y;Y=BOTTOM;X=X-Q*Math.cos(D*Math.PI/180);D=HB;bs=0;Q=0} //Right hit. if ((rs<ts)&&(rs<ls)&&(rs<bs)){Q=RIGHT-X;Y=Y-Q*Math.sin(D*Math.PI/180);X=RIGHT;D=VB;rs=0;Q=0} }//End loop. }//End main if. //***************************[End main detection]********************************* //Screen edge rebounds. if(Y<1){Y=1;D=HB} if(Y+B>H){Y=H-1-B;D=HB} if(X<1){X=1;D=VB} if(X+B>W){X=W-1-B;D=VB} //Screen corner rebounds. Not necessary but looks nice! if((Y<1)&&(X<1)){Y=1;X=1;D=45} if((Y<1)&&(X+B>W)){Y=1;X=W-B;D=135} if((Y+B>H)&&(X<1)){Y=H-B;X=1;D=315} if((Y+B>H)&&(X+B>W)){Y=H-B;X=W-B;D=225} //Assign the ball to the X & Y positions. b=eval(d+a+"ball"+n6r+s); b.top=Y; b.left=X; } Move(); //--> </script> <script language="JavaScript"> <!-- Netscape4 (empty layer) drag script by Peter Belesis http://www.webreference.com/dhtml if (n4){ nx = 0; ny = 0; nz = null; function ndown(e){ mx = e.pageX; my = e.pageY; for (i=0; i < document.layers.length; i++){ tl = document.layers[i]; if (tl.id.indexOf("G") == -1 ) { continue } if ((mx > tl.left) && (mx < (tl.left + tl.clip.width)) && (my > tl.top) && (my < (tl.top + tl.clip.height))) nz = tl; } if (nz == null) { return }; if (nz != onlayer){ nz.moveAbove(onlayer) onlayer = nz; } nx = e.pageX; ny = e.pageY; document.captureEvents(Event.MOUSEMOVE); document.onmousemove = nmove; } function nmove(e){ dx = (e.pageX - nx); dy = (e.pageY - ny); nx = e.pageX; ny = e.pageY; nz.moveBy(dx,dy); return false; } function ndrop(){ document.releaseEvents(Event.MOUSEMOVE); nz = null; } document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP); document.onmousedown = ndown; document.onmouseup = ndrop; onlayer = document.elementName; } //--> </script>
Copyright © 2002-2004 www.javascriptbankasi.com.tr.tc
Mail:javascriptbankasi@hotmail.com