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.

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);

canvas1.addEventListener('mousemove',stretchwall,false);
canvas1.addEventListener('mouseup',finish,false);

We'll also use a variable called inmotion to keep track of whether or not the mouse button is down. The startwall function determines the mouse coordinates (see Chapters 4 and 5 for accessing the mouse coordinates after an event), creates a new Wall object with a reference stored in the global variable curwall, adds the wall to the everything array, draws all the items in everything, and sets inmotion to be true. If inmotion is not true, then the stretchwall function returns immediately without doing anything. If inmotion is true, the code gets the mouse coordinates and uses them to set the fx and fy values of curwall. This happens over and over as the player moves the mouse with the button pressed down. When the button is released, the function finish is called. This function sets inmotion back to false and adds the curwall to an array called walls.

Detecting that a key on the keyboard has been pressed and determining which one is called capturing a key stroke. This is another type of event that HTML5 and JavaScript can handle. We need to set up a response to a key event, which is analogous to setting up a response to a mouse event. The coding starts with invoking the addEventListener method, this time for the window:

window.addEventListener('keydown',getkeyAndMove,false);

The window is the object that holds the document defined by the HTML file. The third parameter, which could be omitted because false is the default, relates to the order of responding to the event by other objects. It isn't an issue for this application.

This means the getkeyAndMove function will be invoked if and when a key is pressed.

Now, as you may expect at this point, the coding to get the information for which key was pressed involves different code for different browsers. The following code, with two ways to get the number corresponding to the key, works in all current browsers recognizing other new features in HTML5:

if(event == null)
  {
    keyCode = window.event.keyCode;
        window.event.preventDefault();
  }
  else

{
    keyCode = event.keyCode;
        event.preventDefault();
  }

The preventDefault method does what it sounds like: prevents any default action, such as a special shortcut action that is associated with the particular key in the particular browser. The only keys of interest in this application are the arrow keys. The following switch statement moves the Token referenced by the variable mypent; that is, the location information is changed so that the next time everything is drawn, the token will move. (This isn't quite true. The moveit function contains a collision check to make sure we don't hit any walls first, but that will be described later.)

switch(keyCode)
  {
   case 37:  //left arrow
     mypent.moveit(-unit,0);
     break;
   case 38:  //up arrow
     mypent.moveit(0,-unit);
      break;
    case 39: //right arrow
   mypent.moveit(unit,0);
      break;
    case 40:  //down arrow
      mypent.moveit(0,unit);
      break;
    default:
      window.removeEventListener('keydown',getkeyAndMove,false);
}

How did I know that the keycode for the left arrow was 37? You can look up keycodes on the Web (for example, www.w3.org/2002/09/tests/keys.html) or you can write code that issues an alert statement:

alert(" You just pressed keycode "+keyCode);

The default action for our maze application, which occurs when the key is not one of the four arrow keys, stops event handling on key strokes. The assumption here is that the player wants to type in a name to save or retrieve wall information to or from local storage. In many applications, the appropriate action to take would be a message, possibly using alert, to let the user know what the expected keys are.

To traverse a maze, the player must not move the token across any wall. We will enforce this restriction by writing a function, intersect, that returns true if a circle with given center and radius intersects a line segment. For this task, we need to be exacting in our language: a line segment is part of a line, going from sx, sy to fx, fy. Each wall corresponds to a finite line segment. The line itself is infinite. The intersect function is called for each wall in the array walls.

The intersect function is based on the idea of a parameterized line. Specifically, the parameterized form of a line is (writing mathematical formula, as opposed to code)

Equation a:        x = sx + t*(fx-sx);
Equation b:        y = sy + t*(fy-sy);

