CONNECT FOUR Game - Advanced JavaScript with React - Live Demo

Instructions

• 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.

Technologies

• Node
• React
• Reactstrap (https://reactstrap.github.io/)
• Material Design (https://material.io)

Installation

  $ git clone git@github.com:truptigaonkar/mandatory-advanced-js4.git
  $ cd mandatory-advanced-js4.git
  $ npm install
  $ npm start

Requirements

• 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

Tips

• 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