HTML and CSS Reference
In-Depth Information
Chapter 7
Mazes
In this chapter, we will cover
•
responding to mouse events
•
calculation of collision between circles and lines
•
responding to the arrow keys
•
form input
•
encoding, saving, decoding
,
and restoring information from local storage using
try
and
catch
for testing if coding is recognized
•
using
join
and
split
to encode and decode information
•
using
javascript:
in a button to invoke functions
•
radio buttons
Introduction
In this chapter, well continue our exploration of programming techniques and HTML5 and JavaScript
features, this time using programs that build and traverse mazes. Players will have the ability to draw a set
of walls to make up a maze. They will be able to save and load their mazes, and to traverse them using
collision detection to make sure they dont cross any walls.
The general programming techniques include using arrays for everything that needs to be drawn on the
canvas as well as a separate array for the set of walls in the maze. The number of walls is not known
before play starts, so a flexible approach is required. Once the maze is constructed, well see how to
respond to presses of the arrow keys and how to detect collisions between the playing piece—a
pentagon-shaped token—and the walls. With HTML5, we can handle mouse events so the player can
press the mouse button down and then drag and release the button to define each wall of a maze; respond
to the arrow keys to move the token; and save and retrieve the layout of walls on the local computer. As
usual, well build more than one version of the application. In the first, everything is contained in one HTML
file. That is, the player builds a maze, can travel through it, and can optionally save it to the local computer
