Example Game Development: Connect Four

Connect Four is a classic strategy game for two players. The goal: be the first to place four pieces in a row — horizontally, vertically, or diagonally. You can try the game directly below, and afterwards I'll explain how it was programmed in JavaScript.

How does the game work?

The game is implemented entirely in JavaScript using the Canvas element — no external libraries, no framework. Here are the key concepts:

The board as a 2D array

The board (6 rows × 7 columns) is stored as a nested array:

// Initialise the board
let board = Array.from({length: 6}, () => Array(7).fill(0));
// 0 = empty, 1 = Player 1 (Red), 2 = Player 2 / Computer (Yellow)

Dropping a piece

When a column is clicked, the lowest free slot is found — gravity is simply checked from the bottom upwards:

function dropPiece(col) {
    for (let row = ROWS - 1; row >= 0; row--) {
        if (board[row][col] === 0) {
            board[row][col] = currentPlayer;
            return row;
        }
    }
    return -1; // Column full
}

Checking the win condition

After every move, all four directions (horizontal, vertical, both diagonals) are checked for four consecutive pieces belonging to the same player:

const directions = [[0,1], [1,0], [1,1], [1,-1]];

for (const [dr, dc] of directions) {
    let cells = [[row, col]];
    for (let i = 1; i < 4; i++) {
        const nr = row + dr * i, nc = col + dc * i;
        if (board[nr]?.[nc] !== player) break;
        cells.push([nr, nc]);
    }
    if (cells.length === 4) return cells; // Winner!
}

The AI: Minimax with Alpha-Beta Pruning

Hard mode uses the Minimax algorithm with alpha-beta pruning. The computer simulates all possible sequences of moves up to a certain depth (here 5 moves ahead) and selects the best move:

function minimax(depth, alpha, beta, maximizing) {
    if (checkWin(2)) return {score: 100000 + depth}; // Computer wins
    if (checkWin(1)) return {score: -(100000 + depth)}; // Player wins
    if (depth === 0 || isBoardFull()) return {score: scoreBoard()};

    if (maximizing) {
        let best = {score: -Infinity};
        for (const col of getValidCols()) {
            const row = dropPiece(col); board[row][col] = 2;
            const result = minimax(depth - 1, alpha, beta, false);
            board[row][col] = 0; // Undo move
            if (result.score > best.score) best = {score: result.score, col};
            alpha = Math.max(alpha, best.score);
            if (alpha >= beta) break; // Pruning
        }
        return best;
    }
    // ... minimizing analogous
}

Alpha-beta pruning speeds up the search considerably: moves that are worse than already found options are not investigated further.

Position evaluation

When the maximum search depth is reached, a heuristic evaluates the current position. It counts how many favourable 4-windows each player has:

function scoreWindow(window, player) {
    const pCount = window.filter(v => v === player).length;
    const eCount = window.filter(v => v === 0).length;
    if (pCount === 4) return 100;
    if (pCount === 3 && eCount === 1) return 5;
    if (pCount === 2 && eCount === 2) return 2;
    return 0;
}

Conclusion

With around 250 lines of JavaScript it is possible to build a complete, playable Connect Four game with AI. The Minimax algorithm is at its heart — it is also the foundation for many other board games such as chess or draughts.

I develop bespoke web applications at webaufbau.ch — from interactive tools to complex web applications. Tell me what you need.

Developing Connect Four in JavaScript is a fascinating example of combining classic gameplay with modern technologies. Here I have implemented the Minimax algorithm to design an artificial intelligence that offers both easy and challenging opponents. This implementation demonstrates not only how to create interactive elements, but also how algorithms can foster strategic thinking within a game.