Universal Windows Platform – Tutorial Insider – Slide Game


comentsys.wordpress.com today features a Universal Windows Platform tutorial showing how to create Slide Game which is based on those sliding fifteen-piece puzzle games but where you tap on a piece to move it rather than slide it to solve the puzzle put all the numbers in descending numerical order.


The Piece Class that represents each item that will be displayed on the screen and extends the Grid – it is a Rectangle with a TextBlock on it plus properties to indicate the Row and Column. The main Library Class has an const int to set the size of the game layout plus an int[,] for this set to that size plus a list of values and a random number generator, there’s a Shuffle method to use the random number generator and a Show method to display a message on screen.

The Valid method checkes to see if a move is valid or contains an empty square to move into, Check validates if the board contains a decending sequence of numbers to indicate that the puzzle is complete if that’s the case and is used by the Move method which will use Piece to set the appropriate Row and Column value. Layout is used to set up the game layout and declare each Piece and set it’s initial position with the PointerReleased event on a Piece which will use Valid to verify a move is valid then use Move to before the movement with each possible direction this can be – Up, Right, Down and Left. Then there’s the New method to create a new game and set up the game ready to be played.

Behind the Scenes

A game based on the fifteen piece puzzle is an example that’s been intended for quite some time and seemed initially complex but eventually turned out to be more straightforward than assumed – which of course makes an even better tutorial! This example could be extended to actually allow the pieces to be slid but as a first pass of the game it shows off ability to obey the correct rules for this puzzle as well as checking for a win condition – the pieces don’t just have to be numbers it could be made to display a picture just like the puzzle the example is based on. There was a great lesson learned from this example which is to never assume something is complex and reducing something to a minimum allows it to be better understood first – then more complex functionality can be added afterwards to fine tune it to be more like a real fifteen-piece sliding puzzle.

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