Fly

Posted .


Had a little fun writing some Javascript today.



Click this button:







Assuming your browser is compatible, the starfield in the background should move depending on your mouse movements.



Cool, huh? Reminds me of an old Atari 800 game, Star Raiders.



If you want to see the actual code, click below to continue reading.


This entry was written in part while under the influence of "Vive le Rock" by Adam & The Ants/Adam Ant, off the Antics in the Forbidden Zone album.


<script nonce="+57nDri8pG5NXJKwqd2f2vig3DtwL2NCGlyrpyAwLYI="><br /> //"Flying" script Copyright 2003 by Eric James Stone<br /> //Permission is granted to reproduce this script provided<br /> //that any page using it link to http://ericjamesstone.com</p> <p>var interval=100;<br /> var vx=0;<br /> var vy=0;<br /> ycurrpos=0;<br /> xcurrpos=0;<br /> fly=false;</p> <p>function bgScroll(){<br /> if (fly){<br /> xcurrpos=xcurrpos+vx;<br /> if (xcurrpos>199) xcurrpos=xcurrpos*1-199;<br /> if (xcurrpos<-199) xcurrpos=xcurrpos*1+199; ycurrpos=ycurrpos+vy; if (ycurrpos>200) ycurrpos=ycurrpos*1-200;<br /> if (ycurrpos<-200) ycurrpos=ycurrpos*1+200; document.body.style.backgroundPosition=Math.round(xcurrpos)+"px "+Math.round(ycurrpos)+"px"; setTimeout(bgScroll,interval); } } function moMove(e){ if (!e) e = window.event; cX=e.clientX; cY=e.clientY; h=document.getElementsByTagName('HTML')[0].offsetHeight; w=document.getElementsByTagName('HTML')[0].offsetWidth; vx=-(cX-w/2)/(w/16); vy=-(cY-h/2)/(h/16); } function initFlyer(){ document.onmousemove = moMove; fly=true; document.getElementById("flyButton").value="Stop Flying"; setTimeout(bgScroll,interval); } function endFlyer(){ document.onmousemove=""; document.getElementById("flyButton").value="Fly"; fly=false; } </SCRIPT>


You also need the button code:



<input type="button" id=flyButton value="Fly" onclick="fly?endFlyer():initFlyer();" style="width:100px;text-align:center;">