Moving image from left to right and back again, etc...

[s_gibson86]

Hey, As the title describes, i am having a bit of trouble creating a script which will move an image back and forth across the screen. I have been to my lecturer for a bit of advice and hoping that he would point me in the right direction but no such luck. So far i have written the script to make it move from left to right across the screen but now i'm struggling to make it move right to left and so forth. I am new to Javascript so a nudge in the right direction would be a huge help. This is my script so far:Thank youSarah

var max_x = 1024var cup = document.getElementById("cup")var cup_x = 0function moveWin(){	cup_x = cup_x + 10	cup.style.left = cup_x + 'px'	if (cup_x <= max_x) {		timerID = setTimeout("moveWin()", 25)	}}function clicked(thing){	moveWin()}

[mike_g]

I havent tested this but I imagine this should work:

var max_x = 1024var cup = document.getElementById("cup")var cup_x = 0var inc = 10function moveWin(){cup_x = cup_x + inccup.style.left = cup_x + 'px'	 if (cup_x >= max_x || cup_x <=0) inc = -inc 		  	 timerID = setTimeout("moveWin()", 25)			}

Instead of moving the cup +10 each time the function is run we now have a variable to increment it by. If it goes above the page width or below 0 then the increment gets inverted causing the window to move in the opposite direction.

[jesh]

Whenever I wanted to do something like this, I would think of a number of pixels that I wanted the object to move (kind of like the speed that the object will move) and I would specify a direction that I wanted it to move. Something like this:

var speed = 15;  // that's 15 pixelsvar direction = 1;

Then, if I wanted to move the object to the right, I'd add the following to its position:

var element = document.getElementById("myMover");var position = element.offsetLeft;element.style.left = (position + (speed * direction)) + "px";

Then, to check if it has gone outside of the boundries that I've set up, I'd do this:

var MAXLEFT = 10;var MAXRIGHT = 600;var element = document.getElementById("myMover");var position = element.offsetLeft;if(position >= MAXRIGHT){	position = MAXRIGHT;	direction *= -1;}else if (position <= MAXLEFT){	position = MAXLEFT;	direction *= -1;}

The only thing tricky about the above section is that each time the object oversteps the boundaries, I multiple the direction by -1. If it is moving to the right, direction would be "1", if it is moving to the left, direction would be "-1". Multiplying those numbers by -1 effectively flips the direction.I hope this helps.

[s_gibson86]

Ah, thank you! It's working now and i actually understand if for once lol!