Power Apps: Build Game in a Day (Tic Tac Toe)

I started working on Power Apps more than a year and half now and it’s really fun working with Power Apps. In this article, I want to show you how you may have some fun too with a business applications platform. Creating games is NOT the purpose of this platform, but this exercise will help you understand some of its capabilities and show off at the end to your friends or family.

Power Platform is Microsoft’s technology which provides low code solutions in creating business applications (Power Apps), Power Automate previously known as Flow, metadata-driven database (Common Data Services, CDS), analytics and reporting (Power BI) and a Power Virtual Agents. It’s purpose to enable business create useful application quickly, without lots of time and money investment and low to none programming involved.

While Power Apps themselves can be of the different types — canvas apps, model-driven apps and portals — we’ll explore today just one of them, the Canvas apps.

Before we start, have a look at this GIF animation, this is what we’ll build – a Tic Tac Toe game.

Ready to go? Great, let’s do it!

1. Inside PowerApps studio, create a Canvas app from blank, in the new window give this app a name and select “Phone” as format.

2. Set Global variables on OnStart function

There are 2 players in the game “customPlayer” with id=0 and “powerAppsPlayer” with id=1

Set(customPlayer,{id:0,name:Blank()});
Set(powerAppsPlayer,{id:1,name:"PowerApps"});
Set(activePlayer,0);
Set(flashColor,false);
Set(customPlayerWinsColor,ColorValue("#b9e567"));
Set(powerAppsPlayerWinsColor,ColorValue("#742774"));

3. Add Logo and change Screen background

4. Add label for displaying welcome message to the player

Change the visibility of the label as shown below.

5. Create a popup to capture player’s name

On submit the name popup will be hidden and player’s name will displayed in the label created in the previous step.

Set Popup’s visibility to true is player name is blank

Once user submit the name, popup is hidden and user’s name is visible in the message label.

6. Add a blank gallery

Set Gallery Items to n array of number 1 to 9

[1,2,3,4,5,6,7,8,9]

Set the Wrap Count to 3 to create a table of 3 rows and 3 columns

Add a button to the gallery after that layout will look as the following screen.

Button OnSelect Logic:

Switch( 
	activePlayer, 
		0, Collect(customPlayerSelections,ThisItem.Value), 
		1, Collect(powerAppsPlayerSelections,ThisItem.Value)
);

Switch function above will add the clicked item’s value to a collection of the respective user

UpdateContext(
	{
		checkCustomPlayerStatus:If(
			And(CountRows(customPlayerSelections)>2, 
				If(
					Or(
						(LookUp( customPlayerSelections, Value = 1, Value ) = 1 &&  LookUp( customPlayerSelections, Value = 2, Value )=2 && LookUp( customPlayerSelections, Value = 3, Value )=3),
						(LookUp( customPlayerSelections, Value = 1, Value ) = 1 &&  LookUp( customPlayerSelections, Value = 4, Value )=4 && LookUp( customPlayerSelections, Value = 7, Value )=7),
						(LookUp( customPlayerSelections, Value = 1, Value ) = 1 &&  LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 9, Value )=9),
						(LookUp( customPlayerSelections, Value = 2, Value ) = 2 &&  LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 8, Value )=8),
						(LookUp( customPlayerSelections, Value = 3, Value ) = 3 &&  LookUp( customPlayerSelections, Value = 6, Value )=6 && LookUp( customPlayerSelections, Value = 9, Value )=9),
						(LookUp( customPlayerSelections, Value = 3, Value ) = 3 &&  LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 7, Value )=7),
						(LookUp( customPlayerSelections, Value = 4, Value ) = 4 &&  LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 6, Value )=6),
						(LookUp( customPlayerSelections, Value = 7, Value ) = 7 &&  LookUp( customPlayerSelections, Value = 8, Value )=8 && LookUp( customPlayerSelections, Value = 9, Value )=9)
					), true, false
				)
			)
			
			,true,false
		),
		checkPowerAppsPlayerStatus:If(
			And(CountRows(powerAppsPlayerSelections)>2, 
				If(
					Or(
						(LookUp( powerAppsPlayerSelections, Value = 1, Value ) = 1 &&  LookUp( powerAppsPlayerSelections, Value = 2, Value )=2 && LookUp( powerAppsPlayerSelections, Value = 3, Value )=3),
						(LookUp( powerAppsPlayerSelections, Value = 1, Value ) = 1 &&  LookUp( powerAppsPlayerSelections, Value = 4, Value )=4 && LookUp( powerAppsPlayerSelections, Value = 7, Value )=7),
						(LookUp( powerAppsPlayerSelections, Value = 1, Value ) = 1 &&  LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 9, Value )=9),
						(LookUp( powerAppsPlayerSelections, Value = 2, Value ) = 2 &&  LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 8, Value )=8),
						(LookUp( powerAppsPlayerSelections, Value = 3, Value ) = 3 &&  LookUp( powerAppsPlayerSelections, Value = 6, Value )=6 && LookUp( powerAppsPlayerSelections, Value = 9, Value )=9),
						(LookUp( powerAppsPlayerSelections, Value = 3, Value ) = 3 &&  LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 7, Value )=7),
						(LookUp( powerAppsPlayerSelections, Value = 4, Value ) = 4 &&  LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 6, Value )=6),
						(LookUp( powerAppsPlayerSelections, Value = 7, Value ) = 7 &&  LookUp( powerAppsPlayerSelections, Value = 8, Value )=8 && LookUp( powerAppsPlayerSelections, Value = 9, Value )=9)
					), true, false
				)
			)
			
			,true,false
		)		
	}
);

checkCustomPlayerStatus: This variable will be set true if customPlayer’s collection has filled with the items which satisfied the winning combination.

