HTML and CSS Reference
In-Depth Information
The ability to save to local storage is a powerful feature. For this, and any game or activity that takes a fair
amount of time, you may want to add the ability to save the current state. Another common use for local
storage is to save the best scores.
Do understand that I wanted to demonstrate the use of local storage for intricate data, and these
applications did do that. However, you may want to develop maze programs using something other than
local storage. To build on this application, you need to define the sequence of starting and stopping
points, four numbers in all, for each wall, and define walls accordingly. Look ahead to the word list
implemented as an external script file in the Hangman game in Chapter 9.
This chapter and the previous one demonstrated events and event handling for mouse, keys, and timing.
New devices provide new events, such as shaking a phone or using multiple touches on a screen. With
the knowledge and experience youve acquired here, youll be able to put together many different
interactive applications.
Testing and uploading application
The first application is complete in one HTML document,
buildmazesavelocally.html
. The second
application uses two files,
buildmazes.html
and
travelmaze.html
. The
buildmazesavelocally.html
and buildmaze.html
are identical, except for the titles. All three files are available on the friends of ED
site. Please note that
travelmaze.html
will not work until you create mazes and save them using local
storage on your own computer.
To test the save and restore feature, you need to load the file to a server for it to work using Firefox and,
perhaps, other browsers. It works locally using Chrome. The two HTML documents for the two-script
version must both be uploaded to a server to be tested.
Some people may limit the use of local storage and cookies. There are differences between these
constructs. To use any of this in a production application requires considerable work. The ultimate fall-
back is to store information on the server using a language such as php.
Summary
In this chapter, you learned how to implement a program to support the building of a maze of walls and to
store it on the local computer. You also learned how to create a maze travel game. We used the following
programming techniques and HTML5 features:
•
programmer-defined objects
•
capturing key strokes; that is, setting up event handling for key presses, and deciphering
which key was pressed
•
localStorage
for saving the layout of the walls of the maze on the player's computer
•
try
and
catch
to check if certain coding is acceptable
•
the
join
method for arrays and the
split
method for strings
•
mouse events
•
mathematical calculations for determining collisions between the token and the walls of the
maze
•
radio buttons to present a choice to the player.
