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

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!

Thank you for your thorough response!

 

The Select() function makes code resue much easier.

Helpful resources

Announcements
Power Platform Call June 2022 768x460.png

Power Platform Community Call

Join us for the next call on August 17, 2022 at 8am PDT.

Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

365 EduCon 768x460.png

Microsoft 365 EduCon

Join us for two optional days of workshops and a 3-day conference, you can choose from over 130 sessions in multiple tracks and 25 workshops.

Users online (1,654)