checkPowerAppsPlayerStatus: This variable will be set true if powerAppsPlayer’s collection has filled with the items which satisfied the winning combination.

Set(
		winnerBox, 
			If(
				checkCustomPlayerStatus = true, 
					If(
						LookUp( customPlayerSelections, Value = 1, Value ) = 1 &&  LookUp( customPlayerSelections, Value = 2, Value )=2 && LookUp( customPlayerSelections, Value = 3, Value )=3, [1,2,3],
						LookUp( customPlayerSelections, Value = 1, Value ) = 1 &&  LookUp( customPlayerSelections, Value = 4, Value )=4 && LookUp( customPlayerSelections, Value = 7, Value )=7, [1,4,7],
						LookUp( customPlayerSelections, Value = 1, Value ) = 1 &&  LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 9, Value )=9, [1,5,9],
						LookUp( customPlayerSelections, Value = 2, Value ) = 2 &&  LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 8, Value )=8, [2,5,8],
						LookUp( customPlayerSelections, Value = 3, Value ) = 3 &&  LookUp( customPlayerSelections, Value = 6, Value )=6 && LookUp( customPlayerSelections, Value = 9, Value )=9, [3,6,9],
						LookUp( customPlayerSelections, Value = 3, Value ) = 3 &&  LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 7, Value )=7, [3,5,7],
						LookUp( customPlayerSelections, Value = 4, Value ) = 4 &&  LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 6, Value )=6, [4,5,6],
						LookUp( customPlayerSelections, Value = 7, Value ) = 7 &&  LookUp( customPlayerSelections, Value = 8, Value )=8 && LookUp( customPlayerSelections, Value = 9, Value )=9, [7,8,9]						
					),
				checkPowerAppsPlayerStatus = true, 
					If(
						LookUp( powerAppsPlayerSelections, Value = 1, Value ) = 1 &&  LookUp( powerAppsPlayerSelections, Value = 2, Value )=2 && LookUp( powerAppsPlayerSelections, Value = 3, Value )=3, [1,2,3],
						LookUp( powerAppsPlayerSelections, Value = 1, Value ) = 1 &&  LookUp( powerAppsPlayerSelections, Value = 4, Value )=4 && LookUp( powerAppsPlayerSelections, Value = 7, Value )=7, [1,4,7],
						LookUp( powerAppsPlayerSelections, Value = 1, Value ) = 1 &&  LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 9, Value )=9, [1,5,9],
						LookUp( powerAppsPlayerSelections, Value = 2, Value ) = 2 &&  LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 8, Value )=8, [2,5,8],
						LookUp( powerAppsPlayerSelections, Value = 3, Value ) = 3 &&  LookUp( powerAppsPlayerSelections, Value = 6, Value )=6 && LookUp( powerAppsPlayerSelections, Value = 9, Value )=9, [3,6,9],
						LookUp( powerAppsPlayerSelections, Value = 3, Value ) = 3 &&  LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 7, Value )=7, [3,5,7],
						LookUp( powerAppsPlayerSelections, Value = 4, Value ) = 4 &&  LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 6, Value )=6, [4,5,6],
						LookUp( powerAppsPlayerSelections, Value = 7, Value ) = 7 &&  LookUp( powerAppsPlayerSelections, Value = 8, Value )=8 && LookUp( powerAppsPlayerSelections, Value = 9, Value )=9, [7,8,9]						
					)							
			)						
);
Switch( 
	activePlayer, 
		0, Set(activePlayer,1), 
		1, Set(activePlayer,0)
)

winnerBox: this variable will store an array of the item values of all boxes which satisfied the winning combination

Last Switch function will change the active player.

Button Text:

If(
    LookUp( customPlayerSelections, Value = ThisItem.Value, Value ) = 
    ThisItem.Value, "X",
    LookUp( powerAppsPlayerSelections, Value = ThisItem.Value, Value ) = 
    ThisItem.Value,"O"
)

Button Fill:

If(
	And(Or(checkCustomPlayerStatus, checkPowerAppsPlayerStatus),LookUp( winnerBox, Value = ThisItem.Value, Value ) = ThisItem.Value), ColorValue("#ff414e"),
	LookUp( customPlayerSelections, Value = ThisItem.Value, Value ) = ThisItem.Value, ColorValue("#ff8928"), 
	LookUp( powerAppsPlayerSelections, Value = ThisItem.Value, Value ) = ThisItem.Value, ColorValue("#ff414e"),  
	ColorValue("#faf258")	
)

Gallery Display Mode:

If(Or(checkCustomPlayerStatus, checkPowerAppsPlayerStatus), DisplayMode.View,Edit)

7. Add a Timer control for flashing:

Timer “Start” function

checkCustomPlayerStatus || checkPowerAppsPlayerStatus

Timer “OnTimerStart” function

Set(flashColor,!flashColor);
Set(winFlashColor, If(checkCustomPlayerStatus, customPlayerWinsColor, If(checkPowerAppsPlayerStatus, powerAppsPlayerWinsColor)));
Set(winFlashColor,If(flashColor,winFlashColor,ColorFade(winFlashColor,50%)));

8. Display Message Text:

If(checkCustomPlayerStatus, "Hooray! You did it "&customPlayer.name&"!", If(checkPowerAppsPlayerStatus, "Try again!", ""))

9. PLAY AGAIN Button:

Play Again Button will reset the gallery in case of any player wins or draw.

Play Again Button OnSelect:

Reset(Gallery1);
Clear(customPlayerSelections);
Clear(powerAppsPlayerSelections);Set(winnerBox,[0]);
Set(activePlayer,0);
UpdateContext({checkCustomPlayerStatus:false,checkPowerAppsPlayerStatus:false});