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 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 34
  1. #16
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts
    Sooooo glad it is ...lol.. I edited that before I turned it in to var buzzSpeed =

    new Array(4). funny how that worked regardless tho...I'm sure I could have

    added 10 more and it wouldn't have even minded LOVE this stuff...

  2. #17
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,386 Times in 4,351 Posts
    No, it should be new Array(5) if you are going to give it a size. The argument there is the NUMBER of elements, *NOT* the element number of the last element.

    0,1,2,3,4 is 5 elements, so Array(5).
    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.

  3. #18
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts
    Damn it!! ...lol.... I wanted to sound smart! ... Actually I knew that yet for

    some reason decided to type (4)!?.. idk why.....I do know I will never use "new

    Array()" again and use "[]" instead tho...I'm guessing that just denotes an

    "open" array witch will hold whatever I'd like? so that seems easier for handling

    simple errors that I'll surely continue to make until I have a solid grasp on the

    language.

  4. #19
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,386 Times in 4,351 Posts
    Yep. And you can also do
    Code:
       var foo = new Array();
    to accomplish the same thing. No real reason to give a size to the array for most purposes.
    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.

  5. #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 View Post
    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.

  6. #21
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,386 Times in 4,351 Posts
    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.
    You mean you want to SPECIFY the staring positions and directions yourself, rather than randomly picking them?

    Okay. HOW do you want to specify them? And what directions will you specify? Just up, down, left, right? Or 45 degree diagonals? Or some finer control than that?
    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.

  7. #22
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want each image to follow a different path.
    It should look harmonious.
    It can start from anywhere and in any direction.
    but not aligned, like if it was random

    Or the change direction can happen when they hit the corner of the screen.

    what is the easiest solution ?

  8. #23
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    and with diagonals like in the code I have quoted

  9. #24
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,386 Times in 4,351 Posts
    Again, HOW will you specify the starting positions and directions?

    Will you embed that information in, say, the ALT of each image? Will you put it in your JS code?

    With no information, it's hard to help.
    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.

  10. #25
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In the ALT or in the JS code, it makes no difference to me.
    The only thing that matters is results.

    And I also wonder, is it possible to trigger a sound when the images touch the edges of the screen ?

    thank you for your answers

  11. #26
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,386 Times in 4,351 Posts
    Okay...try this.
    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
    
            // decipher the ALT= as xpos, ypos, xmovement, ymovement
            var info = bugimg.alt.split(",");
    
            // put this bug, with its initial info, into the array:
            Bugs[bugnum] = 
                new Bug( bugimg,
                         // x and y start:
                         Number(info[0]),
                         Number(info[1]),
                         // and random starting speed
                         Number(info[2]),
                         Number(info[3]),
                         // 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.xspeed   = - bug.xspeed;
                bug.yspeed   = - bug.yspeed;
            }
            // 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="logo.jpg" alt="100,100,10,0" />
    <img class="bug" id="bug1" src="logo.jpg" alt="800,800,0,-10" />
    <img class="bug" id="bug2" src="logo.jpg" alt="400,400,3,3" />
    <img class="bug" id="bug3" src="logo.jpg" alt="400,400,-5,-10" />
    <img class="bug" id="bug4" src="logo.jpg" alt="1200,300,-20,0" />
    </body>
    </html>
    There are some left-over extraneous variables in there now. Just ignore them.

    As you can probably see, this uses the ALT= to tell the program what to do. The coding means
    ALT="xstart,ystart,xspeed,yspeed"
    So you can control where it starts, what direction it moves in, and how fast.
    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. #27
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you !! that's it.

    But when the images hit the corner they do a round trip.
    I wish they bounce like a ball and go ahead.



    And is it possible to trigger a sound when it bounces with a javascript ?

  13. #28
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,386 Times in 4,351 Posts
    If you don't give full specifications, you get what you get.

    Why don't you play with the code and figure out how to do that for yourself?

    It's not hard. The exercise would be good for your brain. <grin/>

    Yes, you can trigger a sound. But I don't work much with sounds so I'll let you google for that...or search this forum.
    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. #29
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,386 Times in 4,351 Posts
    Here's a hint: The "bounce" code is here:
    Code:
    if ( x==0 || x==xmax || y==0 || y==ymax ) 
    { 
        bug.xspeed = - bug.xspeed; 
        bug.yspeed = - bug.yspeed; 
    }
    Clearly, to do what you want, you need to keep the two kinds of bounces separate.
    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.

  15. #30
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry for the inconvenience
    I used to play with code but Js is completely obscure for me,
    I can't even modify the bounce properties


 
Page 2 of 3 FirstFirst 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
  •