Building a Hangman game in Power Apps

Laura Graham-Brown

0 comments

A fantastic way to learn a new language or tool is to build a game using it, in this case, a ‘Hangman’ game in Power Apps.

What is a Hangman game?

The Hangman game, for those who are not familiar, is a word guessing game, for every wrong letter chosen a part of the hangman is drawn and for every correct letter chosen, that letter is placed into the correct position on the word. To win you need to get all the letters or guess the word correctly before the full Hangman picture is complete.

All good hangman players start with the Vowels of course:

If you don’t manage to guess all the correct letters then the full picture of the stick person hanging is complete and “You lose!!!”. Click the “Another Go” button to try again and it all resets.

Then of course if you manage to get the word correctly guessed you are presented with a smile and a message “You win!!!”

There you have it, a great game to entertain you for hours.

Building the game

Looking at the game on the screen you have the following areas, each built of a collection and gallery:

  • The Answer – Showing the individual letters of the word and which ones have been selected correctly.
  • The Keyboard – a button for each letter.
  • The Hangman – The picture of the hangman is drawn piece by piece.

In addition to these, there is also a collection of the correct letters that have been selected and the wrong letters that have been selected. Keeping track of what the user has clicked so we know which keyboard buttons to grey out and which correct guesses to show on the word.

To start building this PowerApp we choose the ‘Canvas app from blank’ option in PowerApps, select ‘Tablet’, give it a name and then click ‘Create’.

This will then create your PowerApp and we are ready to begin building, starting with our collections.

The Answer Collection

You will require two sets of data in two sheets of an excel spreadsheet for this PowerApp:

  • Your Words Data – A table of answers.
  • Your Drawing Data, which is SVG code.

Attached is the example from this game, you may want to create your own – LGB- HangmanData.

You will need to create and save the file to a known location so that you can import it into two collections within your PowerApp.

Step 1 – Within your PowerApp, select ‘View’ from the top menu, then ‘Data sources’, then select ‘Add a data source’. Choose the relevant data source for the location of your Excel file e.g.

OneDrive or SharePoint could be used.

Then choose your file and select that you want both sheets/tables from within it and then Click ‘Connect’.

You will then be able to see your two data collections and we are ready to move to the next stage.

Step 2 – Choose the ‘Insert’ menu, select ‘Button’ and move it to the bottom right-hand corner. Eventually, this button will be hidden.

Rename the button to ‘Reset’ using the left-hand panel, and select the top code bar to put some code in as per the screenshot below.

This code will set the variable ‘vvRandomNumber’ to a Rounded up (RoundUp) number that is arrived at by taking a number between 0 – 1 (Rand) and multiplying that by the number of rows we have in the Words data source, then finally removing any decimal places by setting the last argument to ‘0’.

You can then test this by adding a label to the screen and setting its value to the variable ‘vvRandomNumber’, then running the program by holding down the ‘alt’ key, and clicking your button. The label should then show a different number each time.

Step 3 – The next part is to use that Random number to select a random word from the Answer column of the Words data collection and set the ‘vvAnswer’ variable to that word.

Again you can test this is working by setting the value of the label we added previously to ‘vvAnswer’ and then holding down ‘Alt’ to run the PowerApp. As you click the button you should see the label text change to a different word each time.

Step 4 – Next we need to build a collection from the random word returned using the Split function to split the word in ‘vvAnswer’ and place each letter as an item in the new collection ‘ccAnswer’.

Now when we click onto our screen, hold down the ‘alt’ key and click the button, you will of course get a new word, however, this time if you select the ‘View’ tab from the top menu, and below that select ‘Collections’ you will see the collection ‘ccAnswer’ as shown below with each letter of the word split into a collection.

There we have our first collection built for the Answer.

Keyboard Collections

One option for creating the keyboard collection of letters would be to type out the code something like this:

However for a large collection that is probably not the most efficient way to do it. There is no loop in PowerApps but we need something to repeat itself so we are going to use a timer.

As part of this, we are going to use the ‘Char’ command, you can test this by putting a label on your screen and setting the text value of that label. ‘Char(65)’ and also try ‘Char(90)’. You should get the letter ‘A’ for the first one and the letter ‘Z’ for the second, you may have guessed that in between those numbers we have the alphabet. So we just need to count from 65 to 90.

