Build Connect Four

In this project, you will build a small two-player Connect Four game with JavaScript. The HTML and CSS are already finished. Your job is to make the page work. By the end, two players will be able to drop discs into a board, take turns, win with four connected discs, and reset the game.

Before a game can render anything, it needs state. In this project, the board will be a nested array: one array for the whole board, with one inner array for each row. Each slot should start as an empty string. Later, a slot will become "red" or "yellow" when a player drops a disc there.

Now the array needs to become something visible. The HTML already has an empty #board element. Start by rendering the shape of the board: 42 clickable cells.

The board can render empty cells now. Next, make each cell reflect the value stored in the matching board slot.

In Connect Four, a disc does not stay wherever the player clicks. It falls to the lowest open slot in that column.

Before you place discs, set up the small helpers that handle turn text. This keeps the next stage focused on making a move.

Now you can connect the board logic to the visible game state. A valid move should place the current player's disc in the open row, render the board, switch players, and update the status text.

The game now has a working move function, but players still need a way to choose a column. Add one click listener to boardElement.

A full column is not a legal move. If getOpenRow(column) returns -1, makeMove should stop before it changes the board or switches the player.

The win-checking helper will move across the board one slot at a time. A step vector is just two numbers: how much the row changes, and how much the column changes. Rows count downward on the page. That means moving up uses rowStep: -1.

Win detection is the trickiest part of Connect Four, so build it in a small helper first. countDirection starts next to a disc and walks in one direction. It counts how many matching discs belong to the same player before it hits an empty slot, the other player, or the edge of the board.

Now use countDirection to check complete lines. A move can connect discs in two opposite directions. For example, a horizontal line might have discs to the left and to the right of the latest move.

hasWon can detect a winning line now. The move function needs to use that answer after a disc is placed.

The game is playable now. The last required feature is a reset button so players can start over without refreshing the page.

A Connect Four game can end without a winner. If the top row is full after a move, no more discs can be dropped, so the game is a draw.

You built a complete browser game from plain JavaScript. The important part is not only that Connect Four works. It is that you practiced the shape of many small apps.