In this article we will learn how to create a simple Name Puzzle game for Windows Mobile using Universal App development

Prerequisites

  1. Visual Studio 2015. You can download it from here. (In my example I used Visual Studio Community 2015 RC.)
  2. Pre-release Microsoft Emulator for Windows 10 Mobile (download link).
  3. Universal App development Tools (download Link).

Note: I have used the Windows 10 Technical preview OS in this sample program, if you have Windows 10 Technical preview then you can follow it. If you have Windows 8 then you can download the Windows 8 Emulator and follow the same procedure to create your first Universal App. (If you have installed Windows 8 then it will be easy to update Windows 10 Technical Preview with your system).Now Windows 10 has been released you can use Windows 10 OS .

Windows Universal Application 

The following describes why we need Universal Applications.

If we want an application that needs to be run in any Windows device, for example Windows Phone and Windows 8 or Windows 10 operating system, then we can develop a single application that can be run in any Windows device using Windows Universal Application.

What is Name Puzzle Game

A Name Puzzle Game is a quiz game where user needs to select my total character of name from the Hidden Character. I have a set of 12 Character for example “ABSDEHGZNXCU” .In this total character my Name Character “SHANU” has been added. Whenever user clicks on a New Puzzle Game button, I will shuffle all the character and dynamically load the buttons with “?” symbol for all characters. Here we can see when a user clicks on new game button. I will dynamically load 12 buttons with “?” symbol as button text. Now the user will not know which button has my name characters.

When they click on each button I will display the hidden character of the button text. If the button has the same character of my name then I will display my name character in that button and also at the Top I will display the Character the user has selected correctly. If the user clicked other characters which are not my name character then I will display “:)” symbol in the button as user failed to select my name character.

Note User has only 9 chances out of 12 Buttons. User need to find all my name characters within 9 chances. If they find my total Name character with in 9 chances then they have won the Puzzle game .They can start new game and enjoy the game. Every time when the user clicks on the new Game I will shuffle the character so the character placed in previous button place will not be same for next time. If the user not find my name character with in 9 chances then they lose the game.

Description

Here we can see the simple procedure to create and run your first Universal Application using Visual Studio 2015 RC.(Now Visual Studio 2015 is available you can download the latest community version and use it).

Click Start then select Visual Studio 2015 then select Visual Studio 2015 RC. Click on New Project then click Windows then click Windows Universal then click on Download Windows Universal Tools.

Note if you didn't install the Windows Universal Tools then for the first time you need to Download and install it as in the following method.



When you click OK the Website link will be opened to download the Tools for Windows Universal App development.

After Installing the Tool Open the Visual Studio 2015 RC then click New project then click Windows then click Windows Universal then click Blank App and enter your application name.

Note: Here after installing the tools for the Windows Universal App development we can see a few new application lists as Blank App, Class Library and so on. Now as we need to develop the Universal Application we select the Blank App and enter our project name and click OK.



Now here we can see our first Universal Application development screen. By default the main screen name will be Mainpage.xaml.

Here the design page extension will be Extensible Application Markup Language (XAML). If you have worked with WPF then it will be easy to work with Universal Application as in WPF all form file will be as XAML.


Add controls depending on your requirements and write your first code to display your output. In this example I have used a Textblock (Textblock is similar to a Label Control), TextBox , Button and a grid control. The Grid control is the main as I will add buttons dynamically to the grid when ever user clicks on the New game button.

To display the Messagebox we need to import using Windows.UI.Popups;

Public variable:

Each variable has been commented with its uses.

String myName = "SHANU" // This is used to find the name here I have used “Shanu” as my name you can change as per your name or any word.
  
        Button[] puzzleButtons; // I have created a declared the button arrays to dynamically load the buttons to grid depend on total NamePuzzle Character length.
  
 int CharCount = 0; // To check and maintain the user click on each button
 int nameCharCount = 0; // To check and maintain correct character clicked count.if this equals myName.length then the user won the game.
  
        int findvalue = 9; // To check the reault count which is less then the find value here I have used 9 so the user can check there name trail only for 9 times.

New Game Button Click:

        In New game button click I will check for the total namePuzzle character and add the buttons dynamically to the grid .For the dynamically added buttons I will create a click event for checking the each result of the puzzle.

