Author: Leo Veenstra

PowerApps4Kids Session 20 is on 26th January 2022. If you miss the session, you can watch on YouTube PowerApps4Kids Channel after about a week – 2nd February 2022. So who’s presenting?

April Dunnam

April Dunnam is presenting a game which has gone viral – Wordle!

Peter le Roux

Peter le Roux is going to present an app that will help people talk about difficult topics – such as politics and religion.

So come and join us today (26th January 2022) later on at 6pm GMT.

Sign up at this page – https://www.powerplatformlearn.academy/live-webinar/powerapps4kids-uk-jan-2022/register

If you want to learn how to make Connect 4 in Power Apps, then look no further, this is it explained in a post. It was first played in 1974 and has been played for 47 years.  Read on to find out more on how to make it.

Rules of Connect 4

 The rules for this game are, Connect 4 is a game with 7 columns and 6 rows. This is the game, in a Power App and you will see the game when you press play. On your colour go (it shows which go it is under the label saying ‘current turn’), you need to click one of the buttons that says ‘here’. This will put a circle in that column at the bottom blank circle. the aim is to get 4 in a row. This will make an arrow appear showing which direction four circle are connected. Also, a smile will appear. In addition, a sound will play.

Brackets

In the code for Connect 4, you will find 3 different types of brackets. You will find round brackets, square brackets and curly brackets. Look here to find out what each one does.

() – After the name of a function you put ( and the you have your code, afterwards you put )

[] – List of items, they are also called collections.

{} – Item

Creating your Power App

To create a Power App, you go to make.powerapps.com and log in.

Now, click on canvas app from blank.

Create a name for the app, make sure it is a tablet app and then click on the create button.

This will create a blank screen

Code for the App on start

First, we have to make the grid of different coins in connect 4. This is the board for the game. We create this on the app on start. how you find this is, click on App, go to the dropdown and click OnStart

The code we put in here will create the grid. The code we need to put in here is,

ClearCollect(colColumns,{ColNumber:0,
                         NumberOfPieces:0,
                         Rows:[
                               {RowNumber:0,Row:White},
                               {RowNumber:1,Row:White},
                               {RowNumber:2,Row:White},
                               {RowNumber:3,Row:White},
                               {RowNumber:4,Row:White},
                               {RowNumber:5,Row:White}
                              ]
                        },                  
                        {ColNumber:1,
                         NumberOfPieces:0,
                         Rows:[
                               {RowNumber:0,Row:White},
                               {RowNumber:1,Row:White},
                               {RowNumber:2,Row:White},
                               {RowNumber:3,Row:White},
                               {RowNumber:4,Row:White},
                               {RowNumber:5,Row:White}
                              ]
                        },
                        {ColNumber:2,
                         NumberOfPieces:0,
                         Rows:[
                               {RowNumber:0,Row:White},
                               {RowNumber:1,Row:White},
                               {RowNumber:2,Row:White},
                               {RowNumber:3,Row:White},
                               {RowNumber:4,Row:White},
                               {RowNumber:5,Row:White}
                              ]
                        },
                        {ColNumber:3,
                         NumberOfPieces:0,
                         Rows:[
                               {RowNumber:0,Row:White},
                               {RowNumber:1,Row:White},
                               {RowNumber:2,Row:White},
                               {RowNumber:3,Row:White},
                               {RowNumber:4,Row:White},
                               {RowNumber:5,Row:White}
                              ]
                        },
                        {ColNumber:4,
                         NumberOfPieces:0,
                         Rows:[
                               {RowNumber:0,Row:White},
                               {RowNumber:1,Row:White},
                               {RowNumber:2,Row:White},
                               {RowNumber:3,Row:White},
                               {RowNumber:4,Row:White},
                               {RowNumber:5,Row:White}
                              ]
                        },
                        {ColNumber:5,
                         NumberOfPieces:0,
                         Rows:[
                               {RowNumber:0,Row:White},
                               {RowNumber:1,Row:White},
                               {RowNumber:2,Row:White},
                               {RowNumber:3,Row:White},
                               {RowNumber:4,Row:White},
                               {RowNumber:5,Row:White}
                              ]
                        },
                        {ColNumber:6,
                         NumberOfPieces:0,
                         Rows:[
                               {RowNumber:0,Row:White},
                               {RowNumber:1,Row:White},
                               {RowNumber:2,Row:White},
                               {RowNumber:3,Row:White},
                               {RowNumber:4,Row:White},
                               {RowNumber:5,Row:White}
                              ]
                        },

);

