I'm still kinda new at this. Please bear with me..I'm trying to make all imgs move in different directions using the following code. I was givin the code and I need to insert something into it so this will work. I just can't understand it and WANT to ..driving me NUTTY.
So is this homework??? Because even the basic code for a single bug doesn't really work very well. (Only goes up and down or would only go left and right, if set up differently.) It doesn't "buzz" around, at all.
Personally, I'd toss the code and start all over.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
<!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;
// the arrays controlling everything:
var bugs = []; // references to the img objects...the moving objects
var xpos = []; // x and y current positions of the objects
var ypos = [];
var xspeed = []; // x and y "speed" (number of pixels moved each "tick")
var yspeed = [];
var duration = []; // a limit on the number of ticks bug can move in any one direction
// 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 bug = document.getElementById("bug"+bugnum);
if ( bug == null ) break; // but stop when no more to be found
bugs[bugnum] = bug; // remember this moving object
// random starting position
xpos[bugnum] = Math.floor(Math.random() * xmax);
ypos[bugnum] = Math.floor(Math.random() * ymax);
// and random starting speed
xspeed[bugnum] = Math.floor(Math.random() * 2 * MAXSPEED) - MAXSPEED;
yspeed[bugnum] = Math.floor(Math.random() * 2 * MAXSPEED) - MAXSPEED;
// and random duration
duration[bugnum] = 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 )
{
// find new position
var x = xpos[bugnum] + xspeed[bugnum];
var y = ypos[bugnum] + yspeed[bugnum];
// 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 || --duration[bugnum] <= 0 )
{
// then get new random speed (both x and y) and duration
xspeed[bugnum] = Math.floor(Math.random() * 2 * MAXSPEED) - MAXSPEED;
yspeed[bugnum] = Math.floor(Math.random() * 2 * MAXSPEED) - MAXSPEED;
duration[bugnum] = Math.floor(Math.random() * MAXDURATION);
}
// finally, store the position back in array...
xpos[bugnum] = x; ypos[bugnum] = y;
// and move the object
bug = bugs[bugnum];
bug.style.left = x + "px";
bug.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>
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Last edited by Old Pedant; 11-03-2010 at 07:58 PM..
Reason: added comments to clarify coding
Thanks!...it is homework...lol... but I'm trying to figure out what I needed to do to the code I posted so it would work for all the bugs...I'm really not here to have great people like yourself do my homework for me..I NEED to understand it, not because of school, because this stuff is AWESOME to me . and I want to be able to look at this code I sent you from .....your shoes ... I read crazy amounts of books and read many peoples code just to practice understanding syntax the best I can (syntax is difficult for me to understand).... Thanks A LOT!...Master much respect
Last edited by joanzn; 11-03-2010 at 04:47 AM..
Reason: clairify my intentions.
Well, maybe that code at least will point you in the right direction.
Your code is only setting up the values (xPosition, yPosition, etc.) for ONE of your images. You need to do it for all 5.
I think it is way overcomplicated, too, by having separate values for speed and direction. Just do as I did and combine them: - speed is up, + speed is down, etc.
Finally, you have to *MOVE* all of them. Again, your code only tries to move number zero.
So... repetition is the key. DO the same thing for all 5. Don't just work with bug 0.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Hope you noticed that there's no reason to have the <div>s around the <img>s. The images can move nicely by themselves. The divs are just extra goop in the way.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
I went back and added comments to the code. And in the process saw a better way to code this. But hey, I just tossed off that code. Except for two typos, it worked first time, so I can't complain too much.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
<!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.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Commenting that out helps a lot to understand as well ... I need to start making that practice in all my works..also is "var Bugs = []" like "var Bugs = new Array"?....like I said syntax is my biggest problem
Before you post, read our: 
. and I want to be able to look at this code I sent you from .....your shoes 
... I read crazy amounts of books and read many peoples code just to practice understanding syntax the best I can (syntax is difficult for me to understand).... Thanks A LOT!...Master 
much respect
