1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 7:45 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Images Bouncing Beyond Boundaries

Evill

         

adni18

3:02 pm on Mar 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi. I have a script I made to make 6 images bounce around the user's window. It works fine, to a degree, but when you run the script, some of the images that are traveling NE tend to not stop at the boundaries (in Mozilla at least). This does not happen all the time. Why is this?

<BODY>
<script language=javascript>
<!--

var blobs=new Array("blob1.png","blob2.png","blob3.png");

var hhei=192;

var wwei=203;

for(var j=0;j<blobs.length;j++)
{
var b=0;
while(b<2)
{
document.write("<img src=\""+blobs[j]+"\" alt=\"Shoot This!\"

style=\"position:absolute;left:"+Math.floor(Math.random()*(document.body.clientWidth-wwei))

+"px;top:"+Math.floor(Math.random()*(document.body.clientHeight-hhei))+"px\">");
b++;
}
}

var carcassinf=new Array();

var bg=document.getElementsByTagName("img");
for(var i=0;i<bg.length;i++)
{
carcassinf[i]=Math.floor(Math.random()*4);
}

function moveblobs()
{
window.setTimeout("moveblobs()", 5);
var bg=document.getElementsByTagName("img");
for(var i=0;i<bg.length;i++)
{

if( carcassinf[i]==0 )
{
bg[i].style.left=eval(eval(bg[i].style.left.split("px")[0])+eval(1))+"px";
bg[i].style.top=eval(eval(bg[i].style.top.split("px")[0])+eval(1))+"px";
}

if( carcassinf[i]==1 )
{
bg[i].style.left=eval(eval(bg[i].style.left.split("px")[0])+eval(1))+"px";
bg[i].style.top=eval(eval(bg[i].style.top.split("px")[0])-eval(1))+"px";
}

if( carcassinf[i]==2 )
{
bg[i].style.left=eval(eval(bg[i].style.left.split("px")[0])-eval(1))+"px";
bg[i].style.top=eval(eval(bg[i].style.top.split("px")[0])-eval(1))+"px";
}

if( carcassinf[i]==3 )
{
bg[i].style.left=eval(eval(bg[i].style.left.split("px")[0])-eval(1))+"px";
bg[i].style.top=eval(eval(bg[i].style.top.split("px")[0])+eval(1))+"px";
}

/* BOUNCE EQUATIONS */

if(carcassinf[i]==2 && eval(bg[i].style.left.split("px")[0]) == 0)
{
carcassinf[i]=1;
}

if(carcassinf[i]==3 && eval(bg[i].style.left.split("px")[0]) == 0)
{
carcassinf[i]=0;
}

if(carcassinf[i]==1 && eval(bg[i].style.top.split("px")[0]) == 0)
{
carcassinf[i]=0;
}

if(carcassinf[i]==2 && eval(bg[i].style.top.split("px")[0]) == 0)
{
carcassinf[i]=3;
}

if(carcassinf[i]==3 && eval(bg[i].style.top.split("px")[0]) == (document.body.clientHeight-

hhei))
{
carcassinf[i]=2;
}

if(carcassinf[i]==0 && eval(bg[i].style.left.split("px")[0]) == (document.body.clientWidth-

wwei))
{
carcassinf[i]=3;
}

if(carcassinf[i]==0 && eval(bg[i].style.top.split("px")[0]) == (document.body.clientHeight-

hhei))
{
carcassinf[i]=1;
}

if(carcassinf[i]==1 && eval(bg[i].style.left.split("px")[0]) == (document.body.clientWidth-

wwei))
{
carcassinf[i]=2;
}

}

}

moveblobs()
//-->
</script>

Moby_Dim

3:24 pm on Mar 24, 2005 (gmt 0)

10+ Year Member



cute :) Is this your script?

what is " NE"?

Leosghost

3:30 pm on Mar 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Love it ..like for "whackamole" ..

adni18

6:18 pm on Mar 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



NE - Northeast (I think I spent too long on that one road trip)

Sometimes (maybe it's just my computer) the images go beyond the right boundary-but only when they are travelling NE. I believe I resolved the problem by changing the NE movement boundaries' IF comparison operator to ">=" instead of just "==". It's actually for a DHTML game I am making.

Moby_Dim

6:35 pm on Mar 24, 2005 (gmt 0)

10+ Year Member



Of course > or < is better in such cases, because == means the ONLY value (length, width, etc.), and not a range. if you add 3 to a variable each time, for example, you'd never have this var == 10 , if you begin from var =0.

well, nice work ;)

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 7:45 am May 14, 2026