Set(VarCurrentTurn,Yellow)

 The clearcollect creates a list of items, which is also known as a collection.

• colColumns is the name of our collection because without a name there would be no collection.
• ColNumber is the column number. We use this to set our grid.
• NumberOfPieces is how many pieces are in this column.
• Rows contains the coins and their colour.
• RowNumber is the location in that column.

The Set function at the end of the above code, is where we are changing a variable, which stores information that you can change.

VarCurrentTurn is our variable that tells the app whose turn it is.

Now, run the app on start by playing the app using the play icon at the top.

Making the connect 4 board visible

We need to create a horizontal gallery on our screen for the columns.

You do this by going to insert like we did earlier and clicking on gallery and selecting horizontal gallery.

Next, make the items property of the gallery to

colColumns

Now, add another gallery inside the first one. It needs to be vertical. This will be the rows. The tree view in the app should now look like this.

In the items property we will make it

ThisItem.Rows

ThisItem.Rows is all of the rows in one column.

Now go to insert at the top of your screen and click on icon and add in a circle and a rectangle. Make the colour using the Fill property blue for the rectangle and for the circle use the following code

ThisItem.Value.Row

The Row contains the colour that we set earlier. The screen should now look like this.

Adding the Buttons and make them work

We are now going to add a button to the first gallery we made. The text property needs to be set to “here”. It should now look like this.

When the button is pressed we want to add the coin to that column. Then we want to change the varCurrentTurn and increase the number of pieces for the selected column

On the OnSelect code for the button we start with if there are no coins in that column. This means

that the number of pieces is set to zero. For this, we need to write the following code.

If(
    ThisItem.NumberOfPieces = 0,
    Set(
        varUpdatedColumn,
        {
            ColNumber: ThisItem.ColNumber,
            NumberOfPieces: 1,
            Rows: [
                {
                    RowNumber: 0,
                    Row: White
                },
                {
                    RowNumber: 1,
                    Row: White
                },
                {
                    RowNumber: 2,
                    Row: White
                },
                {
                    RowNumber: 3,
                    Row: White
                },
                {
                    RowNumber: 4,
                    Row: White
                },
                {
                    RowNumber: 5,
                    Row: varCurrentTurn
                }
            ]
        }
    )
);
Set(
    varColumnToUpdate,
    ThisItem.ColNumber
);
Patch(
    colColumns,
    First(
        Filter(
            colColumns,
            ColNumber = varColumnToUpdate
        )
    ),
    varUpdatedColumn
);
If(
    varCurrentTurn = Yellow,
    Set(
        varCurrentTurn,
        Red
    ),
    Set(
        varCurrentTurn,
        Yellow
    )
);

To make it work for when there are already coins in the column we need to add the following code to the code above at the top.

