HTML and CSS Reference
In-Depth Information
In this chapter (and throughout the topic), I describe one way to accomplish the task. Keep in mind,
though, that theres 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 well 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.
Well give the
Card
object properties that will hold the cards 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
well discuss the code for drawing it.) For a photo card face, the value will be a reference,
img
, to an
Image
object weve 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, well use the built-in
drawImage
method.
Needless to say, the cards dont exist as physical entities, with two sides. The application draws the
cards face or back on the canvas where the player expects to see it. The function
flipback
draws the
cards back. To give the appearance of a removed card,
flipback
effectively erases a card by drawing a
rectangle thats 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.
Tip:
If you use the online code to play the game, as noted earlier, you can download the image files.
To make the game your own, you need to upload the pictures and then change the code to reference
your files. The code indicates what you need to change.
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.
Using Date for timing
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
