Connect Four AI (beta)

Tailwind|
ReactJS|
NextJS|
Typescript|
Game

Saturday, March 2, 2024

An implementation of minimax applied to Connect Four! You can play against the AI or play against a friend in 'two player' mode.

Connect Four Demo Image

I first came across the Minimax algorithm while studying for my Game Theory module during Economics at university. There, we would apply the algorithm to analyse the behaviour of individuals, why one person might make a certain decision. Game theory can also be used to study social dilemmas, such as the tragedy of the commons, where individual self-interest can lead to collective harm.

I realised that the Minimax algorithm is excellent for turn based board games such as Connect Four, so I decided to build this mini game to test myself...

You can read more here and see the pseudocode!

Diagram of a minimax tree

As a happy accident, if you tinker with the URL or go here, you will see you can make pixel art!

Connect Four Heart Pixel Art

Above, we can see some of the pixel art possible in the game using url state!

I am using url based state here and it even preserves moves using page history so you can navigate forward and backwards in your browser and the game will keep track of moves and player turn state. The board itself is encoded using vertical characters that look very similar but aren't.

Board state for heart the shape:

'2221222.2211122.2111112.1111111.1112111.2112112'