If(ThisItem.NumberOfPieces = 5,
    Set(
        varUpdatedColumn,
        {
            ColNumber: ThisItem.ColNumber,
            NumberOfPieces: 6,
            Rows: [
                {
                    RowNumber: 0,
                    Row: varCurrentTurn
                },
                {
                    RowNumber: 1,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 1
                        ).Value
                    ).Value.Row
                },
                {
                    RowNumber: 2,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 2
                        ).Value
                    ).Value.Row
                },
                {
                    RowNumber: 3,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 3
                        ).Value
                    ).Value.Row
                },
                {
                    RowNumber: 4,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 4
                        ).Value
                    ).Value.Row
                },
                {
                    RowNumber: 5,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 5
                        ).Value
                    ).Value.Row
                }
            ]
        }
    )
);
If(
    ThisItem.NumberOfPieces = 4,
    Set(
        varUpdatedColumn,
        {
            ColNumber: ThisItem.ColNumber,
            NumberOfPieces: 5,
            Rows: [
                {
                    RowNumber: 0,
                    Row: White
                },
                {
                    RowNumber: 1,
                    Row: varCurrentTurn
                },
                {
                    RowNumber: 2,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 2
                        ).Value
                    ).Value.Row
                },
                {
                    RowNumber: 3,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 3
                        ).Value
                    ).Value.Row
                },
                {
                    RowNumber: 4,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 4
                        ).Value
                    ).Value.Row
                },
                {
                    RowNumber: 5,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 5
                        ).Value
                    ).Value.Row
                }
            ]
        }
    )
);
If(
    ThisItem.NumberOfPieces = 3,
    Set(
        varUpdatedColumn,
        {
            ColNumber: ThisItem.ColNumber,
            NumberOfPieces: 4,
            Rows: [
                {
                    RowNumber: 0,
                    Row: White
                },
                {
                    RowNumber: 1,
                    Row: White
                },
                {
                    RowNumber: 2,
                    Row: varCurrentTurn
                },
                {
                    RowNumber: 3,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 3
                        ).Value
                    ).Value.Row
                },
                {
                    RowNumber: 4,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 4
                        ).Value
                    ).Value.Row
                },
                {
                    RowNumber: 5,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 5
                        ).Value
                    ).Value.Row
                }
            ]
        }
    )
);
If(
    ThisItem.NumberOfPieces = 2,
    Set(
        varUpdatedColumn,
        {
            ColNumber: ThisItem.ColNumber,
            NumberOfPieces: 3,
            Rows: [
                {
                    RowNumber: 0,
                    Row: White
                },
                {
                    RowNumber: 1,
                    Row: White
                },
                {
                    RowNumber: 2,
                    Row: White
                },
                {
                    RowNumber: 3,
                    Row: varCurrentTurn
                },
                {
                    RowNumber: 4,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 4
                        ).Value
                    ).Value.Row
                },
                {
                    RowNumber: 5,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 5
                        ).Value
                    ).Value.Row
                }
            ]
        }
    )
);
If(
    ThisItem.NumberOfPieces = 1,
    Set(
        varUpdatedColumn,
        {
            ColNumber: ThisItem.ColNumber,
            NumberOfPieces: 2,
            Rows: [
                {
                    RowNumber: 0,
                    Row: White
                },
                {
                    RowNumber: 1,
                    Row: White
                },
                {
                    RowNumber: 2,
                    Row: White
                },
                {
                    RowNumber: 3,
                    Row: White
                },
                {
                    RowNumber: 4,
                    Row: varCurrentTurn
                },
                {
                    RowNumber: 5,
                    Row: First(
                        Filter(
                            First(
                                Filter(
                                    colColumns,
                                    ColNumber = ThisItem.ColNumber
                                )
                            ).Rows,
                            Value.RowNumber = 5
                        ).Value
                    ).Value.Row
                }
            ]
        }
    )
);

Disable the button for full columns

To disable the button for when the column is full, we need to write the following code to the Display Mode property,

If(ThisItem.NumberOfPieces < 6, Edit,Disabled)

Displaying the current turn

Outside of all of the galleries, we add a circle nd on the fill property we put

varCurrentTurn

New game button

Add a new button make the text “new game” and on the OnSelect code, we copy the App OnStart code.

Arrows to signal that the game is done

