Ever since I was a child, I loved playing Connect Four with my friends. In elementary school, there would always be multiple types of Connect 4 boards, enough for all of us to play on. Now, since many don't have the time to play board games at someone else's house, I developed a multiplayer online Connect 4 game. Users can play anywhere at anytime, saving the hassle of always needing the board on hand.

What it does

Like the title says, the Connect 4 Online app aims to re-create an optimized version of Connect Four onto all platforms online. To play, users can hover and tap on a column in a 7 x 7 board, which will drop a disk of a specific color - red or black. The person to get 4 consecutive disks in a column, row, or diagonal wins. My version of the game also features some special bonus in-game and UI features. The board lights up depending on the winner, and allows you to type in your name and select other people from a list to challenge. A hover guide is present to show which column the disk will be placed in and in what color.

How I built it

I built it using React for the frontend and Flask for the Backend. For the special designs, I used .css files for my other files. Many colors and actions depended on which player's turn it was. I built the client using a flatboard 2D array, tied it to react state and built a cell component, board component, and game component. I then decomposed all game specific logic to a util folder, then added inspections for all the different ways to win and a hover guide to see where your piece will land and what color it will be, as well as a reset button. Multiplayer was implemented using handshakes.

Challenges I ran into

For challenges, getting asynchronous state in react was difficullt. message handling between 2 parties got complicated as well. These took me the longest to implement but my hard-work and perseverance paid off!

Accomplishments that I'm proud of

I am proud of the UI I created and the multiplayer options. It is my first project where I could focus most of my attention to a UI and play against others. This was also my first time making a game app, and I feel accomplished that I can create a full app of one of my favorite board games using my skills I gained throughout each hackathon.

What I learned

I learned how I could expand upon designs in css, whether adding hover options or small animations. I also learned how to implement multiplayer options to a board game using

What's next for Connect 4 Online

Although the game is already completely playable, there are still many additional features that can be implemented, including color and theme customizations, such as a Christmas theme or Halloween theme. Another feature I want to implement are bots to compete against of easy to insane difficulties, where the insane bots would use machine learning to find the best moves. A weekly or monthly tournament between people in a community would also be another feature I would implement, and shouldn't be too hard for me to do so.

Share this project: