HTML and CSS Reference
In-Depth Information
Figure 7-7.
A harder maze
One important feature is that in the two-script application, clicking the GET maze button forces the current
maze to be erased and the newly selected maze to be drawn. This is different from what happens in either
the all-in-one program or the creation part of the second version, when old walls are added to what is
present. As has been the case for the other examples, these are just stubs of programs, created to
demonstrate HTML5 features and programming techniques. There is much opportunity for improvement to
make the projects your own.
Critical requirements
The maze application requires the display of a constantly updated game board, as new walls are erected
and the token is moved.
The maze-building task requires responding to mouse events to collect the information needed to build a
wall. The application displays the wall being built.
The maze-traveling task requires responding to the arrow keys to move the token. The game must not
allow the token to cross any wall.
The save and retrieve operations require the program to encode the wall information, save it on the local
computer, and then retrieve it and use it to create and display the saved walls. Mazes are moderately
complex structures: a set of some number of walls, with each wall defined by starting and ending
coordinates, that is, pairs of numbers representing x,y positions on the canvas. For the local storage
facility to be used, this information has to be turned into a single string of characters.
The two-document version makes use of radio buttons to select a maze.
