Connect Four

Hard
·
120 minutes

Prompt

Create a two-player game of Connect Four

Requirements

  • The board should be 7 wide by 6 high
  • It should alternate between the 'red' and 'yellow' players turn
  • Clicking the "Drop" button should drop a token of the current player's to the bottom-most free position
  • Clicking the "Drop" button on a full column should have no effect
  • If either player gets four in a row (horizontally, vertically, or diagonally):
    • The "COLOR's turn" heading should be replaced by "COLOR won!"
    • The "Drop" buttons should be replaced by a "Play again" button
  • If the board is full and there is no winner:
    • The "COLOR's turn" heading should be replaced by "Draw!"
    • The "Drop" buttons should be replaced by a "Play again" button

Important

  • Checking the win condition is and outside the scope of this question (unless you want the extra challenge!). We have provided a utility to check whether there is a winner or draw. If you are forking a Frontend Eval codepen template, you can access it via window.connectFour.checkForWinner, or you can download it here. Example usage:
// Board must be a 2D array filled with `null` for empty space
// and primitive values representing player tokens (numbers, strings)
// e.g. 1 or 2, 'red' or 'yellow', 'player 1' or 'player 2'
//
// returns `null` for no winner, 'draw' for draw, or the value of the winning token
const exampleBoard = [
  [1,2,null,null,null,null],
  [1,1,1,1,null,null], // player `1` has 4 in a row
  [2,null,null,null,null,null],
  [2,null,null,null,null,null],
  [2,null,null,null,null,null],
  [null,null,null,null,null,null],
  [null,null,null,null,null,null]
];

const winner = window.connectFour.checkForWinner(exampleBoard);
console.log(winner); // 1
const clonedBoard = window.connectFour.deepClone(board);

Submitting solutions

  1. Create a solution by forking one of our CodePen templates:
  2. Submit your solution here

Hints

Additional challenges

Get future questions delivered straight to your inbox for free

Sign up and receive instant access to new questions when we publish them.

We‘ll only use your information to deliver new questions and to provide you updates about our product. We‘ll never spam you or sell your information without your consent. Unsubscribe at any time.