Universal Windows Platform – Tutorial Insider – High Or Low



comentsys.wordpress.com today features a Universal Windows Platform tutorial showing how to create a Card-based game where you need to guess if the next card is higher or lower than the last – this ignores the suit so the Eight of Diamonds is higher than the Six of Hearts but mainly shows how to create realistic looking playing cards.


The symbols for the suits – Club, Diamond, Heart and Spade are defined as paths so they are scalable – then there is a string[] of names for the card “pips” and the possible values for a playing card and in this Aces are Low. There’s a table int[][] that represents all the possible pip configurations for a playing card – playing cards are more complex than something like a dice or domino so there’s more positions they can appear in than you’d think in a grid and there’s values to represent the deck and a random number generator.

There’s a method GetGeometry which helps gets the paths for the suits and an AddPip method which calls that to create the correct pip with the right suit which is called by the Add method this is used for creating the “pips” on a card, there’s also the AddItem method to add the smaller pips that appear in each corner – these methods will correctly flip a pip so it appears more like a real card would in a deck. The AddFace method is used for the “Face” cards such as King or Queen and the SetPip method sets the visibility of a pip by setting the Opacity – the corner item pips are set with SetItem and the face cards set with SetFace.

A card is represented within a ViewBox which has a Grid within to create the part of the card to make it have rounded corners and with a white background and a black border then the main layout is created to define where the pips can go and for the the four corners where there will be a number or letter of a face card displayed and then all the pips are added to the layout. The SetCard method allows the card to be set with a particular value and controls the foreground colour of the card and which pips will be visible to represent all the cards in a deck and is set up from the Layout method.

There’s a Shuffle method to randomise the deck and you can start a New game before guessing if the next card selected when a card is tapped / clicked is Higher or Lower than the previous card – if correct it will go onto the next one, if wrong it is Game Over and it will display a message that you were incorrect and how many turns you managed with the aim being to get as many turns as possible.

Behind the Scenes

There’s been a Playing Cards example written as a Tutorial before so the main aim was to perfect the look and feel of a playing card so these could then be used in other examples or games, even if the game itself is rather simple getting the cards to look correct was a real challenge with many hours of work going into them including making sure the pips are placed accurately and those that should appear upside down do so, when compared with a standard deck of playing cards this example should hopefully demonstrate a close resemblance to the real thing – and that’ what the main aim of this example was and hope it delivers on that promise.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s