Have you played Connect 4? In Power Apps?

What is Connect 4?

Connect 4 is a fun strategy game! You play it on a 7 columns by 6 rows board where each player picks their checker/coin color. Each player then alternates to place/drop a checker in a column. The checker will drop to the lowest row available. The goal is to connect 4 of one's checkers either horizontally, vertically, or diagonally.

Why I wanted to make Connect 4 in Power Apps?

I have always had a fascination to rebuild apps that I use everyday, or games that I play everyday, using Power Apps. Why? I am not sure. May be it is the fascination to stretch the platform to its limits in trying to implement complex logic. May be it is because I like to prove that just because it is a low-code platform, that it isn't a joke. And sometimes, it is the sheer challenge to come up with a UI that may not seem possible with Power Apps.

Connect 4 game building approach

I used a very simple logical approach to go about building this game:

1. Create a board
2. Select a cell on the board to place the checker at (more about this in a bit)
3. Check if the cell is a valid drop or not
4. Alternate player turns
5. Capture every checker placement along with the player who placed it
6. Logic to check the number of connected checkers
7. Mark the game as over

I did not like the fact that the players had to click on specific cells. To make this better, I added logic to place the checker down to the lowest possible row in a given column. After this, I shifted my focus to the next UI feature - to show the checker actually sliding.

Once that was done, I added a few extra features like:

1. Coin toss
2. Sounds when a checker is dropped and when a game is over
3. Animated image celebrating a win

Connect 4 game logic approach

In this game mode (which is 2 players on the same device), my biggest goal was to come up with the logic to figure out if a particular turn resulted in a player's all checkers getting connected. The code for the same is self explanatory. So, if you are interested in it, do open the app and review it.

Future upgrades

I play to add 2 more game modes:

1. 2 player game with each player using his own device (over a session)
2. Against the computer - This one will be tricky. There are different approaches available. I will have to research a bit more and pick the one that makes the most sense.

Conclusion

As you can see, there were many interesting and challenging pieces of logic and/or UI/UX that I had to solve for in order to make Connect 4 with Power Apps. This is why I love making games. In my several years of experience with Power Apps, I have learnt that making fun apps actually teaches you more than building "business applications".

Connect 4 code

I have uploaded the ZIP and MSAPP files of my Battleship app here: Connect 4 code.

To learn how to import an app file, click here.

Recent articles

1. How to open a Dataverse record on mobile from a canvas app
2. How I made a personal trainer scheduling app
3. How to deal with Dataverse Activities in a canvas app