cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
SqueezeOJ
Level: Powered On

TicTacToe Game

I'm new to PowerApps, so I created a Tic-Tac-Toe game to learn.  I'll present my creation below and if anyone has any simplifications or improvements, I'd appreciate your feedback.  Thanks!

TicTacToe.png

 

 

App.OnStart: Set(myWinner,"") ;Set(myCount,1); Set(myXO,"X"); Set(b11,""); Set(b12,""); Set(b13,""); Set(b21,""); Set(b22,""); Set(b23,""); Set(b31,""); Set(b32,""); Set(b33,"")

 

myWinner is the text label that announces a winner.

myCount is the turn.  Tic-Tac-Toe starts at turn 1 and ends at turn 9.

myXO shows which player's turn it is.

 

There are nine X/O buttons, which are named b11, b12, b13, b21, b22, b23, b31, b32, b33, and have the following code:

 

b11.Text: b11

b11.OnSelect: If(b11="",If(Mod(Value(myCount),2)=0,Set(b11, "O");Set(myCount,myCount+1);Set(myXO, "X"),Set(b11, "X");Set(myCount,myCount+1);Set(myXO, "O")));

If((b11="X" And b12="X" And b13="X")
Or (b21="X" And b22="X" And b23="X")
Or (b31="X" And b32="X" And b33="X")
Or (b11="X" And b21="X" And b31="X")
Or (b12="X" And b22="X" And b32="X")
Or (b13="X" And b23="X" And b33="X")
Or (b11="X" And b22="X" And b33="X")
Or (b13="X" And b22="X" And b31="X"),
Set(myWinner,"X Wins!"));
If((b11="O" And b12="O" And b13="O")
Or (b21="O" And b22="O" And b23="O")
Or (b31="O" And b32="O" And b33="O")
Or (b11="O" And b21="O" And b31="O")
Or (b12="O" And b22="O" And b32="O")
Or (b13="O" And b23="O" And b33="O")
Or (b11="O" And b22="O" And b33="O")
Or (b13="O" And b22="O" And b31="O"),
Set(myWinner,"O Wins!"))

 

 

b12.Text: b12

b12.OnSelect: If(b12="",If(Mod(Value(myCount),2)=0,Set(b12, "O");Set(myCount,myCount+1);Set(myXO, "X"),Set(b12, "X");Set(myCount,myCount+1);Set(myXO, "O")));

If((b11="X" And b12="X" And b13="X")
Or (b21="X" And b22="X" And b23="X")
Or (b31="X" And b32="X" And b33="X")
Or (b11="X" And b21="X" And b31="X")
Or (b12="X" And b22="X" And b32="X")
Or (b13="X" And b23="X" And b33="X")
Or (b11="X" And b22="X" And b33="X")
Or (b13="X" And b22="X" And b31="X"),
Set(myWinner,"X Wins!"));
If((b11="O" And b12="O" And b13="O")
Or (b21="O" And b22="O" And b23="O")
Or (b31="O" And b32="O" And b33="O")
Or (b11="O" And b21="O" And b31="O")
Or (b12="O" And b22="O" And b32="O")
Or (b13="O" And b23="O" And b33="O")
Or (b11="O" And b22="O" And b33="O")
Or (b13="O" And b22="O" And b31="O"),
Set(myWinner,"O Wins!"))

 

Same general format for b13, b21, b22, b23, b31, b32, b33

 

Reset.OnSelect: Set(b11,""); Set(b12,""); Set(b13,""); Set(b21,""); Set(b22,""); Set(b23,""); Set(b31,""); Set(b32,""); Set(b33,""); Set(myCount,1);  Set(myXO,"X"); Set(myWinner,"")

 

It works fine, but I'd love to know if there are better ways of doing things.  For instance, is there a way to write a function to test for a winner and then use that in each button, rather than copying & pasting the massive If/Then statement.

 

Thanks!

 

2 ACCEPTED SOLUTIONS

Accepted Solutions
Highlighted
bean
Level 8

Re: TicTacToe Game

In a recent update, they released a function? called Select. Using this you can re-use code. Add code to a buttons onSelect, then you can simply call Select(button1) to run the logic in there.

 

