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.
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 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
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:
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
- Found and Attempts counters
- The game grid
The game logic
The game logic requires the following functions:
- 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.
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.
To comment on BlendInsider's post,
please visit the original source