CONNECT FOUR Game - Advanced JavaScript with React - Live Demo
- Connect Four is a game where two players take turns dropping colored discs into a 7x6 grid (https://en.wikipedia.org/wiki/Connect_Four).
- The game should be implemented in React and the players drop discs into the columns by clicking on the grid. When a column is filled, it should not be possible to drop into that column again.
- A player wins when four discs of the same color are connected (vertically, horizontally or diagonally). It is important that the logic for checking the winner is implemented correctly.
- When a player wins, the game should display a message and it should not be possible to continue playing. If the game is a draw, the game should show a message.
- A “reset” button should be displayed after the game is over.
- Node
- React
- Reactstrap (https://reactstrap.github.io/)
- Material Design (https://material.io)
$ git clone [email protected]:truptigaonkar/mandatory-advanced-js4.git
$ cd mandatory-advanced-js4.git
$ npm install
$ npm start
- The game should be written using React
- The game should display a 7x6 grid of circles
- Dropping discs should be implemented correctly. It should not be possible to drop discs into a full column
- The logic to check if a player won should be implemented correctly
- The game should display messages when a player wins or the game is drawn
- The game should display a “reset” button when the game is over
- Start by implementing the grid and the logic for dropping discs. The logic for deciding the winner can be implemented last
- Before implementing the logic to check who won, try creating an algorithm with pen and paper before writing any code