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.
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.
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,
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
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 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
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.
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
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,
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.