# How to move an image back and forth with javascript

I currently am trying to make a baseball game and have this code here: http://jsfiddle.net/769BK/ I have the baseballX set to a decrement, and then I try increasing the value using baseballX++; but it won't stop the baseballX--; after that so it stays in the same place. I need to somehow stop the baseballX--; and that way I can use baseballX++;

Thanks for any help at all!

You never tell your script to stop incrementing the position of the baseball. To do this, have a boolean as a flag as to whether to increase the baseball or not. An example of this would be

var flag = true;

if (flag)
{
//do something, and eventually set flag to false
flag = false;
}

else
{
//do something else
}


In this instance, you would stop incrementing when the flag is false, and begin incrementing then. I would read this question even though it is in VB because it will help you understand the concept behind this behavior.

EDIT

What I mean when you start/stop the increment, is when you are changing the position of the ball. I have a fiddle showing what is happening. The main error you were getting was that you would move the baseballX back, then forward, then back, etc. I fixed this using the flag, and in your throwBack function, you reset baseballX to -350. Some pseudocode of what was happening is like:

while (true)
{
pitch();//1st time: move the ball backwards; 2nd time: the ball's X is greater than -350, so move back until it is less
if (ballX < -350)
{
throwBack();//1st time: resets the ball position to -350, and moves forward; 2nd time: the ball is below so move forward, rinse and repeat
}
}


The flag enabled us to do

while (true)
{
if (!baseballBack)
pitch();//1st time: move the ball backwards; 2nd time: flag tells us to stop pitching
if (ballX < -350 || baseballBack)
{
baseballBack = true;
throwBack();//1st time: resets the ball position to -350, and moves forward; 2nd time: the flag is true, so continue to execute.
}
}

• How exactly would I implement this? Could you demonstrate with a Fiddle? I'm not sure that you explained how to stop incrementing? You say here:In this instance, you would stop incrementing when the flag is false, and begin incrementing then. I don't believe you explain how to stop and start the increment? – Geroy290 Jun 10 '14 at 2:29
• @Geroy290 Check my edits, I explain what was happening and what is now happening, along with another fiddle – Liam McInroy Jun 10 '14 at 17:46
• Is there a way I could stoop the ball from moving and then start it again? – Geroy290 Jun 10 '14 at 23:07
• @Geroy290 I would do the same thing you did earlier where you tested the ball's x position, except see if it is larger, then reset the flag... Check out this fiddle for a demonstration that looks like pong:) – Liam McInroy Jun 10 '14 at 23:19
• Is it possible to make it with a timer of sorts so that it would be caught and then thrown back a couple of seconds later? – Geroy290 Jun 10 '14 at 23:22

You could do like so:

var baseballMoveBack = true;

function toggleMovement() {
if (baseballMoveBack) baseballMoveBack = false;
else baseballMoveBack = true;
}

function loop() {
if (baseballMoveBack) baseballX--;
else baseballX++;

setTimeout(loop, 1);
}


First declaring a variable that tells us whether the ball should go back or forth. Then we make a function that will toggle the baseballMoveBack boolean. Last we have a loop that will increase or decrease baseballX.

Hope this helps!