Step 1– Firstly ‘OnStart’ of the ‘App’ we are going to set a variable to letter A or to the Char number of letter A which is 65.

Step 2 – Next we are going to add a timer control to our screen and set the duration to = ‘100’. The time control can be found from the top menu, select ‘Insert’ then ‘Controls’. Move your control to the bottom right of the screen and set the duration property to 100.

NB: Each of these elements that we do not need to see in the PowerApp will be hidden at the end.

Step 3 – Next we are going to select ‘Action’ from the top menu and then ‘OnTimerEnd’ property, and add the code for what we want it to do. Once the timer is set up correctly this will add a letter to the collection ‘ccLetters’ each time the timer ends, and increment the ‘vvletterNum’ value so as to add the next letter the next time the timer ends.

Step 4 – Now we need to control when the time will start, and how long it will repeat for. We are going to add the same code to 3 of the properties of the timer.

To do this with the Timer still selected as per the screenshot above, from the ‘Property’ drop down choose ‘Start’. We want to start the time whenever the number of rows in our new ‘ccLetters’ collection is less than 26, as we know that’s how many letters are in the alphabet.

Copy that code and repeat it for the ‘AutoStart’ and ‘Repeat’ properties of the timer. This will mean that the timer will start, and repeat until the number of letters in our collection is 26.

Step 5 – Now we can run the App to test if it works ok. Click on the ‘App’ and the ‘…’ 3 dots menu next to it and select ‘Run OnStart’.

Then from the top right-hand corner of the screen click the ‘Play’ button to run the PowerApp, the time should have auto-started in the background and populated our collection. Close the PowerApp to come back into the designer window.

From the top menu choose ‘View’ and then ‘Collections’, to see our ‘ccLetters’ collection all populated with the Alphabet as below:

Galleries

At this stage we have now built our 2 collections, the next stage will be to display those collections starting with the Keyboard.

Step 1 – Choose from the ‘Gallery’ menu a ‘Blank Vertical’ Gallery.

Step 2 – In the Gallery Properties settings on the right-hand side, set the data source to our ‘ccLetters’ collection.

Also, set the ‘Wrap count’ to = 10.

Step 3 – We now need to resize the Gallery to the approximate size we would like each button to be, and add a button. To do this follow these steps:

  • Click the edit button in the top left-hand corner of the Gallery.
  • Drag the highlighted box to the approximate size of each button.
  • Then select ‘Button’ from the top menu.

On selecting a button, because we have a gallery data source set to the ‘ccLetters’ collection, it will add 26 buttons, one for each data item in the collection.

Move and size the keyboard to the bottom left of the screen where it will be in the final game.

Step 4 – We now need letters to show on each button of the keyboard. To do this you need to choose the ‘Text’ property of the button and update it to ‘ThisItem.Letter’. As the Gallery is using our Letters collection as its data source, each button has a corresponding record in the data source, so this will set the text of each button to that letter.

Step 5 – We now need to set what is going to happen when each letter is clicked. The logic for this is:

If the letter is in the ‘ccAnswer’ collection

then copy the letter into the ‘ccRight’ collection If the letter is NOT in the ‘ccAnswer’ collection

the copy the letter into the ‘ccWrong’ collection

To do this we select ‘Action’ from the top menu and then ‘OnSelect’, then enter the following code:

Again we can test this by holding down the ‘Alt’ key and clicking some of the letters that are in your answer and some that are not. (NB: You should still have your test label showing the answer on the screen to help this).

Then select ‘View’ from the top menu and then ‘Collections’, and now you will have the ‘ccRight’ and ‘ccWrong’ collections with data in them.

Step 6 – Now we want the buttons to be disabled so that they cannot be clicked twice in the same game. So we go into the ‘DisplayMode’ property of the button and add code to carry out the following logic.

If this buttons letter is in ccRight or ccWrong then DisplayMode = Disabled

Else

DisplayMode = Edit

Here is the code to achieve this, you will notice as you enter it that the buttons you have selected before and are in either of the collections ‘ccRight’ or ‘ccWrong’ will go grey and be disabled.

There we have it the Keyboard is ready to go, the next thing to look at is how to show the Answer.

The Answer Gallery

The Answer Gallery needs to show a dash for each letter of the Answer so the player knows how many letters are in the word, and when a correct answer is chosen it needs to display that letter in the correct position.

