Creating a card-matching memory game

We have gone through some basic techniques in CSS. Now, let's make a game using the techniques. We are going to make a card game. The card game will make use of transform to flip the card, transition to move the card, JavaScript to hold the logic, and a new HTML5 feature called custom data attribute to store custom data. Don't worry, we will discuss each component step by step.

Downloading the sprite sheet of playing cards

In the card-flipping example, we were using the graphics of two different playing cards. Now, we will prepare graphics for the whole deck of playing cards. Although we will only use six playing cards in the matching game, we will prepare the whole deck so that we can reuse these graphics in other card games that we may create.

There are 52 playing cards in a deck and we have one more graphic for the backside. Instead of using 53 separate files, it is good practice to put separate graphics into one big sprite sheet file. Sprite sheet is a graphics technique that loads one graphic's texture into memory and displays part of the graphics for each game component.

One benefit of using a big sprite sheet instead of separate image files is that we can reduce the amount of HTTP requests. When the browser loads the web page, it creates a new HTTP request to load each external resource, including JavaScript files, CSS files, and images. It takes quite a lot of time to establish a new HTTP request for each separated small file. Combining the graphics into one file, greatly reduces the amount of requests and thus improves the responsiveness of the game when it is loading in the browser.

Another benefit of placing graphics in one file is to avoid the overhead of the file format header and reduce the amount of HTTP requests. The time to load a sprite sheet with 53 images is faster than loading 53 different images with the file header in each file.

The following deck of playing cards' graphics is drawn and aligned in Adobe Illustrator. You can download it from http://mak.la/deck.png.

Note

You can create your own sprite sheet with Instant Sprite Generator (http://instantsprite.com). The article at http://css-tricks.com/css-sprites/ explains in detail why and how we can create and use the CSS sprite sheet.

Setting up the game environment

Once the graphics are ready, we will need to set up a static page with the game objects that are prepared and placed on the game area. It is then easier to add game logic and interaction later: