HTML and CSS Reference
In-Depth Information
Critical requirements
The digital versions of the games require ways to represent the card backs (which are all the same) and
the fronts with their distinct polygons or photos. The applications must also be able to tell which cards
match and where cards are on the board. Additionally, players require feedback. In the real-world game,
participants flip over two cards and look for a match (which takes a few moments). If theres none, they flip
the cards face down again.
The computer program must show the faces of the selected cards and pause after revealing the second
card so players have time to see the two faces. This pause is an example of something required for a
computer implementation that occurs more-or-less naturally when people play the game. The application
should also display the current number of pairs found and, when the game is complete, the length of time
participants took to find them all. The polygon and photo versions of the program use different approaches
to accomplish these tasks.
Heres a summary of what the two game versions must do:
•
Draw the card backs.
•
Shuffle the cards before a player makes an initial selection so the same array of choices
doesnt appear every time.
•
Detect when a player clicks on a card, and distinguish between a first and a second click.
•
On detecting a click, show the appropriate card face by: drawing polygons in the case of game
version one or displaying the correct photograph for version two.
•
Remove pairs that match.
•
Operate appropriately even if those pesky players do the unexpected, such as clicking on the
same card twice or on an empty space formerly occupied by a card.
HTML5, CSS, JavaScript features
Lets go over the specific HTML5 and JavaScript features that provide what we need to implement the
games. Well build on material covered previously: the general structure of HTML documents; how to draw
rectangles, images, and paths made up of line segments on a
canvas
element; programmer-defined and
built-in functions; programmer objects; the
form
element; and arrays.
New HTML5 and JavaScript features include the time out event, the use of
Date
objects for the calculation
of elapsed time, writing and drawing text on the canvas, and several useful programming techniques that
youll find valuable in future applications.
As in the previous chapters, this section describes the HTML5 features and programming techniques in
general terms. You can see all the code in context in the “Building the Application” section. If you like, you
can skip to that section to see the code, then return here for explanations of how the features work.
Representing cards
When we hold a physical card in our hands, we can see what it is. Theres 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.
