Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.
thanks to former TAs Victoria Kirst, Jeff Prouty, Morgan Doocy, Brian Le for their work on these labs.
This lab practices unobtrusive JavaScript events and the Document Object Model (DOM). We'll write a page with a "maze" to navigate with the mouse. You will write maze.js
to implement the maze behavior.
Download the file below (right-click, Save Target As...) to get started:
The difficulty is in having the dexterity to move the mouse through without touching any walls. When the mouse cursor touches a wall, all walls turn red and a "You lose" message shows. Touching the Start button with the mouse removes the red coloring from the walls.
The maze walls are 5 div
elements. Our provided CSS puts the div
s into their proper places.
<div id="maze"> <div id="start">S</div> <div class="boundary" id="boundary1"></div> <div class="boundary"></div> <div class="boundary"></div> <div class="boundary"></div> <div class="boundary"></div> <div id="end">E</div> </div>
Write code so that when the user moves the mouse onto a single one of the maze's walls (onmouseover
), that wall will turn red. Use the top-left wall; it is easier because it has an id
of boundary1
.
maze.html
.
window.onload
handler that sets up any event handlers.
youlose
, using the classList
property.
Make it so that all maze walls turn red when the mouse enters any one of them.
div
that represents a wall of the maze.
div
s, since they do not have id
attributes.
class
of boundary
. Use the document.querySelectorAll
function to access them all.
Make it so that if the user reaches the end of the maze, a "You win!" alert
message appears.
div
with an id
of end
.
Make it so that when the user clicks the mouse on the Start square (a div
with an id
of start
), the maze state will reset. That is, if the maze boundary walls are red, they will all return to their normal color, so that the user can try to get through the maze again.
document.querySelectorAll
function again to select all of the squares to set their color.
Instead of an alert
, make the "You win" and "You lose" messages appear in the page itself.
h2
element on the page with an id
of status
. Put the win/lose text into that div
when the user finishes the maze.
It's too easy to cheat: Just move your mouse around the outside of the maze!
If you finish all the exercises, you can add any other content or code (or bling!) you like to your page.
If the lab is over or almost over, check with a TA and you may be able to be dismissed.
Great work!