Katkat
Back

Implement Two-Player Connect Four on a 6x7 Board with Win and Draw Detection

GleanFrontend Engineer · Onsite
MediumFrontend EngineerOnsiteSoftware Engineering Fundamentals

Last updated

Implement two-player Connect Four on a 6x7 board: drop discs into columns, detect four in a row in every direction, handle full columns and draws, and render a playable interface. Tests clean separation of game logic from UI, efficient win checks from the last move and careful edge handling.

In the first technical round of a frontend engineer loop, the task was to implement Connect Four on a 6 x 7 board (6 rows, 7 columns) for two players. AI tools were not allowed in the coding rounds.

Players alternate turns. On each turn the current player drops a disc into a column, and the disc falls to the lowest empty cell of that column. The first player with four of their discs in a row (horizontally, vertically or diagonally) wins. If the board fills up with no winner, the game is a draw.

Implement the game state and moves, win and draw detection, and a playable interface if one is expected.

Constraints and Clarifications

  • The board is fixed at 6 rows and 7 columns, and four in a row wins.
  • Assume two human players share one screen; there is no computer opponent.

Clarifying Questions

  • Is a UI expected in this round, and in which framework, or only the game logic?
  • What should happen on a click in a full column, or after the game has ended?
  • Should the four winning discs be highlighted?
  • Is a restart or undo control required?

Hints

Hint 1

Only the last move matters: After a drop, any newly completed line must pass through the cell that was just filled.

Follow-up questions

  • How would you generalize to an `R x C` board with `K` in a row?
  • How would you add an undo button?
  • How would two players on different machines play the same game?