As parameter t goes from 0 to 1, the x and y take on the corresponding values of x, y on the line segment. The goal is to determine if a circle with center cx,cy and radius rad overlaps the line segment. One way to do this is to determine the closest point on the line to cx,cy and see if the distance from that point is less than rad. In Figure 7-8, you see a sketch of part of a line with the line segment depicted with a solid line and the rest of what is shown of the line indicated by dots. The value of t at one end is 0 and the other end is 1.There are two points c1x,c1y and c2x, c2y. The c1x,c1y point is closest to the line outside the critical line segment. The point c2x,c2y is closest somewhere in the middle of the line segment. The value of t would be between 0 and 1.

Figure 7.8. A line segment and two points

The formula for the distance between the two points (x,y) and (cx,cy) is

distance = ((cx-x)*(cx-x)+(cy-y)*(cy-y)).5

Substituting for x and for y using equations a and b, we get a formula for distance.

Equation c: distance = ((cx-sx+t*(fx-sx))*(cx- sx + t*(fx-sx))+(cy- sy + t*(fy-sy))*(cy- sy + t*(fy-sy))).5

For our purposes, we want to determine the value of t when distance is at a minimum. Lessons from calculus and reasoning about minimum versus maximum in this situation tell us first that we can use the distance squared in place of the distance and so avoid taking square roots. Moreover, the value is at a minimum when the derivative (with respect to t) is zero. Taking the derivative and setting that expression to zero, produces the value of t at which the cx,cy is closest to the line. In the code, we define two extra variables, dx and dy, to make the expressions simpler.

dx = fx-sx
        dy = fy-sy;
              t= 0.0 –((sx-cx)*dx+(xy-cy)*dy)/((dx*dx)+(dy*dy))

This will produce a value for t. The 0.0 is used to force the calculations to be done as floating point numbers (numbers with fractional parts, not restricted to whole numbers).

We use equations a and b to get the x,y point corresponding to the value of t. This is the x,y closest to cx,cy. If the value of t is less than 0, we check the value for t = 0, and if it is more than 1, we check the value for t = 1. This means that the closest point was not a point on the line segment, so we will check the appropriate end of the line segment closest to that point.

Is the distance from cx,cy to the closest point close enough to be called a collision? We again use distance squared and not distance. We evaluate the distance squared from cx, cy to the computed x,y. If it is less than the radius squared, there is an intersection of the circle with the line segment. If not, there is no intersection. Using the distance squared does not make a difference: if there is a minimum for the value squared, then there is a minimum for the value.

Now the very good news here is that most of the equations are not part of the coding. I did the work beforehand of determining the expression for the derivative. The intersect function follows, with comments:

function intersect(sx,sy,fx,fy,cx,cy,rad) {
   var dx;
   var dy;
   var t;
   var rt;
   dx = fx-sx;
  dy = fy-sy;
  t =0.0-((sx-cx)*dx+(sy-cy)*dy)/((dx*dx)+(dy*dy));  //closest t
  if (t<0.0) { //closest beyond the line segment at the start
    t=0.0; }
  else if (t>1.0) {  //closest beyond the line segment at the end
    t = 1.0;
  }

  dx = (sx+t*(fx-sx))-cx; // use t to define an x coordinate
  dy = (sy +t*(fy-sy))-cy; // use t to define a y coordinate
  rt = (dx*dx) +(dy*dy);  //distance squared
  if (rt<(rad*rad)) {  // closer than radius squared?
      return true; }   // intersect
else {

return false;}    // does not intersect
}

In our application, the player presses an arrow key and, based on that key, the next position of the token is calculated. We call the intersect function to see if there would be an intersection of the token (approximated as a circle) and a wall. If intersect returns true, the token is not moved. The checking stops as soon as there is an intersection. This is a common technique for collision checking.

The Web was originally designed for files being downloaded from the server to the local, so-called client computer for viewing, but with no permanent storage on the local computer. Over time, people and organizations building web sites decided that some sort of local storage would be advantageous. So, someone came up with the idea of using small files called cookies to keep track of things, such as user IDs stored for the convenience of the user as well as the web site owner. The use of cookies, Flash's shared objects, and now HTML5 local storage has grown considerably with the commercial Web. Unlike the situation for the applications shown here, the user often does not know that information is being stored and by whom, and for what purpose the information is accessed.

