Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 34
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts

    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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,426 Times in 4,391 Posts
    What is the *specific* problem?

    "It doesn't work" could mean you forgot to upload it to the web server.
    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.

  • Users who have thanked Old Pedant for this post:

    joanzn (11-03-2010)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,426 Times in 4,391 Posts
    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.
    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.

  • Users who have thanked Old Pedant for this post:

    joanzn (11-03-2010)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,426 Times in 4,391 Posts
    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.

  • Users who have thanked Old Pedant for this post:

    joanzn (11-03-2010)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,426 Times in 4,391 Posts
    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>
    Last edited by Old Pedant; 11-03-2010 at 07:58 PM. Reason: added comments to clarify coding
    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.

  • Users who have thanked Old Pedant for this post:

    joanzn (11-03-2010)

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts
    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.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,426 Times in 4,391 Posts
    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.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,426 Times in 4,391 Posts
    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.

  • #9
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts
    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.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,426 Times in 4,391 Posts
    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.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,426 Times in 4,391 Posts
    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.
    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.

  • #12
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts
    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

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,426 Times in 4,391 Posts
    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.
    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.

  • #14
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts
    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>

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,426 Times in 4,391 Posts
    ???
    Code:
    var buzzSpeed = new Array(3);
    ...
    buzzSpeed[4] = 175;
    ???

    Aren't you glad JavaScript is so forgiving?
    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.


  •  
    Page 1 of 3 123 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •