Multiple images moving different directions - Page 2

joanzn · 11-05-2010, 03:24 AM

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

Old Pedant · 11-05-2010, 05:11 AM

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).

joanzn · 11-05-2010, 02:01 PM

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.

Old Pedant · 11-05-2010, 07:01 PM

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.

salutsalut · 11-05-2012, 11:29 PM

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.

Old Pedant · 11-06-2012, 02:02 AM

Quote:

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?

salutsalut · 11-06-2012, 07:55 AM

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 ?

salutsalut · 11-06-2012, 07:57 AM

and with diagonals like in the code I have quoted

Old Pedant · 11-06-2012, 11:45 PM

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.

salutsalut · 11-07-2012, 08:07 PM

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

Old Pedant · 11-07-2012, 10:35 PM

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.

salutsalut · 11-08-2012, 12:08 AM

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 ?

Old Pedant · 11-08-2012, 12:26 AM

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.

Old Pedant · 11-08-2012, 12:28 AM

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.

salutsalut · 11-08-2012, 09:38 AM

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