This is a solution to the Connect Four game challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the game rules
- Play a game of Connect Four against another human player (alternating turns on the same computer)
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Bonus: See the discs animate into their position when a move is made
- Bonus: Play against the computer
- Solution URL: Solution
- Live Site URL: Connect Four
- React - JS library
- MUI - React UI framework
- TypeScript - TypeScript
- Flexbox
- Mobile-first workflow
Where do I begin? Learned a ton about using custom hooks in React and utilizing several useful components in MUI in regards to the Sliding animations and custom buttons, etc. Also learned a ton of logical problem solving which was the biggest aspect of completing this challenge especially when making the CPU ai and having it be somewhat intelligent.
Definitely will look at building new games that have similiar complex logic. This was fun to build!
- Approach to building Connect Four - This helped to sort of get an idea of one such approach however I didn't use any of the code and this was done in VueJS while I used React.
- Approach for making CPU - Be sure to translate this page to English via the Google Translate. After the translate this helped me get an idea to an approach for the CPU AI. I went the extra mile and fixed the failures this approach had by checking the for the next move.