Connect Fourgame

TypeScript, Tailwind & framer-motion

four games

Connect 4 is a turn-based 2-player game played on a 7x6 board. Each player places their checkers from the lowest row until the highest one. The goal is to align four checkers horizontally, vertically, or diagonally

Framer Motion was used to create drop animation on players' moves

For check is the player has won I've created 3 functions checkRows(), checkColumns(), checkDiagonals()

To manage states I've used Recoil. modalAtom is managing which modal is open right now. gameAtom is taking care of game status, which player is turn, pause status, actual player score, who is the winner, and winner array to mark which fields are winner one. boardAtom is used to print each board field

Design by Kevin Powell for Scrimba The Frontend Developer Career Path