11-05-2012, 11:29 PM
|
PM User |
#20
|
|
New to the CF scene
Join Date: Nov 2012
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
|
Quote:
Originally Posted by Old Pedant
Here, the better version:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BUZZ</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// control speed, etc., with these. Treated as constants:
var INTERVAL = 20;
var MAXSPEED = 10;
var MAXDURATION = 200;
// The maximal screen positions allowed (0,0 implied as minimal):
var xmax = 0;
var ymax = 0;
// constructor for one "Bug" object:
function Bug( obj, x,y,dx,dy,t )
{
this.object = obj;
this.xpos = x;
this.ypos = y;
this.xspeed = dx;
this.yspeed = dy;
this.duration = t;
}
// the master array controlling everything:
var Bugs = [];
// if the page is resized, reset the limits
function setLimits( )
{
xmax = document.documentElement.clientWidth - 48;
ymax = document.documentElement.clientHeight - 48;
}
// called when the page is loaded...sets up all the bugs
function startBugs( )
{
setLimits(); // on startup, same as a resize
// handles any number of bugs, up to 9999
for ( var bugnum = 0; bugnum < 9999; ++bugnum )
{
// find one
var bugimg = document.getElementById("bug"+bugnum);
if ( bugimg == null ) break; // but stop when no more to be found
// put this bug, with its initial info, into the array:
Bugs[bugnum] =
new Bug( bugimg,
// random starting position
Math.floor(Math.random() * xmax),
Math.floor(Math.random() * ymax),
// and random starting speed
Math.floor(Math.random() * 2 * MAXSPEED) - MAXSPEED,
Math.floor(Math.random() * 2 * MAXSPEED) - MAXSPEED,
// and random duration
Math.floor(Math.random() * MAXDURATION)
);
}
// the "tick" time
setInterval( moveBugs, INTERVAL );
// and the first movement...which actually moves bugs to starting positions
moveBugs();
}
// called each "tick"
function moveBugs()
{
// process all moving objects:
for ( var bugnum = 0; bugnum < Bugs.length; ++bugnum )
{
var bug = Bugs[bugnum];
// find new position
var x = bug.xpos + bug.xspeed;
var y = bug.ypos + bug.yspeed;
// don't allow position to be out of bounds
if ( x < 0 ) x = 0;
else if ( x > xmax ) x = xmax;
if ( y < 0 ) y = 0;
else if ( y > ymax ) y = ymax;
// the key to the whole thing...
// if the object is *at* any boundary *OR* if duration has expired for this movement...
if ( x==0 || x==xmax || y==0 || y==ymax || --bug.duration <= 0 )
{
// then get new random speed (both x and y) and duration
bug.xspeed = Math.floor(Math.random() * 2 * MAXSPEED) - MAXSPEED;
bug.yspeed = Math.floor(Math.random() * 2 * MAXSPEED) - MAXSPEED;
bug.duration = Math.floor(Math.random() * MAXDURATION);
}
// finally, store the position back in array...
bug.xpos = x; bug.ypos = y;
// and move the object
bug.object.style.left = x + "px";
bug.object.style.top = y + "px";
}
}
</script>
<style type="text/css">
img.bug {
position: absolute;
z-index: 99;
height: 48px;
width: 48px;
}
</style>
</head>
<body onload="startBugs()" onresize="setLimits()">
<img class="bug" id="bug0" src="bug.jpg" alt="buggy0" />
<img class="bug" id="bug1" src="bug.jpg" alt="buggy1" />
<img class="bug" id="bug2" src="bug.jpg" alt="buggy2" />
<img class="bug" id="bug3" src="bug.jpg" alt="buggy3" />
<img class="bug" id="bug4" src="bug.jpg" alt="buggy4" />
</body>
</html>
Instead of having multiple parallel arrays of individual values, let's use ONE array of custom objects. Much cleaner. |
Hello,
I would like do have the same code but without direction and speed variation.
And then give each image a different starting position and direction.
I'm sorry I can't to it alone with my skills. 
|
|
|