cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
SqueezeOJ
Frequent Visitor

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
bean
Continued Contributor
Continued Contributor

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

CarlosFigueira
Power Apps
Power Apps

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
bean
Continued Contributor
Continued Contributor

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

CarlosFigueira
Power Apps
Power Apps

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

Thank you for your thorough response!

 

The Select() function makes code resue much easier.

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

R2 (Green) 768 x 460px.png

Microsoft Dynamics 365 & Power Platform User Professionals

DynamicsCon is a FREE, 4 half-day virtual learning experience for 11,000+ Microsoft Business Application users and professionals.

Users online (2,679)