The Essential Guide to HTML5

MAZES

HTML5, CSS, and JavaScript features ......................................................................................................

Now let
s take a look at the specific features of HTML5 and JavaScript that provide what we need to

implement the maze application. This builds on material covered in previous chapters: the general

structure of an HTML document; using programmer-defined functions, including programmer-defined

objects; drawing paths made up of line segments on a canvas element; programmer objects; and arrays.

Previous chapters have addressed mouse events on the canvas (the cannonball and slingshot games in

Chapter 4 and the memory game in Chapter 5) and mouse events on HTML elements (the quiz games in

Chapter 6). New features we
ll be covering include a different type of event: getting input from a player

pressing on the arrow keys, called keystroke capture; and using local storage to save information on the

local computer, even after the browser has been closed and the computer turned off. Remember, you can

skip ahead to the “Building the Application” section to see all the code with comments and return to this

section to read explanations of individual features and techniques.

Representation of walls and the token

To start, we
ll define a function, Wall, to define a wall object, and another function, Token, to define a

token object. We
ll define these functions in a more general manner than required by this application, but I

believe this is okay: the generality does not affect much, if anything, in terms of performance, while giving

us the freedom to use the code for other applications, such as a game with different playing pieces. I

chose the pentagon shape because I liked it, and use mypent as the variable name for the playing piece.

The properties defined for a wall consist of the start and finish points specified by the mouse actions. I

name these sx, sy, fx, and fy. The wall also has a width and a strokestyle string, and a draw method is

specified as drawAline. The reason this is more general than necessary is because all walls will have the

same width and style string, and all will use the drawAline function. When it comes time to save the walls

to local storage, I save only the sx, sy, fx, and fy values. You can use the same techniques to encode

more information if and when you write other programs and need to store values.

The token that moves around the maze is defined by a call to the Token function. This function is similar to

the Polygon function defined for the polygon memory game. The Token function stores the center of the

token, sx and sy, along with a radius (rad), number of sides (n), a fillstyle, and it links to the

drawtoken function for the draw method and the movetoken function for the moveit method. In addition,

a property named angle is computed immediately as (2*Math.PI)/n. Recall that in the radian system for

measuring angles, 2*Math.PI represents a full circle, so this number divided by the number of sides will be

the angle from the center to the ends of each side.

As was the case with previous applications (see Chapter 4), after an object is created, the code adds it to

the everything array. I also add all walls to the walls array. It is this array that is used to save the wall

information to local storage.

Mouse events to build and position a wall

Recall that in previous chapters we used HTML5 and JavaScript to define an event and specify an event

handler. The init function contains code that sets up event handling for the player pressing the main

mouse button, moving the mouse, and releasing the button.

canvas1 = document.getElementById('canvas');

canvas1.addEventListener('mousedown',startwall,false);