Animation in Javascript

This program is similar to the one you worked with in the last notes that moves an eggplant in a grid. It's been changed so that it moves the eggplant not one step, but 4. It does it by calling the move() function four times. But when you try it, you'll see that the eggplant just jumps four spaces... it doesn't move one square, four times.

This is because of the way the Javascript program updates the screen. It only changes the picture on the screen when the program isn't busy, which means that a lot happens without the screen changing. When the program stops, and the screen does get updated, the eggplant has moved four times.

This isn't usually what we'll want. Usually we want to see the movement of the eggplant animated, so that we can see it move step by step.

There's a trick to doing this in Javascript that may not be easy to understand at first, but that you'll be able to do by following examples. Almost all, if not literally all, the example programs in the gallery use some form of this technique, so you have plenty of examples to work from.

Here's an animated version of the previous page. Look at the code. You'll see a statement setTimeout("move()",200); in a couple of places. This is the key to the animation. It's similar to just asking the function move() to run, but it doesn't ask for it right away. Instead, it asks it to run only after 200 msec have passed, that is, when a timer set to 200 msec "times out".

The reason this creates the animation is that during that 200 msec delay, the program isn't busy. That means that the screen can be updated, and we see the screen updated each time the eggplant moves. You can speed up the movement by reducing the 200 msec to (say) 50 msec.

If you look at the code, you'll see that a certain amount of fiddling around is needed to make the eggplant move just four spaces. More commonly we'll want to control the eggplant more simply, by having it start to move when we press the button, and keep moving until we press the button to stop it.

This program shows how that can be done. It also uses setTimeout(), but it's simpler.

This program, and the last one, use a big idea we haven't talked about, the conditional or if statement. These statements let us put things in programs that get done sometimes and not other times. In our example, we'll have the eggplant moving sometimes and not other times.

The information holder named running is used to hold one of two values, true or false. We can test the value of running using an if, and make something happen when running is true, and not if it is false. Actually, in the example, we test if running is NOT true, using the operator "!", pronounced "not". NOT running is true if running is false, and false when it is true. When running is true, we make the eggplant move, and it keeps moving as long as running is true. When running gets to be false, the eggplant stops.

When we press the button, we replace the current value of running with the opposite. The effect is that if the eggplant is stopped, pressing the button makes it start, and if it is moving pressing the button makes it stop.

Hands On

See if you can modify the last program by adding a second button that makes the eggplant move down rather than to the right. More specifically, when the eggplant is stopped, pressing the first button should make it move to the right, and keep moving, or pressing the second button should make it move down, and keep moving. When the eggplant is moving, pressing either button should make it stop.

Hint: See if you can get this done by copying and modifying parts of the last program, rather than by writing code from scratch.