CodingForums.com - Multiple images moving different directions

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Multiple images moving different directions (http://www.codingforums.com/showthread.php?t=208407)

Multiple images moving different directions

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.

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">

        var widthMax = 0;

        var heightMax = 0;

        var buzzSpeed = new Array(3);

        buzzSpeed[0] = 10;

        var xPosition = new Array(3);

        xPosition = -20;

        var yPosition = new Array(3);

        yPosition[0] = 0;

        var xDirection = new Array(3);

        xDirection[0] = "right";

        var yDirection = new Array(3);

        yDirection[0] = "down";

        function setBug(newStartPoint) {

            widthMax = document.documentElement.clientWidth;

            heightMax = document.documentElement.clientHeight;

            setInterval("flyBug(0)", 30);

        }

        function flyBug(curBug) {

            var activeBug = document.getElementById("bugImage" + curBug);

            var activeElement = document.getElementById("bugElement" + curBug);

            if (xDirection[curBug] == "right" && xPosition[curBug] > (widthMax - activeBug.width - buzzSpeed[curBug]))

                xDirection[curBug] = "left";

            else if (xDirection[curBug] == "left" && xPosition[curBug] <= 0)

                xDirection[curBug] = "right";

            if (yDirection[curBug] == "down" && yPosition[curBug] > (heightMax - activeBug.height - buzzSpeed[curBug]))

                yDirection[curBug] = "up";

            else if (yDirection[curBug] == "up" && yPosition[curBug] <= 0)

                yDirection[curBug] = "down";

            if (xDirection[curBug] == "right")

                xPosition[curBug] = xPosition[curBug] + buzzSpeed[curBug];

            else if (xDirection[curBug] == "left")

                xPosition[curBug] = xPosition[curBug] - buzzSpeed[curBug];

            else

                xPosition[curBug] = xPosition[curBug];

            if (yDirection[curBug] == "down")

                yPosition[curBug] = yPosition[curBug] + buzzSpeed[curBug];

            else if (yDirection[curBug] == "up")

                yPosition[curBug] = yPosition[curBug] - buzzSpeed[curBug];

            else

                yPosition[curBug] = yPosition[curBug];



            activeElement.style.left = xPosition[curBug] + document.documentElement.scrollLeft + "px";

            activeElement.style.top = yPosition[curBug] + document.documentElement.scrollTop + "px";

        }

        window.onresize = setBug;

    </script>

</head>

<body onload="setBug()">

<div id="bugElement0" style="position:absolute; left:20px; top:0px;">

<img id="bugImage0" src="bug.jpg" alt="buggy" height="48" width="48" /></div>



<div id="bugElement1" style="position:absolute; left:25%; top:75%;">

<img id="bugImage1" src="bug.jpg" alt="buggy1" height="48" width="48" /></div>



<div id="bugElement2" style="position:absolute; left:40%; top:48%;">

<img id="bugImage2" src="bug.jpg" alt="buggy2" height="48" width="48" /></div>



<div id="bugElement3" style="position:absolute; left:58%; top:58%;">

<img id="bugImage3" src="bug.jpg" alt="buggy3" height="48" width="48" /></div>



<div id="bugElement4" style="position:absolute; left:90%; top:75%;">

<img id="bugImage4" src="bug.jpg" alt="buggy4" height="48" width="48" /></div>

</body>

</html>

What is the *specific* problem?

"It doesn't work" could mean you forgot to upload it to the web server.

Okay, I see. Only the one image moves (makes sense, as there's no code in there to move more than one) and it only moves up and down.

Oh, and the code doesn't work at all in MSIE.

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.

I hope this wasn't homework.

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;



// 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>

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 :thumbsup: . and I want to be able to look at this code I sent you from .....your shoes :D ... 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 :cool: much respect

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.

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.

Ya I realized that on the <div>s after looking at your code..Right when I saw your code

and saw math random() I was thinking the same prior to using the code supplied .. it said

"in random directions" on my paper given to me as well..I was given all that as a sample

code and kinda was determined to use it.I Like how you used clientWidth and Height -48

so it wouldn't go outside the boundaries..I never would've thought of that one. Thanks

again I will more than likely bother you for more knowledge. next time I'll try and ask

questions rather than post my homework although its hard to describe when you don't

see the code.

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.

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.

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

Yeah, = new Array() is a bit old-fashioned.

I'll bet you are wrong. I'll bet semantics are your biggest problem.

Syntax is relatively easy: You'll get an error if it's wrong, even before the code starts to run.

Semantics is more difficult. Code can be syntactically correct yet be semantic nonsense.

This is what i came up with as well but the other one IS WAY cleaner...not

to mention the randomness of the directions..and I'd have to agree on

semantics..I'll get to coding and get so far and then say "what the heck

does this mean?" and it'll take me awhile to figure it out.....so your probably

right.

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">

        var widthMax = 0;

        var heightMax = 0;

        var buzzSpeed = new Array(3);

        buzzSpeed[0] = 10;

        buzzSpeed[1] = 20;

        buzzSpeed[2] = 50;

        buzzSpeed[3] = 100;

        buzzSpeed[4] = 175;

        var xPosition = new Array(3);

        xPosition[0] = -20;

        xPosition[1] = 10;

        xPosition[2] = 20;

        xPosition[3] = 35;

        xPosition[4] = 55;

        var yPosition = new Array(3);

        yPosition[0] = 0;

        yPosition[1] = 10;

        yPosition[2] = 20;

        yPosition[3] = 55;

        yPosition[4] = 75;

        var xDirection = new Array(3);

        xDirection[0] = "right";

        xDirection[1] = "left";

        xDirection[2] = "right";

        xDirection[3] = "right";

        xDirection[4] = "left";

        var yDirection = new Array(3);

        yDirection[0] = "down";

        yDirection[1] = "up";

        yDirection[2] = "down";

        yDirection[3] = "up";

        yDirection[4] = "down";

        function setBug(newStartPoint) {

            widthMax = document.documentElement.clientWidth;

            heightMax = document.documentElement.clientHeight;

            setInterval("flyBug(0)", 30);

            setInterval("flyBug(1)", 100);

            setInterval("flyBug(2)", 50);

            setInterval("flyBug(3)", 175);

            setInterval("flyBug(4)", 250);

        }

        function flyBug(curBug) {

            var activeBug = document.getElementById("bugImage" + curBug);

            var activeElement = document.getElementById("bugElement" + curBug);

            if (xDirection[curBug] == "right" && xPosition[curBug] > (widthMax - activeBug.width - buzzSpeed[curBug]))

                xDirection[curBug] = "left";

            else if (xDirection[curBug] == "left" && xPosition[curBug] <= 0)

                xDirection[curBug] = "right";

            if (yDirection[curBug] == "down" && yPosition[curBug] > (heightMax - activeBug.height - buzzSpeed[curBug]))

                yDirection[curBug] = "up";

            else if (yDirection[curBug] == "up" && yPosition[curBug] <= 0)

                yDirection[curBug] = "down";

            if (xDirection[curBug] == "right")

                xPosition[curBug] = xPosition[curBug] + buzzSpeed[curBug];

            else if (xDirection[curBug] == "left")

                xPosition[curBug] = xPosition[curBug] - buzzSpeed[curBug];

            else

                xPosition[curBug] = xPosition[curBug];

            if (yDirection[curBug] == "down")

                yPosition[curBug] = yPosition[curBug] + buzzSpeed[curBug];

            else if (yDirection[curBug] == "up")

                yPosition[curBug] = yPosition[curBug] - buzzSpeed[curBug];

            else

                yPosition[curBug] = yPosition[curBug];



            activeElement.style.left = xPosition[curBug] + document.documentElement.scrollLeft + "px";

            activeElement.style.top = yPosition[curBug] + document.documentElement.scrollTop + "px";

        }

        window.onresize = setBug;

    </script>

   



</head>

<body onload="setBug()">

<div id="bugElement0" style="position:absolute; left:20px; top:0px;">

<img id="bugImage0" src="bug.jpg" alt="buggy" height="48" width="48" /></div>



<div id="bugElement1" style="position:absolute; left:25%; top:75%;">

<img id="bugImage1" src="bug.jpg" alt="buggy1" height="48" width="48" /></div>



<div id="bugElement2" style="position:absolute; left:40%; top:48%;">

<img id="bugImage2" src="bug.jpg" alt="buggy2" height="48" width="48" /></div>



<div id="bugElement3" style="position:absolute; left:58%; top:58%;">

<img id="bugImage3" src="bug.jpg" alt="buggy3" height="48" width="48" /></div>



<div id="bugElement4" style="position:absolute; left:90%; top:75%;">

<img id="bugImage4" src="bug.jpg" alt="buggy4" height="48" width="48" /></div>

</body>

</html>

???

Code:

var buzzSpeed = new Array(3);

...

buzzSpeed[4] = 175;

???

Aren't you glad JavaScript is so forgiving?