Wiggly worm made of blocks effect from RV's free DHTML and JavaScript scripts

BLOCK WORM

This script has been tested on and shown to work with the following browsers: Internet Explorer version 7 and above Google Chrome version 4 and above Mozilla Firefox version 2 and above Apple Safari version 5 and above Opera version 9 and above (including Opera mobile) Android Browser version 3 and above

07-Mar-2014: New onload handler. Fixed screen resizing bug. 29-Jan-2012: Updated and improved to give more 'wormlike' behaviour. 21-Nov-2005: First release.
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var colours=new Array("#ffffff", "#f9f3ff", "#f7eeff", "#eeddff", "#e6ccff", "#ddbbff", "#d5aaff", "#cc99ff"); // select colours to fade from background colour to worm colour var border="#9933ff"; // colour of border var speed=80; // speed of animation, lower is faster var worm=24; // length of worm var size=20; // size of blocks /**************************\ Block Worm Graphic Effect * (c)2005-14 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \**************************/ var swide, shigh; var blox=new Array(); var bloy=new Array(); var bloc=new Array(); var blok=new Array(); var blot=new Array(); var dx, dy; var x, y; var c=0; var pete=speedworm/colours.length; var boddie; if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addRVLoadEvent(blocky_the_worm); function blocky_the_worm() { if (document.getElementById) { var i, d, s; boddie=document.createElement("div"); boddie.style.position="fixed"; boddie.style.top="0px"; boddie.style.left="0px"; boddie.style.width="1px"; boddie.style.height="1px"; boddie.style.overflow="visible"; boddie.style.backgroundColor="transparent"; document.body.appendChild(boddie); size+=4; set_width(); x=4+sizeMath.floor(swide/(size2)); y=4+sizeMath.floor(shigh/(size2)); for (i=0; i<worm; i++) { d=document.createElement("div"); s=d.style; s.width=(size-4)+"px"; s.height=(size-4)+"px"; s.overflow="hidden"; s.position="absolute"; s.border="1px solid "+border; blok[i]=s; boddie.appendChild(d); bloc[i]=-1; blox[i]=x; bloy[i]=y; blot[i]=false; } set_dir(true); setInterval('mainblock()', speed); }} function set_dir(hardth) { if (hardth) { dx=size(Math.floor(3Math.random())-1); dy=size(Math.floor(3Math.random())-1); } else { if (dx && dy) { if (Math.random()<0.5) dx=0; else dy=0; } else if (!dy) dy=(Math.random()<0.5)?size:-size; else dx=(Math.random()<0.5)?size:-size; } } function mainblock() { var t=false; if (x>swide \|\| y>shigh) { if (x>swide) dx=-size; if (y>shigh) dy=-size; } else while (x+dx>swide \|\| x+dx<0 \|\| y+dy>shigh \|\| y+dy<0 \|\| Math.random()<.1 \|\| (t=in_array(x+dx, y+dy, c))) set_dir(t); blok[c].left=(blox[c]=(x+=dx))+"px"; blok[c].top=(bloy[c]=(y+=dy))+"px"; bloc[c]=colours.length; if (blot[c]) clearTimeout(blot[c]); subblock(c); c=++c%worm; } function in_array(xtest, ytest, pos) { var i, j; for (i=pos-3; i<pos; i++) { j=(i<0)?i+worm:i; if (blox[j]==xtest && bloy[j]==ytest) return (true); } return (false); } function subblock(r) { if (--bloc[r]>-1) { blok[r].backgroundColor=colours[bloc[r]]; blot[r]=setTimeout("subblock("+r+")", pete); } else blot[r]=false; } window.onresize=set_width; function set_width() { var sw_min=999999; var sh_min=999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } if (typeof(self.innerWidth)!="undefined" && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth; if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight; } if (document.body.clientWidth) { if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth; if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight; } if (sw_min==999999 \|\| sh_min==999999) { sw_min=800; sh_min=600; } swide=sw_min-size; shigh=sh_min-size; } // ]]> </script> CLICK HERE to select all the above text
STEP 2: Change the colour (and other parameters) at the start of the script you just copied to the settings you require.
THAT'S IT When your page loads, blocky the worm should wander around the page, just like on this one.

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlblockworm.php.

This page has been viewed 431 times. It was last viewed on Fri 26 Apr, 2024 at 21:38