Motion
Begin by making your own copy of the motion example. Delete the last three loops, so that you are left with only the first loop (the one that moves the square to the right). Make sure that the page still works (of course, the square will move right and then just stop). You will practice making some modifications to this, as described below.
- First, remove the onload event in the <body> tag. Instead, create a button that calls animate1() for its onclick event. Put this button somewhere on the page and test it out. The animation should look the same as before, only instead of starting right when the page is loaded, it will happen when you click on the button. (What happens if you click on the button a second time? What if you do it while the box is still moving from the first time you clicked?)
- Now create a second button that will call a different function, animate2(). Make animate2() an exact copy of animate1() to begin with. (Do both your buttons work now? They should.) The modify animate2() so that it moves the square twice as fast. (Hint: decrease the multiplier in the second argument of setTimeout().)
- Create a third button that will call a third function, animate3(). Again, you should copy the original motion function and modify it so that the square moves twice as far. (Hint: either modify the loop statement to include more steps, or make each step bigger. Which looks better?)
- Create a fourth button that will make the square move diagonally downwards and to the right. (Hint: you will need another new function, which adds a second call to setTimeout() within the loop body, that will make the square move downwards. You can look at the original example for help with that.)