The localStorage facility of HTML5 is browser-specific. That is, a maze saved using Chrome is not available to someone using FireFox.

Let's take a closer look at using local storage by examining a small application that saves date and time information. Local storage and the Date function, introduced in Chapter 1, provide a way to store date/time information. Think of local storage as a database in which strings of characters are stored, each under a specific name. The name is called the key, the string itself is the value, and the system is called key/value pairs. The fact that local storage just stores strings is a restriction, but the next section shows how to work around it.

Figure 7-9 shows a screen shot from the opening screen of a simple date saving application.

Figure 7.9. A simple save date application

The user has three options: store information on the current date and time, retrieve the last information saved, and remove the date information. Figure 7-10 shows what happens when clicking "Retrieve date info" the very first time using this application (or after the date has been removed).

Figure 7.10. Data not yet saved or after removal

Our application uses a JavaScript alert box to show a message. The user needs to click the OK button to remove the alert box from the screen.

Figure 7-11 shows the message after a user clicks the Store date info button.

Figure 7.11. After storing date information

If the user later clicks on the Retrieve date info button, he'll see a message similar to Figure 7-12.

Figure 7.12. Retrieving the stored date information

You can give your players a way to remove the stored information using a Remove date info button. Figure 7-13 shows the result.

Figure 7.13. After removing stored information

HTML5 lets you save, fetch, and remove a key/value pair, using methods for the built-in object localStorage.

The command localStorage.setItem("lastdate",olddate) sets up a new key/value pair or replaces any previous one with the key equal to lastdate. The statement

last = localStorage.getItem("lastdate");

assigns the fetched value to the variable last. In the code for our simple example, we just display the results. You can also check for something being null and provide a friendlier message.

The command localStorage.removeItem("lastdate") removes the key/value pair with lastdate as the key.

For our simple date application, we set the onClick attribute of each button object to be some JavaScript code. For example:

<button onClick="javascript:store();">Store date info. </button>

causes store() to be invoked when the button is clicked.

You may be wondering if anyone can read any of the saved information in local storage. The answer is that access to each key/value pair in localStorage (and in other types of cookies) is restricted to the Web site that stored the information. This is a security feature.

The Chrome browser allows testing of local storage with HTML5 scripts stored on the local computer. Firefox does not. This means that to test these applications in Firefox, you'll need to upload the file to a server.

Because browsers may not support local storage or there may be other problems such as exceeding limits set by the user for local storage and cookies, it is a good practice to include some error checking. You can use the JavaScript function typeof to check if localStorage is accepted by the browser:

if (typeof(localStorage)=="undefined")

Figure 7-14 shows the result of loading the date application and clicking on the Store date info button in an old version of Internet Explorer. (By the time you read this book, the latest version of IE may be out and this will not be a problem.)

Figure 7.14. The browser didn't recognize localStorage.

JavaScript also provides a general mechanism for avoiding the display of errors. The compound statement try and catch will try to execute some code and if it doesn't work, go to the catch clause.

try {
        olddate = new Date();
        localStorage.setItem("lastdate",olddate);

alert("Stored: "+olddate);
 }
 catch(e) {
         alert("Error with use of local storage: "+e);}
}