Step 1 – Add another Gallery in the same way you did for the Keyboard Gallery but this time select the ‘Blank Horizontal’ option.

  • Set the data source = ‘ccAnswer’.
  • Then click the edit button on the top left of the Gallery and size it to be the expected size of one letter in the word.
  • Click ‘Insert’ from the top menu and then ‘Icons’. Scroll all the way down and click ‘Rectangle’. We should have something like this:

Now to make this into the letter dashes that are displayed at the bottom:

  • Set the height on the right-hand Properties window to = 2
  • Select the ‘Y’ Property in the top left-hand property drop down, OR to get there quickly just click the ‘Y’ label on the properties window and it will do that for you.
  • Set the ‘Y’ property to = ‘Parent.TemplateHeight’. Like this and resulting in the dashes being displayed:

Then all you need to do is make sure the Gallery is dragged out to be wide enough to cover the largest word you have and position it above the Keyboard.

Step 2 – Next we need to add our letters:

  • If you are not already in edit mode of the Gallery then click the edit button at the top left of the Gallery.
  • Select ‘Insert’ from the top menu and select ‘Label’.
  • At this time PowerApps will likely guess that you want each label to show the data in your ‘ccAnswer’ collection if it doesn’t simply set the Label ‘Text’ property to = ‘ThisItem.Result’.
  • Just to make it look a little nicer, select ‘Home’ from the top menu and then center align and set to the size and colour of your choosing.

So we should have something looking like this:

Step 3 – We now need to tweak this so that only the letters that have been selected and added to the ‘ccRight’ collection are shown.

Select the ‘Visible’ property and update it to ‘ThisItem.Result exactin ccRight’. You will see that this will now hide any letters that are not in ‘ccRight’ collection and show any that are in it.

There we have it, the Answer Gallery all set up. Feel free to hold down the ‘Alt’ and test it is all working as expected.

The Hangman SVG Drawing

Next, we move on to our Hangman Drawing. To do this we are going to use SVG.

SVG is a markup language, here is an example showing a box 400 wide by 600 high, with a black line in it.

Each time we want to add more to the picture we can add code for the relevant line we want to draw, so for the next line in the hangman picture it would look like this:

We mentioned earlier about the Drawing data being SVG code, if you used the example you will have already uploaded the Drawing data into the Collection.

Each line in this data represents one step of the drawing, that will be triggered for each wrong answer given in the Hangman game. There are 8 possible wrong answers before you lose and the full hangman is drawn.

So we need to understand how many of these code snippets we need to concatenate together, the number of which will be determined by how many letters are in the ‘ccWrong’ collection. i.e. how many wrong guesses there have been.

So let’s head back to the App and start to add the drawing.

Step 1 – Remove any Debug labels we had previously, showing the letter or the word, ready for the image to go on the right-hand side of the App screen. Then…

  • From the ‘Insert’ menu select ‘Media’ and chose ‘Image’. This will place an image box on your screen.
  • Drag the image box over to the right and make it around the size you want your hangman.
  • Set the Image Property with the initial code shown in the screenshot below. This will concatenate all the lines of SVG in the Drawing data source. Which will, therefore, show the fully drawn hangman.

Step 2 – Next we need to make the picture only show the relevant part of the image. So we want it to Concatenate the same number of lines of SVG code as the number of letters that the user has got wrong.

To do this add to the code as per the screenshot below:

As you complete this, you should see the drawing update to show the picture with the same number of drawing steps as you have letters in your ‘ccWrong’ collection currently. Which is however may wrong answers you clicked when testing earlier.

As with our other steps, it is worth testing this by holding down the ‘Alt’ key and trying to get some more letters wrong.

Setting the Resets

We are yet to add in the messages for winning and losing, but before we do we need to do some of the cleanup and reset actions for when the application is opened up and when the reset button is pressed.

Step 1 – Select the ‘App’ from the left-hand menu and in the ‘OnStart’ property enter the following in order to clear the ‘ccLetters’ collection.

Step 2 – Next select the ‘Screen1’ or whatever you have called your screen, and select the ‘OnVisible’ property. We are going to add code to select the reset button, so the code on that button triggers when the screen opens meaning all the elements are reset. Add the code as shown, however you may have set the name of your button to something else.

Step 3 – We now need to add a couple of things to the buttons ‘OnSelect’ property that we did not add earlier in order to empty the ‘ccRight’ and ‘ccWrong’ collections when the button is clicked. Like this:

