University of Washington, CSE 190 M, Spring 2007
Lab 4: Javascript and the DOM (Thursday, April 19, 2007)

The purpose of this lab is to practice using the Document Object Model to inject HTML elements and modify them dynamically based on user interaction. Once again, you may not have enough time to complete everything specified in this document; finish as much as you can within the allotted time.

Interactive Mouse Maze

Your task in this lab is to create a web page with a maze that a user can traverse with his or her mouse. When a user touches a boundary of the maze, that line should turn red and remain red. There should be a box at the end of the maze representing the exit. Once a user's mouse goes over this box, a message should be popped up stating whether or not the maze was successfully solved. The entrance of the maze should be indicated by another box which resets the game when the cursor passes over it.

Please download maze.html, maze.css and maze.js as a starting point (right-click and Save-As). The only file you should need to edit is maze.js.

We strongly encourage you to implement your maze by following these steps in order:

1. Write some temporary testing code to create a single div representing one wall of the maze based on its top, left, right, and bottom coordinates. For example, you could create a wall from (0, 0) to (5, 500). Use the DOM to create a div node and add it to the div on the page with CSS id of game. Apply the provided boundary CSS class name to your div, as well as any other properties necessary to position it.
2. Turn your above code into a function that draws a single maze wall based on parameters for its left x value, top y value, right x value and bottom y value. Recall that the width or height of a rectangle can be computed as the distance between its left/right or top/bottom coordinates.
3. Use the function you developed in the previous step to draw all the boundaries in black that are defined in the array COORDINATES in maze.js. The array holds sets of four integers, where each set represents the left, top, right, and bottom corners of a wall. For example:

   var COORDINATES = [
   	  0,   0,   5, 500,    // wall from (0, 0) to (5, 500)
   	  0, 495, 500, 500,    // wall from (0, 495) to (500, 500)
   	  ...,
   	495,   0, 500, 500];   // wall from (495, 0) to (500, 500)
   

4. Write the event-handling code so that the boundaries turn red as a user's mouse is passed over them. The maze area's background should also become shaded with color #FFDDDD if the mouse crosses a maze wall.
5. Place a colored box at the exit of the maze. When the cursor goes over it, a message should be displayed about whether the user succeeded or failed to avoid the walls along the way. Implement this box as a div node using the provided finishbox CSS id.
6. Place a colored box at the entrance of the maze. When the cursor goes over it, the maze should be reverted to its initial state. Implement this box as a div node using the provided startbox CSS id.
7. If you finish the above, personalize your maze with a background image or other cosmetic improvements.

For example, intrepid TA Jeff Prouty's maze is the following (between, but not including, the thick black lines):

If you have extra time, consider adding extra content or event behavior to your page such as some sort of scoring feature.

When you're satisfied with your page, you may optionally wish to turn it in so that we can see it, or upload it to your UW web space. You may need to ZIP your files for them to submit successfully.