About this series: this tutorial series can help you get started with basic design tasks in Blend 5 for Windows Developer Preview. When you complete all the steps of this tutorial series, you will have created 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.

Microsoft Expression Blend 5 for Windows Developer Preview and Microsoft Visual Studio 11 Express for Windows Developer Preview can speed up and simplify the app design/development process.

The workflow

Because projects can move freely between Expression Blend for Windows Developer Preview and Visual Studio 11 Express for Windows Developer Preview, you can pick where to start building your app.

You can start designing in Expression Blend for Windows Developer Preview, save your project, and then hand it off to a developer who can use Visual Studio 11 Express for Windows Developer Preview to write and debug the app logic.

Alternatively, a developer can do the coding first in Visual Studio 11 Express for Windows Developer Preview, save the solution, hand it off to you, and you can open it in Expression Blend for Windows Developer Preview, where you can add layout and design components.

Posts in this Series:

Blend Tutorial Part 1: Design Your First Metro Style App with JavaScript, HTML5, CSS [This post.]
Blend Tutorial Part 2: Create the Project—Memory Game
Blend Tutorial Part 3: Add a Style Sheet—Memory Game
Blend Tutorial Part 4: Create a Flexible Layout—Memory Game
Blend Tutorial Part 5: Align Content to The Grid—Memory Game
Blend Tutorial Part 6: Style the Game Board—Memory Game
Blend Tutorial Part 7: Style the Cards—Memory Game
Blend Tutorial Part 8: Add CSS Transitions—Memory Game
Blend Tutorial Part 9: Build and Run Your App—Memory Game

Designing an app created by a developer

This tutorial describes a project that began with a developer who, working in Visual Studio 11 Express for Windows Developer Preview, defined the semantic structure as HTML markup, and game logic developed using JavaScript.

For a description of the game, see Memory game overview, at the end of this post.

The task in this tutorial is to use the design surface of Expression Blend 5 for Windows Developer Preview to complete the layout and styling tasks for a simple game app.

In addition to the source files, the developer also handed off Developer notes, with some details about the code and suggestions about how to style elements of the game. The notes are provided at the end of this post.

The source files in the project include the following, which are provided in the next post:

• Semantic structure defined in HTML Provides the document object model (DOM) as well as some ID and class names.
• Game logic in JavaScript Provides the game functions. The script also dynamically creates some IDs and classes.

The next step: Blend Tutorial Part 2: Create the project—Memory Game.

Memory Game Overview

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
• Select card style button
• 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.

Developer Notes

These are the notes that the developer provided for this sample application.

• The gameGrid element is a container that holds the game cards. The cards are generated by the code.

• Each card is a clone of the content of the cardTemplate element, which is only used as a template for the game cards. The code looks inside the template you provide and sets the source property of any image element it finds to a card image for the game. Also, if it finds a <p> tag, it sets the content to the URL of the image.

• Every game card has a class name gameItem assigned to it. Use the gameItem class to style against the card.

• Each card has three class names assigned to it depending on its state:
• closedCard The face down state.
• openCard The face up state.
• foundCard The matched state.

• The game logic supports three sizes for the game board:
• small Uses 16 cards (8 pairs).
• medium Uses 36 cards (18 pairs).
• large Uses 64 cards (32 pairs).

• The image view popup is defined in the div popupHolder:
• openImagePopup openImagePopup is the class assigned when the pop-up image is displayed.
• closeImagePopup closeImagePopup is the class assigned when the pop-up image is hidden.