Memory game overview (HTML)

This tutorial creates a lightweight, dynamic version of the memory game commonly referred to as "Concentration." In the game, a number of cards are laid face down. The objective of the game is to turn over pairs of matching cards until all of the matching pairs have been revealed.

Major components of the game

This app requires the following components:

The game design

The visual design and layout will consist of the following regions:

• A header that contains the app title and a short set of instructions

  

• A panel that contains the following items:

  • Start and Stop buttons

  • Game size control

  • Timer

  • Found and Attempts counters

  

• The game grid

  

The game logic

The game logic requires the following functions:

• Timer

• Game size

• Number of attempts

• Number of successful attempts

Different game views

The game contains media queries to tailor the game layout to the display format of the device. For example, the layout has different configurations for portrait and landscape displays.

Notice that the header retains its position at the top of the app window but the button section is relocated between the header and the grid and the buttons are re-flowed to fit the horizontal button section.

The next step: Design your first Windows Store app (HTML).