When we hold a physical card in our hands, we can see what it is. There's a card face and back, and the backs are all the same. We can clearly determine the cards' positions on the game board and whether their faces or backs show. To implement a computer game, we must represent—encode—all that information. Encoding is an essential part of creating many computer applications, not just games.

In this chapter (and throughout the book), I describe one way to accomplish the task. Keep in mind, though, that there's rarely just one way to implement a feature of an application. That said, different strategies for building an application will likely have some techniques in common.

Our approach to handling cards will employ a programmer-defined object. Creating a programmer-defined object in JavaScript involves writing the constructor function; in this case we'll call it Card. The advantage of using programmer-defined objects is that JavaScript provides the dot notation needed to access information and code for objects of a common type. We did this for the cannonball and slingshot games in Chapter 4.

We'll give the Card object properties that will hold the card's location (sx and sy) and dimensions (swidth and sheight), a pointer to a function to draw a back for the card, and for each case, the information that specifies the appropriate front (info).

In the case of a polygon, the value of info will indicate the number of sides to be drawn. (In a later section we'll discuss the code for drawing it.) For a photo card face, the value will be a reference, img, to an Image object we've created. The object will hold a specific image file along with a number (info) that ties together pictures that match. To draw the image for the file, we'll use the built-in drawImage method.

Needless to say, the cards don't exist as physical entities, with two sides. The application draws the card's face or back on the canvas where the player expects to see it. The function flipback draws the card's back. To give the appearance of a removed card, flipback effectively erases a card by drawing a rectangle that's the color of the board.

Both applications use a function named makedeck to prepare the deck, a process that includes creation of the Card objects. For the polygon version of the game, we store the number of sides (from three to eight) in the Card objects. The application draws no polygons during setup, though. The photos version sets up an array called pairs, listing the image file names for the photos. You can follow this example to create your own family or group memory game.

The makedeck function creates the Image objects and uses the pairs array to set the src property to the image object. When the code creates Card objects, it puts in the index value that controls the pairs array so that matched photos have the same value. As in the polygon version, the application draws no image on the canvas during the creation of the deck. On the screen, the cards all appear the same; the information is different, though. These cards are in fixed positions—shuffling comes later.

The code interprets position information, the sx and sy properties, differently for Card and Polygon. In the first case, the information refers to the upper-left corner. In the second case, the value identifies the center of the polygon. You can compute one from the other, though.

We need a way to determine how long the player took to make all the matches. JavaScript provides a way to measure elapsed time. You can view the code in context in the "Building the Application section." Here I provide an explanation of how to determine the number of seconds between two distinct events in a running program.

A call to Date() generates an object with date and time information. The two lines

starttime = new Date();
 starttime = Number(starttime.getTime());

store the number of milliseconds (thousands of a second) since the start of 1970 in the variable starttime. (The reason JavaScript uses 1970 doesn't matter.)

When either of our two memory programs determines the game is over, it invokes Date() again as follows:

var now = new Date();
var nt = Number(now.getTime());
var seconds = Math.floor(.5+(nt-starttime)/1000);

This code

If you need more precision than seconds provides, omit or modify the last step.

You can use this code whenever you need to calculate time elapsed between two events in a program.

When we play memory using real cards, we don't consciously pause before flipping nonmatching cards face down. But as noted earlier, our computer implementation must provide a pause so players have time to see the two differing cards. You may recall from chapters 3 and 4 that the animation applications—bouncing ball, cannonball, and slingshot—used the JavaScript function setInterval to set up events at fixed time intervals. We can employ a related function, setTimeout, in our memory games. (To see the complete code in context, go to the "Building the Application" section.) Let's see how to set up the event and what happens when the pause time runs out.

The setTimeout function sets up a single event, which we can use to impose a pause. The choose function, called when a player clicks on the canvas, first checks the firstpick variable to determine if the person has made a first or second selection. In either case, the program draws the card front on the canvas in the same spot as the card back. If the click was a second choice and the two cards match, the code sets the variable matched to true or false, depending on whether the cards did or didn't match. If the application determines that the game isn't over, the code invokes

setTimeout(flipback,1000);

This leads to a call to the flipback function in 1,000 milliseconds (1 second). The function flipback then uses the matched variable to determine whether to redraw card backs or erase the cards by drawing rectangles with the table background color at the appropriate card locations.

You can use setTimeout to set up any individual timed events. You need to specify the time interval and the function you want invoked when the interval expires. Remember that the time unit is milliseconds.

HTML5 includes a mechanism for placing text on the canvas. This provides a much more dynamic, flexible way to present text than previous versions. You can create some good effects by combining text placement with the drawing of rectangles, lines, arcs, and images we've already demonstrated. In this section, we'll outline the steps for placing text in a canvas element, and we'll include a short example that you can try. If you want, skip ahead to the "Building the Application" section to view the complete description of the code that produces what you see in Figures 5-5 through 5-8 for the photos version of the memory game.

To put text on the canvas, we write code that sets the font, and then we use fillText to draw a string of characters starting at a specified x-y location. The following example creates words using an eclectic set of fonts (see the caution note later in the section).

<html>
<head>
    <title>Fonts</title>
<script type="text/javascript">
var ctx;
function init(){
   ctx = document.getElementById('canvas').getContext('2d'),
   ctx.font="15px Lucida Handwriting";
   ctx.fillText("this is Lucida Handwriting", 10, 20);
   ctx.font="italic 30px HarlemNights";
   ctx.fillText("italic HarlemNights",40,80);
   ctx.font="bold 40px HarlemNights"
   ctx.fillText("HarlemNights",100,200);
   ctx.font="30px Accent";
   ctx.fillText("Accent", 200,300);
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="900" height="400">
Your browser doesn't support the HTML5 element canvas.
</canvas>
</body>
</html>

This HTML document produces the screenshot shown in Figure 5-9.

Figure 5.9. Text in different fonts drawn on the canvas, produced using the font and fillText functions

Note that although what you see appears to be text, you're actually looking at ink on the canvas—that is, bitmap images of text, not a text field that you can modify in place. This means that to change the text, we need to write code that will completely erase the current image. We do so by setting the fillStyle to the value we placed in the variable tablecolor earlier, and use fillRect at the appropriate location and with the necessary dimensions.

After creating the text image, the next step is to set fillStyle to a color other than tablecolor. We'll use the color we chose for the card backs. For the opening screen display of the photograph memory game, here's the code to set the font used for all text:

ctx.font="bold 20pt sans-serif";

Using the sans-serif font makes sense, since it's a standard font present on any computer.

Putting together what we've done to this point, here's the code to display the number of matches at a particular point in the game:

ctx.fillStyle= tablecolor;
ctx.fillRect(10,340,900,100);
ctx.fillStyle=backcolor;
ctx.fillText
     ("Number of matches so far: "+String(count),10,360);

The first two statements erase the current tally and the next two put in the updated result. The expression "Number of matches so far: "+String(count) deserves more explanation. It accomplishes two tasks:

The concatenation demonstrates that the plus sign has two meanings in JavaScript: If the operands are numbers, the sign indicates addition. If the operands are character strings, it indicates the two strings should be concatenated—put together. A fancy phrase for a single symbol having several meanings is operator overloading.

What will JavaScript do if one operand is a string and the other a number? The answer depends on which of the two operands is what data type. You'll see examples of code in which the programmer doesn't put in the commands to convert text to a number or vice versa, but the statement works because of the specific order of operations.

I suggest not taking chances, though. Instead, try to remember the rules that govern interpretation of the plus sign. If you notice that your program increases a number from, say, 1 to 11 to 111 when you're expecting 1, 2, 3, your code is concatenating strings instead of incrementing numbers, and you need to convert strings to numbers.

Creating polygons provides a good demonstration of HTML5's drawing facilities. To understand the code-development process used here for drawing polygons, think of the geometric figure as a wheel-like shape with spokes emanating from its center to each of its vertices. The spokes will not appear in the drawings, but are to help you, like they helped me, figure out how to draw a polygon. Figure 5-10 illustrates this with a triangle.

Figure 5.10. Representing a triangle as a spoked geometric shape can help clarify code development for drawing polygons. The arrow indicates the first point in the drawing path.

To determine the measure of the angle between spokes, we divide the quantity 2*Math.PI (representing a complete circle) by the number of sides the polygon has. We use the angle value and the moveTo method to draw the points of the path.

The program draws the polygon as a filled-in path that starts at the point (indicated by the arrow in Figure 5-10) specified by one-half the value of angle. To get to the point, we use the moveTo method along with the radius, Math.sin and Math.cos. We then use the lineTo method for n-1 more points, proceeding in clockwise fashion. For the triangle, n-1 is two more points. For the octagon it would be seven more. After running through a for loop with the lineTo points, we invoke the fill method to produce a filled-in shape. To see the complete annotated code, go to the "Building the Application" section."

As noted previously, the memory game requires the program to shuffle the cards before each round, since we don't want the cards to appear in the same position time after time. The best way to shuffle sets of values is the subject of extensive research. In Chapter 10, which describes the card game called blackjack or 21, you'll find a reference to an article that describes a technique claimed to be the most efficient way to produce a shuffled deck.

For memory/concentration, let's implement the way I played the game as a child. I and the others would lay out all the cards, then pick up and swap pairs. When we thought we had done it a sufficient number of times, we would begin to play. In this section, we'll explore a few more concepts behind this approach. (To examine the shuffle function, you can skip ahead to the "Building the Application" section.)

To write the JavaScript for the swap method of shuffling, we first need to define "sufficient number of times." Let's make that three times the number of cards in the deck, which we've represented in the array variable deck. But since there are no cards, just data representing cards, what are we swapping? The answer is the information uniquely defining each card. For the polygon memory game, this is the property info. For the picture game, it's info and img.

To get a random card, we use the expression Math.floor(Math.random()*dl), where dl, standing for deck length, holds the number of cards in the deck. We do this twice to obtain the pair of cards to be (virtually) swapped. This could produce the same number, meaning a card is swapped with itself, but that's not really a concern. If it happens, this step in this process has no effect. The code mandates a large number of swaps, so one swap not doing anything is okay.

Carrying out the swap is the next challenge, and it requires some temporary storage. We'll use one variable, holder, for the polygon version of the game and two variables, holderimg and holderinfo, for the picture case.

The next step is to explain how we implement the player moves, namely the player clicking on a card. In HTML5, we can handle the click event employing much the same approach that we took with the mousedown event (described in Chapter 4). We'll use the addEventListener method:

canvas1 = document.getElementById('canvas'),
canvas1.addEventListener('click',choose,false);

This appears in the init function. The choose function must contain code to determine which card we choose to shuffle. The program must also return the coordinates of the mouse when the player clicks on the canvas. The methodology for obtaining mouse coordinates is also the same as that covered in Chapter 4.

Unfortunately, different browsers implement handling of mouse events in different ways. I discussed this in Chapter 4, and I repeat the explanation here. The following works in Chrome, Firefox, and Safari.

if ( ev.layerX || ev.layerX==0) {
   mx= ev.layerX;
   my = ev.layerY;
}
else if (ev.offsetX || ev.offsetX==0 ) {
   mx = ev.offsetX;
   my = ev.offsetY;}

This works because if ev.layerX doesn't exist, it will be assigned a value of false. If it does exist but has value 0, the value will also be interpreted as false, but ev.layerX==0 will be true. So if there's a good ev.layerX value, the program uses it. Otherwise, the code looks at ev.offsetX. If neither works, mx and my won't get set.

Because the cards are rectangles, going through the deck and doing compare operations is relatively easy using the mouse cursor coordinates (mx, my), the location of the upper-left corner, and the width and height of each card. Here's how we construct the if condition:

if ((mx>card.sx)&&(mx<card.sx+card.swidth)&&(my>card.sy)&&(my<card.sy+card.sheight)) {

We clear the variable firstpick and initialize it as true, which indicates that this is the first of two picks by a player. The program changes the value to false after the first pick and back to true after the second. Variables like this, which flip back and forth between two values, are called flags or toggles.

Note that the specifics of this section apply just to these memory games, but the general lesson holds for building any interactive application. There are at least two ways a player can thwart the game. Clicking twice on the same card is one; clicking on a region where a card has been removed (that is, the board has been painted over) is another.

To deal with the first case, after the if-true clause that determines whether the mouse is over a certain card, insert the if statement

if ((firstpick) || (i!=firstcard)) break;

This line of code triggers an exit from the for statement if the index value (i) is fine, which happens when either: 1) this is a first pick or 2) this isn't a first pick and i doesn't correspond to the first card chosen.

Preventing the second problem—clicking on a "ghost" card—requires more work. When the application removes cards from the board, in addition to painting over that area of the canvas, we can assign a value (-1, say) to the sx property. This will mark the card as having been removed. This is part of the flipback function. The choose function contains the code that examines the sx property and does the checking (only if sx is >= 0). The function incorporates both cheating tests in the following for loop:

for (i=0;i<deck.length;i++){
   var card = deck[i];
   if (card.sx >=0)
      if
 ((mx>card.sx)&&(mx<card.sx+card.swidth)&&(my>card.sy)&&(my<card.sy+card.sheight)) {
        if ((firstpick)|| (i!=firstcard)) break;
        }
   }

In the three if statements, the second is the whole clause of the first. The third has the single statement break, which causes control to leave the for loop. Generally, I recommend using brackets (for example: { and }) for if true and else clauses, but here I used the stripped-down format for single statements to show you that format and also because it seemed clear enough.

Now let's move on to building our two memory games.