This final set of exercises concentrates on the definition and use of the image map that allows us to recognize and respond to all of the clicking that goes on during the game. When function¹ initMap is called at the very start of the game, it extends the HTML² code to define a complete image map (including all of the area coordinate tags with their respective calls to our main branching function, mapGoto). We'll start by looking at function initMap in detail, and then we'll use it to fill in all of the missing pieces of our game.

1. On a separate sheet of paper, trace the operation of function initMap. That is, write down the HTML code that is the output of this function. We'll start you out with the first couple of lines. You fill in enough of the rest to see the pattern.

        <MAP NAME = "ImageMap"><AREA COORDS
        = 0, 0,10, 10 HREF=javascript:mapGoto(0,0)>
   

2. While the size of our main Image is fixed at 320 x 240 by its HTML description, the resolution of our image map (which currently reports clicks on 10 x 10 squares) can be refined as we see fit to give us slightly more precision in recognizing mouse clicks. Fix function initMap now so that it correctly produces the HTML code necessary to track clicks within 5 x 5 squares on our images. If you do this correctly, you will not have to change any of the "clickOn..." functions - they will just work more precisely.



3. Now, let's take advantage of our imagemap to expand our program so that it can respond to clicks on previously unrecognized parts of images. In particular, write "clickedOn..." functions to recognize clicks on the following image parts.
1. the postmark on the envelope image
2. each article on the convenience store (store8) image, including the soda, mints, candy bar, bagel, map, licorice, and the cashier
3. the car and the man in the car image
4. the poster on the concert image



4. Now that your program can recognize clicks on any part of any image in the game, it's up to you to make up the rest of the game. Include as many features as time permits. Here are some suggestions. Feel free to make up your own, as well.
1. allow the user to purchase (and add to the inventory) any article in the clothing store
2. allow the user to purchase (and add to the inventory) any article in the convenience store
3. allow the user to purchase a poster (and add it to the inventory) when arriving at the concert
4. clicking on the man in the car image (in action mode) should add "Dad's cash" to your inventory, and clicking in the car should add "car keys" to your inventory
5. allow the user to purchase any items in the store so long as the inventory contains either ATM Cash or Dad's cash
6. add items that must be secured in order to get to the concert (like, say, the map and the car keys)
7. fix it so that certain items (like gum and candy) are not allowed in the concert, and that bringing them to the concert forces the player to start over
8. fix it so that if soda has already been purchased when the user attempts to purchase the jacket at the clothing store, an alert is produced indicating that soda was spilled on the jacket, and the player must start over.