We need to add an arrow for every possible place that there could be four in a row. In total there are 69 possibilities. As an example, if the four yellow coins are shown as they are above, then add the following code,

First(Filter(First(Filter(colColumns,ColNumber=0)).Rows,Value.RowNumber=5).Value).Value.Row<>White&&

First(Filter(First(Filter(colColumns,ColNumber=0)).Rows,Value.RowNumber=5).Value).Value.Row=First(Filter(First(Filter(colColumns,ColNumber=1)).Rows,Value.RowNumber=4).Value).Value.Row&&

First(Filter(First(Filter(colColumns,ColNumber=0)).Rows,Value.RowNumber=5).Value).Value.Row=First(Filter(First(Filter(colColumns,ColNumber=2)).Rows,Value.RowNumber=3).Value).Value.Row&&

First(Filter(First(Filter(colColumns,ColNumber=0)).Rows,Value.RowNumber=5).Value).Value.Row=First(Filter(First(Filter(colColumns,ColNumber=3)).Rows,Value.RowNumber=2).Value).Value.Row

On the first line, in the grid for column 0 and row 5 we are checking that there is a coin and for the rest of the rows, we are checking that they are the same to column 0 and row 5. Repeat the same just change the numbers for all the other options. You might want to make sure that you name the arrows. I named all my arrows column number _ row number then the direction of the arrow so for example 0_5v or 4_6v

Smiley face to check that there is an arrow visible

when any of the arrows are visible, we want a smiley face to appear. We do this by adding a smiley icon and on the visible property we use the following code.

'0_5 h'.Visible||
'1_5 h'.Visible||
'2_5 h'.Visible||
'3_5 h'.Visible||
'3_4 h'.Visible||
'2_4 h'.Visible||
'1_4 h'.Visible||
'0_4 h'.Visible||
'2_3 h'.Visible||
'3_3 h'.Visible||
'1_3 h'.Visible||
'0_3 h'.Visible||
'2_0 h'.Visible||
'1_0 h'.Visible||
'0_0 h'.Visible||
'2_1 h'.Visible||
'3_1 h'.Visible||
'1_1 h'.Visible||
'0_1 h'.Visible||
'3_2 h'.Visible||
'2_2 h'.Visible||
'1_2 h'.Visible||
'0_2 h'.Visible||
'3_0 h'.Visible||
'5_5 v'.Visible||
'0_5 dr'.Visible||
'0_5 v'.Visible||
'0_4 dr'.Visible||
'1_4 dr'.Visible||
'5_3 v'.Visible||
'4_3 v'.Visible||
'3_3 v'.Visible
||'2_3 v'.Visible
||'1_3 v'.Visible||
'0_3 v'.Visible||
'0_4 v'.Visible||
'1_4 v'.Visible||
'2_4 v'.Visible||
'3_4 v'.Visible||
'4_4 v'.Visible||
'5_4 v'.Visible||
'6_4 v'.Visible||
'1_5 v'.Visible||
'2_5v'.Visible||
'3_5 v'.Visible||
'4_5 v'.Visible||
'6_5 v'.Visible||
'1_5 dr'.Visible||
'3_5 lr'.Visible||
'3_4 lr'.Visible||
'3_3 lr'.Visible||
'6_3 lr'.Visible||
'5_3 lr'.Visible||
'4_3 lr'.Visible||
'4_4 lr'.Visible||
'6_4 lr'.Visible||
'5_4 lr'.Visible||
'5_5 lr'.Visible||
'4_5 lr'.Visible||
'6_5 lr'.Visible||
'2_5 dr'.Visible||
'2_4 dr'.Visible||
'3_5 dr'.Visible||
'3_4 dr'.Visible||
'3_3 dr'.Visible||
'2_3 dr'.Visible||
'1_3 dr'.Visible||
'0_3 dr'.Visible

the two lines, || is the “or” in Power Apps

This should create the game, if you would prefer a video, then watch it below.

Good luck