If you removed the if (typeof(localStorage) test and tried the code in the old IE, you'd see the message shown in Figure 7-15.

Figure 7.15. Browser error, caught in a try/catch

The Table 7-1 shows the complete date application. Remember: you may need to upload this to a server to test it.

<html>

<head>

<title>Local Storage test</title>

<script>

function store() {

        if (typeof(localStorage) == "undefined") {

        alert("Browser does not recognize HTML local storage.");

}

else {

 try {

         olddate = new Date();

           localStorage.setItem("lastdate",olddate);

        alert("Stored: "+olddate);

 }

 Catch(e) {

         alert("Error with use of local storage: "+e);}

}

Return false;

}

 function remove() {

             if (typeof(localStorage) == "undefined") {

             alert("Browser does not recognize HTML local storage.");

}

else {

                localStorage.removeItem('lastdate'),

              alert("Removed date stored.");

              }

              return false;

 }

 function fetch() {

             if (typeof(localStorage) == "undefined") {

             alert("Browser does not recognize HTML local storage.");

}

else {

                             alert("Stored
"+localStorage.getItem('lastdate'));

              }

              return false;

 }

</script>

</head>

<body>

<button onClick="javascript:store();">Store date info
</button>

<button onClick="javascript:fetch();">Retrieve date
info </button>

<button onClick="javascript:remove();">Remove date
info </button>

</body>

</html>

Combining the Date function with localStorage lets you do many things. For example, you can calculate the elapsed time between a player's current and last use of the application or, perhaps, the player winning two games. In Chapter 5, we used Date to compute the elapsed time using the getTime method. Recall that getTime stores the number of milliseconds from January 1, 1970. You can convert that value to a string, store it, and then when you fetch it back, do arithmetic to calculate elapsed time.

The localStorage key/value pairs last until they are removed, unlike JavaScript cookies, for which you can set a duration.

For simplicity's sake, the first application consists of just one HTML document. You can use this version to create mazes, store and retrieve them, and move the token through the maze. The second version of the application involves two HTML documents. One script is the same as the first application and can be used for building, traversing, and saving mazes as well as traveling each maze. The second script is just for traveling one of a fixed list of saved mazes. A set of radio buttons allows the player to pick from easy, moderate, and hard options, assuming someone has created and saved mazes with the names easymaze, moderatemaze, and hardmaze. These names can be anything you want and as many as you want. You just need to be consistent between what you create in one program and what you reference in the second program.

Now let's address the issue that localStorage just stores character strings. The applications described here must store enough information about the walls so that these walls can be added to the canvas. In the one-document version, the old walls are actually added to whatever is on the canvas. The two-document version erases any old maze and loads the requested one. I use two forms, each with an input field for the name and a submit button. The player chooses the name for saving a maze and must remember it for retrieving.

The data to be stored is a character string, that is, a piece of text. We will create the text holding the information for a set of walls by doing the following for each wall:

The sw string variable will hold all the coordinates (four numbers for each wall) for all the walls. The next step is to use the localStorage.setItem method to store sw under the name given by the player. We do this using the try and catch construction explained in the last section.

try {
   localStorage.setItem(lsname,sw);
}

catch (e) {
    alert("data not saved, error given: "+e);
}

This is a general technique that will try something, suppress any error message, and if there is an error, it will invoke the code in the catch block.

Retrieving the information works in a corresponding way. The code extracts the name given by the player to set the variable lsname and then uses

swalls = localStorage.getItem(lsname);

to set the variable swalls. If this is not null, we use the string method split to do the opposite of join: split the string on the symbol given (we split at every semicolon) and assign the values to the successive elements of an array. The relevant lines are

wallstgs = swalls.split(";");

and

sw = wallstgs.split("+");

Next, the code uses the information just retrieved and the fixed information for wall width and wall style to create a new Wall object:

curwall = new Wall(sx,sy,fx,fy,wallwidth,wallstyle);

Finally, there is code to add curwall to both the everything array and the walls array.

Radio buttons are sets of buttons in which only one member of the set can be selected. If the player makes a new choice, the old choice is deselected. They are an appropriate choice for the hard/moderate/easy selection for this application. Here's the HTML markup in the <body> section:

<form name="gf" onSubmit="return getwalls()" >
<br/>
<input type="radio" value="hard" name="level" />Hard <br/>
<input type="radio" value="moderate" name="level" />Moderate <br/>
<input type="radio" value="easy" name="level" />Easy<br/>
<input type="submit" value="GET maze"/><br/>
</form>

Notice that all three input elements have the same name. This is what defines the group of buttons of which only one may be selected. In this case, the markup creates an array called level. The getwalls function will be shown in full in the next section. It is similar to the function in the all-in-one script. However, in this case, the name of the localStorage item is determined from the radio buttons. The code is

for (i=0;i<document.gf.level.length;i++) {
 if (document.gf.level[i].checked) {
     lsname= document.gf.level[i].value+"maze";
        break;
   }
}

The for loop iterates over all the input items. The if test is based on the checked attribute. When it detects a true condition, the variable lsname is constructed from the value attribute of that item, and the break; statement causes execution to leave the for loop. If you want your radio buttons to start with one of the items checked, use code like this:

<input type="radio" value="easy" name="level" checked />

or

<input type="radio" value="easy" name="level" checked="true" />

The localStorage data can be accessed by a different application from the one that created the data, as long as it is on the same server. This is a security feature, as mentioned previously, restricting readers of local storage to scripts on the same server.

The second script is based on this feature. Table 7-4 shows the functions calling or being called; it is a subset of the previous one.

The functions are exactly the same as in the all-in-one script with one exception, the getwalls function, so I've only commented the new or changed code. This application also has radio buttons in place of the form input fields. Table 7-5 shows the complete code for the travelmaze application.

<html>

<head>

      <title>Travel maze</title>

      <script type="text/javascript">

        var cwidth = 900;

        var cheight = 350;

        var ctx;

        var everything = [];

        var curwall;

        var wallwidth = 5;

        var wallstyle = "rgb(200,0,200)";

        var walls = [];

        var inmotion = false;

        var unit = 10;

function Token(sx,sy,rad,stylestring,n) {

    this.sx = sx;

    this.sy = sy;

    this.rad = rad;

    this.draw = drawtoken;

    this.n = n;

    this.angle = (2*Math.PI)/n

    this.moveit = movetoken;

    this.fillstyle = stylestring;

}

function drawtoken() {

        ctx.fillStyle=this.fillstyle;

        ctx.beginPath();

        var i;

        var rad = this.rad;

        ctx.beginPath();

        ctx.moveTo(this.sx+rad*Math.cos

(-.5*this.angle),this.sy+rad*Math.sin

(-.5*this.angle));

        for (i=1;i<this.n;i++) {

        ctx.lineTo(this.sx+rad*Math.cos

((i-.5)*this.angle),this.sy+rad*Math.sin

((i-.5)*this.angle));

        }

        ctx.fill();

}

function movetoken(dx,dy) {

        this.sx +=dx;

        this.sy +=dy;

        var i;

        var wall;

        for(i=0;i<walls.length;i++) {

           wall = walls[i];

              if (intersect(wall.sx,wall.sy,

wall.fx,wall.fy,this.sx,this.sy,
this.rad)) {

              this.sx -=dx;

              this.sy -=dy;

              break;

              }

        }

}

function Wall(sx,sy,fx,fy,width,stylestring) {

        this.sx = sx;

        this.sy = sy;

        this.fx = fx;

        this.fy = fy;

        this.width = width;

        this.draw = drawAline;

        this.strokestyle = stylestring;

}

function drawAline() {

        ctx.lineWidth = this.width;

        ctx.strokeStyle = this.strokestyle;

        ctx.beginPath();

        ctx.moveTo(this.sx,this.sy);

        ctx.lineTo(this.fx,this.fy);

        ctx.stroke();

}

var mypent = new
Token(100,100,20,"rgb(0,0,250)",5);

everything.push(mypent);

function init(){

     ctx = document.getElementById('canvas')

.getContext('2d'),

     window.addEventListener('keydown',

getkeyAndMove,false);

     drawall();

}

function drawall() {

        ctx.clearRect(0,0,cwidth,cheight);

        var i;

        for (i=0;i<everything.length;i++) {

              everything[i].draw();

        }

}

function getkeyAndMove(event) {

    var keyCode;

    if(event == null)

    {

      keyCode = window.event.keyCode;

        window.event.preventDefault();

    }

    else

    {

      keyCode = event.keyCode;

        event.preventDefault();

    }

    switch(keyCode)

    {

        case 37:  //left arrow

       mypent.moveit(-unit,0);

        break;

      case 38:  //up arrow

     mypent.moveit(0,-unit);

        break;

      case 39: //right arrow

     mypent.moveit(unit,0);

        break;

      case 40:  //down arrow

    mypent.moveit(0,unit);

        break;

          default:

           window.removeEventListener

('keydown',getkeyAndMove,false);

            }

    drawall();

 }

 function intersect(sx,sy,fx,fy,cx,cy,rad) {

     var dx;

     var dy;

     var t;

     var rt;

 dx   = fx-sx;

 dy   = fy-sy;

 t   =0.0-((sx-cx)*dx+(sy-cy)*dy)/((dx*dx)+(dy*dy));

if   (t<0.0) {

       t=0.0; }

else if (t>1.0) {

      t = 1.0;

    }

dx = (sx+t*(fx-sx))-cx;

dy = (sy +t*(fy-sy))-cy;

rt = (dx*dx) +(dy*dy);

if (rt<(rad*rad)) {

        return true; }

else {

        return false;}

}

function getwalls() {

        var swalls;

        var sw;

        var i;

        var sx;

        var sy;

        var fx;

        var fy;

        var curwall;

        var lsname;

        for
(i=0;i<document.gf.level.length;i++) {

 if   (document.gf.level[i].checked) {

       lsname=
document.gf.level[i].value+"maze";

         break;

     }

}

        swalls=localStorage.getItem(lsname);

        if (swalls!=null) {

        wallstgs = swalls.split(";");

        walls = [];

        everything = [];

        everything.push(mypent);

        for (i=0;i<wallstgs.length;i++) {

              sw = wallstgs[i].split("+");

              sx = Number(sw[0]);

              sy = Number(sw[1]);

              fx = Number(sw[2]);

              fy = Number(sw[3]);

              curwall = new
Wall(sx,sy,fx,fy,wallwidth,wallstyle);

              walls.push(curwall);

              everything.push(curwall);

        }

        drawall();

        }

        else {

              alert("No data retrieved.");

        }

        window.addEventListener('keydown',

getkeyAndMove,false);

        return false;

}

</script>

</head>

<body onLoad="init();" >

<canvas id="canvas" width="900"
height="350">

Your browser doesn't support the HTML5
element canvas.

</canvas>

<br/>

Choose level and click GET MAZE button to

get a maze:

<form name="gf" onSubmit="return getwalls()" >

<br/>

<input type="radio" value="hard"
name="level"

 />Hard <br/>

<input type="radio" value="moderate"
name="level"

 />Moderate <br/>

<input type="radio" value="easy"
name="level"

 />Easy<br/>

<input type="submit" value="GET maze"/><br/>

</form>

<p>

Use arrow keys to move token.

</p>

</body>

</html>

There are a number of ways you can make this application your own.

Some applications in which the user places objects on the screen by dragging limit the possibilities by doing what is termed snapping the end points to grid points, perhaps even limiting the walls for a maze to be strictly horizontal or vertical.

The second application has two levels of user: the creator of the mazes and the player who attempts to traverse the mazes. You may want to design very intricate mazes, and for that you would want an editing facility. Another great addition would be a timing feature. Look back at the timing for the memory game in Chapter 5 for ways to calculate elapsed time.

Just as we added a video treat for the quiz show in Chapter 6, you could play a video when someone completes a maze.

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 you've acquired here, you'll be able to put together many different interactive applications.