Now we are ready to switch on the experimental feature.

Win / Lose Message Displays

We now need to display the messages for when a user wins, and when a user loses. To do this we are using an experimental feature called ‘Enhanced Groups’. To switch this on we need to go out of the App.

Step 1 – Select ‘File’ from the menu, then ‘App Settings’ then ‘Advanced Settings’.

Scroll down to Experimental features – these are experimental so may be changed or removed at any time so don’t rely on them in production.

Select the “Try the enhanced Group Control”.

Once selected go to Save on the left-hand menu bar, and click save.

Then click close at the bottom of the left-hand menu bar. Step 2 – Go back in and Open your PowerApp.

You will notice that it displays the dashes for the word, but the Keyboard is not yet generated.

If you click the play button at the top right-hand side you should see your Keyboard being dynamically created and appearing on screen. You can speed up how fast this gets created by adjusting the duration in the timer set to a shorter time frame.

Close the PowerApp to go back into the design window.

Step 3 – Now we are going to bring in a new group that is only going to show in certain circumstances.

Select ‘Insert’ from the top menu, and from the ‘Controls’ list select ‘Group(experimental)’. This will put the Group box at the top of your PowerApp screen.

Next, we are going to make that Group show in the middle of the screen by changing the X and Y properties to set it into the middle.

So for the X property:

and for the Y property:

This will now set your Group box in the middle of the screen.

Then select from the right-hand properties window a white fill on the Group so that it appears to sit on top of any other elements on the screen.

Rename your ‘Group1’ to be ‘LoseMsg’ to make it easier to follow later.

Step 4 – Setting the contents of your Lose group message box.

  • Ensuring you have the Group selected, then from the ‘Icons’ menu select one of the sad face emojis to insert. Size and position to your preference.
  • Add a ‘Label’ to the Group and set it to “You Lose!!!”, and size and position to your preference.
  • Then insert a ‘Button’ and set the button text to “Try Again” or something similar.
  • You can play around with the Groups border and colour settings to get the box displaying to your preferences.

You should end up with something similar to this:

Step 5 – Now to make the ‘Try Again’ button reset the game. Select the button and set the ‘OnSelect’ property to = ‘Select(ButtonReset). ( NB: You may have named your rst reset button something different so watch out for that).

Step 6 – Now we only want this group to show when the number of letters in ‘ccWrong’ collection is greater than the number of rows in our Drawing data. i.e. the user has lost.

To do this select the ‘Visible’ property of the ‘LoseMsg’ group and enter the code as shown:

As with our other steps you can now test this, by holding down the ‘Alt’ key and guessing letters until you get the full hangman, the Group box should then display. Then clicking try again should reset it all.

Step 7 – Now we follow a very similar set of steps to create the Win Message. The best way to do this is:

  • Right click on the ‘LoseMsg’ in the left-hand bar, and select ‘Copy’.
  • Then right click on the ‘Screen1’ and click ‘Paste’.
  • Rename it to ‘WinMsg’.
  • Set the Visible to = ‘True’ so we can set up the group as the Win message.

We now have our win message but it needs to be changed to make sense and work correctly by doing the following steps:

  • Delete the icon and replace with a smiley face.
  • Change the text to ‘You Win!!!’.
  • Select the ‘Visible’ property of the ‘WinMsg’ group and enter the code as shown below, this is to compare the number of correct guesses against the number of distinct letters in the Answer.

Then we can test, we should have a fully working game, with a win and a lose message, that can be reset each time to try again.

Final Cleanup

Then just to clean up we need to hide the button and timer that are still showing on the bottom right of the screen.

Simply select the timer and the button and select the ‘Visible’ property and set it to = ‘false’. There we have it, our final app ready to play.

Summary and Refresh

  1. Split Function – To create our answer and split it into separate letters.
  2. Using a Timer to Loop – To build our keyboard collection.
  3. Used exactin – To choose which buttons were going to be enabled and disabled by checking if the letter was in the ‘ccWrong’ or ‘ccRight’ collection. It was also used on the Answer gallery to decide which letters to show.
  4. Drawing with SVG – To create our drawing with the concatenate function to add a new line of SVG code for each wrong answer until the hangman was fully drawn or the answer was guessed correctly.
  5. Enhanced groups for Messages – To give us our Win and Lose message.

0000-00-00 00:00:00


Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}