Exercise 1: Simple Animation

For the first exercise, you should work on the file named animation1.html in your copy of the lab6 folder. Open that file in an editor.

As it stands, animation1.html runs an animation where the only thing in the frame is a note containing the number of the current frame. Each frame of the animation is drawn by a call to the function named drawFrame(). You should remove the contents of that function and substitute your own frame-drawing commands.

For this exercise, you can do something abstract. For example, each time drawFrame() runs, it can add some kind of random shape to the picture. I don't expect your animation for this exercise to be very elaborate, but if you want to be more ambitious, you can create a more regular pattern, something like the growing circles example from class; to do that, you need to add some global variables to the script.

Note that you probably do not want to clear the canvas at the start of drawFrame(). You don't want to erase the previous picture; you want to add something to it.

Exercise 2: Loopy Animation

For the second exercise, you should work on the file named animation2.html in your copy of the lab6 folder. Open that file in an editor.

For this exercise, each frame of the animation has a frame number. The frame number goes up by 1 every time drawFrame() is called. Your assignment is to write an animation that uses the frame number to show some kind of regular motion. The sample animation shows two words moving back and forth across the canvas. One uses "looping" motion in which it moves from left to right, jumps back to its original position, and repeats the motion forever. The other word uses "cyclic" motion to move left-to-right and then backwards from right-to-left. The code shows how to use the "%" operator to convert the frameNumber into numbers that can be used for looping or cyclic motion. There is also an example of using an if statement to make an object visible for just part of the animation. And the color of the background is changed in a looping animation.

If you were happy with your static drawing from Exercise 1 in Lab 5, then you can think about reusing that drawing for this lab. Copy the code for that drawing into the drawFrame() function. You might animate some of the objects in your drawing. Or you might use the drawing as a background and draw new animated objects on top of it.

For this animation, drawFrame() should start by erasing the picture from the previous frame. You do that by filling the entire canvas with a rectangle.

You might make a car that moves across the canvas. You could have a cloud, made of several circles, that drifts across the sky. You could have smoke rising from a chimney. You could animate an object's globalAlpha to make it fade away. You could have a tree that grows. Or a stoplight that blinks different colors. Or a sun that rises and sets as the sky changes color. Or a face that winks. Or a balloon that rises into the sky. Or a parachutist who jumps out of a hot air balloon...

Exercise 3: Guessing Game

For the third exercise, you should work on the file named guessing-game.html in your copy of the lab6 folder. Open that file in an editor.

(This exercise introduces a new feature, the HTML <input> element, which can be used to get input from the user. An <input> element appears on the screen as a box where the user can type some text. The element has a value property that can be used in JavaScript to get the text from the box. In this example, the program needs to get a number from the user, so the text that was typed by the user has to be converted from a string value into a number value. However, that much is already done in guessing-game.html, so you don't have to worry about implementing it yourself.)

The program is supposed to be a guessing game in which the user tries to guess a number between 1 and 100 that was selected at random by the computer. Currently, the user can make a guess, but the computer doesn't do anything with the input.

You should add code to the function named makeGuess() to respond to the user's guess. Check whether the user's guess is too low, too high, or correct. Show an appropriate message to the user such as "Sorry, 27 is too low" or "Sorry, 27 is too high", or "You guessed it". After the user guesses the number, the computer should pick a new random number.

For full credit, you should improve the game as follows: Add another variable to the program to count how many guesses the user has made. If the user gets the number in six guesses or fewer, then the user wins. If the user has made six guesses and has not yet gotten the number, then the user loses.