private void button_Click(object sender, RoutedEventArgs e)
        {
            string namePuzzle = "ABSDEHGZNXCU";
  
            // to shuffle the character and reorder the characters for new Puzzle Game start
  
            Random rnd = new Random();
  
  
            string findmyNameChar = new string(namePuzzle.ToCharArray().
                            OrderBy(s => (rnd.Next(2) % 2) == 0).ToArray());
  
            int xVal = 10;
            int yVal = 20;
            int boxWidth = (Convert.ToInt32(pnlButtons.Width) / 3) - 20;
            int boxHeight = 54;
            pnlButtons.Children.Clear();
            CharCount = 0;
            nameCharCount = 0;
            lblmyNameChars.Text = "";
  
  
            MessageDialog dlg = new MessageDialog("Note : you have only 9 Chance to find my name and my Name total Character is 5", "Find My Name");
            dlg.ShowAsync();
  
  
            puzzleButtons = new Button[findmyNameChar.Length];
            int column = 0;
            int rows = 0;
  
            for (int i = 0; i < findmyNameChar.Length; i++)
            {
                puzzleButtons[i] = new Button();
                puzzleButtons[i].Name = findmyNameChar[i].ToString();
  
                puzzleButtons[i].FontSize = 24;
                puzzleButtons[i].Background = new SolidColorBrush(Windows.UI.Colors.Orange);
  
                puzzleButtons[i].Foreground = new SolidColorBrush(Windows.UI.Colors.Black);
  
                puzzleButtons[i].Width = boxWidth;
                puzzleButtons[i].Height = boxHeight;
  
                puzzleButtons[i].Content = "?";
  
                puzzleButtons[i].HorizontalAlignment = HorizontalAlignment.Left;
                puzzleButtons[i].VerticalAlignment = VerticalAlignment.Top;
  
                puzzleButtons[i].Margin = new Thickness(xVal, yVal, 0, 0);
  
  
                puzzleButtons[i].Click += new RoutedEventHandler(btnPuzzleArray_Click);
  
  
  
  
  
                pnlButtons.Children.Add(puzzleButtons[i]);
  
                xVal = xVal + boxWidth + 10;
                column = column + 1;
  
                if (xVal + 100 >= pnlButtons.Width)
                {
                    rows = rows + 1;
                    column = 0;
                    xVal = 10;
                    yVal = yVal + boxHeight + 20;
                }
  
            }
        }

In the dynamically created button click .I will check the clicked character with Name .if the character is found in the name then I will increment the count value .if the count value is equal to the Name total character length then I will display the message box as the user has won the puzzle game.

private void btnPuzzleArray_Click(object sender, RoutedEventArgs e)
        {
  
            Button tb = (Button)sender;
            CharCount = CharCount + 1;
  
  
  
  
            if (CharCount > findvalue)
            {
                if (nameCharCount >= myName.Length)
                {
                    MessageDialog dlg = new MessageDialog("Wow You find my name with in your trial limit ", "Find My Name");
                    dlg.ShowAsync();
                    
                }
                else
                {
                    MessageDialog dlg = new MessageDialog("Sorry your can try only 9 time and start New game", "Find My Name");
                    dlg.ShowAsync();
                     
                }
  
                return;
            }
  
            if (myName.ToUpperInvariant().Contains(tb.Name.ToString()) == true)
            {
                tb.Content = tb.Name.ToString();
  
                tb.IsEnabled = false;
  
                tb.Foreground = new SolidColorBrush(Windows.UI.Colors.Green);
                nameCharCount = nameCharCount + 1;
                lblmyNameChars.Text = lblmyNameChars.Text + tb.Name.ToString();
                lblmyNameChars.Visibility = Visibility.Visible;
            }
            else
            {
                tb.Content = ":(";
  
                tb.IsEnabled = false;
  
                tb.Foreground = new SolidColorBrush(Windows.UI.Colors.Red);
            }
  
            if (nameCharCount >= myName.Length)
            {
                MessageDialog dlg = new MessageDialog("Wow You find my name with in your trial limit ", "Find My Name");
                dlg.ShowAsync();
                
                return;
            }
  
        }

Now our Simple application is ready. Now to run our application in Windows Phone and as a normal desktop application.
As I have already said, a Windows Universal application can be run in any Windows device. If you didn't install the Windows Emulator then download and install to your computer to run the sample application in the Windows Phone emulator.

Download and install the Emulator. I have used the Windows 10 Emulator.

After installing the Emulator we open our program and now near the Run button we can select our Device type to run our program.



To run our application as a normal Windows output to display in our local machine then we select the Local Machine and click Run. We can see the output is showing as our normal desktop application.


Run in Windows Emulator

Select Emulator and click run. Here I have used the Emulator 10.0.10 UVGA 4 inch.

After the OS has started in the Emulator our application will be run inside the emulator.



User can start Puzzle game by clicking on the New Name Puzzle game button. I will display the message box to the user and after user click close button, the puzzle game will be start.



From the loaded buttons user can click on any button to find my name character. As we can see here if my name character found in the clicked button then I will display its character for example here we can see “S” and rest of buttons has some other character then my name so I will display as “:(“



If user has found my name all character with in 9 trail chances then I will display the message as the user has won the Puzzle with message box.



If user not found my name all character with in 9 trails then I will display the message as failed and to start new game for new try.

You can download the complete Source code from this link Name Puzzle Universal APP