Exercise 1: Mouse Events

For a fairly easy first exercise, you should work on the file mouse.html. This file is already set up to handle mousemove events and click events on a canvas by calling the functions mouseMoveOnCanvas() and mouseClickOnCanvas(). The mousemove handler function already contains the code necessary to get the (x,y) location of the mouse, with x and y expressed in the coordinate system of the canvas:

        var x = event.clientX + pageXOffset - canvas.offsetLeft;
        var y = event.clientY + pageYOffset - canvas.offsetTop;

You should add code to draw a randomly colored filled circle or square centered at (x,y). If the shift key is held down, draw on shape. If it is not down, draw the other shape. Since this is done every time the mouse moves while over the canvas, a series of shapes will get drawn as the user moves the mouse along a path. An example is shown in the picture, at a reduced size.

Furthermore, you should program mouseClickedOnCanvas() to clear the canvas, so that the user can clear the canvas by clicking on it. Recall that graphics.clearRect(x,y,width,height) can be used to clear a rectangle.

Exercise 2: Keyboard Events

For the second exercise, work on the file keyboard.html. You will be working with keyboard events. This is also partly an exercise in understanding the use of variables. The file already has a function doKey(event) that is called when the user presses a key. This function, in turn, calls one of the functions doLeftArrow(), doRightArrow(), doUpArrow(), doDownArrow(), or doSpace() when the user presses the corresponding key. Your job will be to provide definitions for these five functions.

The page currently draws a red square in the middle of the canvas. Your job is to make the square move up, down, left, or right each time the user presses one of the arrow keys. Furthermore, the square should leave a colored trail as it moves. The picture shows what this will look like after the square has been moved around for a bit. In the picture, the trail is yellow. A square is yellow if the red square has passed through it as the red square moved around.

The position of the red square is given by a pair of variables

        var squareLeft = 290;
        var squareTop = 190;

To move the square, you have to draw over the current position of the red square with a different color, change the variables to the new position of the square, and draw the red square in its new position. The square is drawn for the first time in the init() function, just after the canvas graphics context has been created. Note that the size of the square is 20-by-20, so it has to move 20 pixels each time one of the arrow keys is pressed.

Furthermore, if the user presses the space key, the canvas should be cleared and the red square should move back to its original position at (290,190).

Exercise 3: Scratch Off

For Exercise 3, you should work with the file scratchoff.html. The goal is to create a kind of simple children's game (and if you know any small kids, it's a good bet that they will like it). In the game, a picture is hidden behind a blank covering. You can "scratch off" the cover by moving the mouse over the rectangle. The picture shows an example where a large part of the picture has been revealed.

In fact, the rectangle is a canvas and the picture is set as the background image for the canvas. In the current version of scratchoff.html, nothing has been drawn on the canvas, so you see the background image. (The default color of canvas pixels is transparent, so the background shows through.) You have to click "Change the Hidden Image!" to add the first background image to the canvas.

The page is already programmed to change the background image when the button is clicked. You have to complete the programming.

The page does not even have an init() function or a graphics variable. You need to add them. The init() method must be called in response to the body onload event, and it has to create the graphics context. You can copy that much from another file. Furthermore, the init() function should call changeBackground() for the first time so that you don't have to click the button to get the first picture.

In addition to setting the background image, the changeBackground() function has to hide the image by drawing a rectangle that fills the canvas. You can make it gray or, perhaps, a random color.

To complete the program, you have to add a response to an onmousemove event on the canvas. The response should be to clear a small rectangle around the mouse position. When you clear a rectangle, you restore its pixels to their default transparent state, and the background image becomes visible. You can copy some of the code that you need from mouse.html.

Exercise 4: Creativity

For your fourth exercise, think of something original involving mouse or keyboard events, and implement it. You can add a feature to one of the previous exercise in the lab; if you do that, start by making a copy of the file. Or you can make an entirely new page if you want. The page should include some text describing the idea that you have implemented. This doesn't necessarily have to be a lot of work, but you should come up with your own idea. (You might look for ways to respond to various keys being pressed, or to holding down modifier keys when pressing the mouse, or some use for additional buttons or maybe a popup menu.