HTML5 Game Development by Example(Second Edition)

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 ...