To be honest with you guys, I rarely playing with Canvas Apps. The first time I hands-on to the Canvas Apps was when Malaysia Dynamics 365 User Group App in a day event back in 2019. And then for this week’s blog post because I run out of ideas while waiting on my submission for Azure Pipelines Parallel Job (Yes, I’m gonna start learning about CI-CD too!), I decided to make a simple game for my daughter using Canvas Apps. The idea of the game was to make her understand letters well.
Resources
I found all the free resources below links:
- Picture for your background app. I’m using this image.
- Alphabet voice that you can download here.
- Music for a Success and Failed that you can search in here.
Gameplay Design
The gameplay is pretty simple. The system will randomly pick a letter and give three options. If the user picks the correct answer, we can play the success effect. If wrong, we only need to respond with failed effect.
I designed the app with two screens only. The first screen is to start the game.
The second screen is where the user can answer the question.
We need to insert all the media that we gonna used. Here are the resources that I uploaded:
The Code? Is it Code?
I initialize the data that I need in the Play Button. In the OnSelect property, I put this:
ClearCollect(Alphabets, Table({Name: "A"},{Name : "B"},{Name : "C"},{Name : "D"},{Name : "E"},{Name : "F"},{Name : "G"},{Name : "H"},{Name : "I"},{Name : "J"},{Name : "K"},{Name : "L"},{Name : "M"},{Name : "N"},{Name : "O"},{Name : "P"},{Name : "Q"},{Name : "R"},{Name : "S"},{Name : "T"},{Name : "U"},{Name : "V"},{Name : "X"},{Name : "Y"},{Name : "Z"}));
ClearCollect(Selections, Table({Name: "X"}));
ClearCollect(Alphabets, Shuffle(Alphabets));
ClearCollect(Selections, FirstN(Alphabets, 3));
ClearCollect(Selections, Shuffle(Selections));
Set(Current, First(Alphabets).Name);
Set(Box1Text, First(Selections).Name);
Set(Box2Text, First(LastN(Selections, 2)).Name);
Set(Box3Text, Last(Selections).Name);
Navigate(PlayScreen,ScreenTransition.Fade);The first ClearCollect is to make a data source for the letters. While the second ClearCollect is just for initializing the variable for holding the three selections.
For picking the random options, the function that I use is Shuffle. As you can see, I use the Shuffle method two times to make it more random. But if you decide to use it just one time is also sufficient.
The other variables that I used: Current to holding the current letter, Box1Text to be bind with Box1.Text property, Box2Text to be bind with Box2.Text property, and Box3Text to be bind with Box3.Text property.
The last thing to do is to navigate the screen to the Play Screen.
The easiest way to understand the Canvas App control is we only can bind the value to the property. We can’t make changes directly to control like Label1.Text = “Temmy”. It will not work.
So in this screen, we have lots of properties that we need to bind:
For the music part, we need to add an Audio Control, and here is how I bind to the correct sound (Advanced > Media property):
If(Current = "A", A, Current = "B", B,
Current = "C", C, Current = "D", D,
Current = "E", E, Current = "F", F,
Current = "G", G, Current = "H", H,
Current = "I", I, Current = "J", J,
Current = "K", K, Current = "L", L,
Current = "M", M, Current = "N", N,
Current = "O", O, Current = "P", P,
Current = "Q", Q, Current = "R", R,
Current = "S", S, Current = "T", T,
Current = "U", U, Current = "V", V,
Current = "W", W, Current = "X", X,
Current = "Y", Y, Z)The last big part is how to handle the option OnSelect on each of the option buttons (Box1, Box2, Box3):
If(Box1.Text = Current,
ClearCollect(Alphabets, Shuffle(Alphabets));
ClearCollect(Selections, FirstN(Alphabets, 3));
ClearCollect(Selections, Shuffle(Selections));
Set(Current, First(Alphabets).Name);
Set(Box1Text, First(Selections).Name);
Set(Box2Text, First(LastN(Selections, 2)).Name);
Set(Box3Text, Last(Selections).Name);
Reset(SuccessSound)
, Reset(FailedSound));
Temmy Wahyu Raharjo 
One thought on “Canvas Apps: Create Simple Game – Alphabet Hero”