Sean

View solution in original post

PowerApps Staff CarlosFigueira
PowerApps Staff

Re: TicTacToe Game

Yes, you can reuse a function! The Select function (which is still undocumented, we're behind on that) can be used to invoke the OnSelect property of another control in the same screen. So you can have another button (let's call it 'btnCheckWinner') and have the expression below in its OnSelect property. I've also simplified it a little to avoid checking first for 'X' then for 'O'.

If(
    b11 <> "" And ((b11 = b12 And b11 = b13) Or (b11 = b21 And b11 = b31) Or (b11 = b22 And b11 = b33)),
        Set(myWinner, b11),
    b22 <> "" And ((b22 = b21 And b22 = b23) Or (b22 = b12 And b22 = b32) Or (b22 = b13 And b22 = b31)),
        Set(myWinner, b22),
    b33 <> "" And ((b33 = b31 And b33 = b32) Or (b33 = b13 And b33 = b23)),
        Set(myWinner, b33),
    Set(myXO, If(myXO = "X", "O", "X")); Set(myCount, myCount + 1)
)

This expression will try to see if there are any winners in the game, and set the myWinner variable if that's the case. Otherwise (if none of the conditions match), it will flip the current player (myXO) and increment the turn counter.

 

On your buttons, you can set its corresponding variable to the current turn, and then Select the other button:

btn11.OnSelect: Set(b11, myXO); Select(btnCheckWinner)
btn12.OnSelect: Set(b12, myXO); Select(btnCheckWinner)
...
btn33.OnSelect: Set(b33, myXO); Select(btnCheckWinner)

Now you can set the Visible property of the btnCheckWinner control to false, so it won't appear in the final app.

 

Hope this helps! Love the idea for the Tic-Tac-Toe game, it's a good way to get used to variables!

View solution in original post

3 REPLIES 3
Highlighted
bean
Level 8

Re: TicTacToe Game

In a recent update, they released a function? called Select. Using this you can re-use code. Add code to a buttons onSelect, then you can simply call Select(button1) to run the logic in there.

 

Sean

View solution in original post

PowerApps Staff CarlosFigueira
PowerApps Staff

Re: TicTacToe Game

Yes, you can reuse a function! The Select function (which is still undocumented, we're behind on that) can be used to invoke the OnSelect property of another control in the same screen. So you can have another button (let's call it 'btnCheckWinner') and have the expression below in its OnSelect property. I've also simplified it a little to avoid checking first for 'X' then for 'O'.

If(
    b11 <> "" And ((b11 = b12 And b11 = b13) Or (b11 = b21 And b11 = b31) Or (b11 = b22 And b11 = b33)),
        Set(myWinner, b11),
    b22 <> "" And ((b22 = b21 And b22 = b23) Or (b22 = b12 And b22 = b32) Or (b22 = b13 And b22 = b31)),
        Set(myWinner, b22),
    b33 <> "" And ((b33 = b31 And b33 = b32) Or (b33 = b13 And b33 = b23)),
        Set(myWinner, b33),
    Set(myXO, If(myXO = "X", "O", "X")); Set(myCount, myCount + 1)
)

This expression will try to see if there are any winners in the game, and set the myWinner variable if that's the case. Otherwise (if none of the conditions match), it will flip the current player (myXO) and increment the turn counter.

 

On your buttons, you can set its corresponding variable to the current turn, and then Select the other button:

btn11.OnSelect: Set(b11, myXO); Select(btnCheckWinner)
btn12.OnSelect: Set(b12, myXO); Select(btnCheckWinner)
...
btn33.OnSelect: Set(b33, myXO); Select(btnCheckWinner)

Now you can set the Visible property of the btnCheckWinner control to false, so it won't appear in the final app.

 

Hope this helps! Love the idea for the Tic-Tac-Toe game, it's a good way to get used to variables!

View solution in original post

SqueezeOJ
Level: Powered On

Re: TicTacToe Game

Thank you for your thorough response!

 

The Select() function makes code resue much easier.

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 438 members 5,919 guests
Please welcome our newest community members: