Build a "Connect Four" game for two players in which the players take turns dropping colored discs from the top into a vertically suspended board/grid.
The objective of the game is to be the first player to form a horizontal, vertical, or diagonal line of four of their own colored discs.
Requirements
- The board should have 6 rows and 7 columns.
- The game should support two players, Player 1 and Player 2, with distinct colors for their game pieces (e.g., red and yellow).
- Players take turns to drop their pieces onto the board. Player 1 goes first, and then the players alternate turns.
- When a player clicks on a column, their piece should fall to the lowest available position within that column.
- A player can only place a piece in a column that is not already full. If a column is full, the player must choose a different column.
- When a player successfully connects four of their pieces horizontally, vertically, or diagonally, declare them as the winner and display a victory message.
- If the game board is full (i.e., no more valid moves are possible) and no player has connected four pieces, declare the game as a draw.
- Provide a button to restart the game, allowing players to play again without having to refresh the page.
Colors
Feel free to use the following hex values when making your game:
- Red pieces:
#d9313d
- Yellow pieces:
#fdc601
- Blue board:
#1c61f2
Solution
In the spirit of good software engineering, let's devise a solution that is as customizable as possible. We will build a Connect Four game that works with any numbers of rows, columns, and players. Let these be constants ROWS, COLUMNS, and PLAYERS respectively.