Connect Four — Connect Four game playable online on desktop and mobile

Context

Connect Four is a web adaptation of the classic board game that lets two players compete directly in the browser.

The project was carried out as part of an academic exercise aimed at developing an interactive game in pure JavaScript, with a responsive interface and complete client-side game logic.

The goal was to design a simple, accessible web application playable on different devices while implementing the game's core mechanics.

Problem

Recreating a classic board game in a web application requires managing several elements:

• the state of the game board
• player actions
• checking win conditions
• user interface interaction.

The challenge is to implement reliable logic that correctly detects winning alignments while keeping the interface smooth and intuitive.

Solution

The application is built on a JavaScript implementation of the game logic, with an algorithm that checks horizontal, vertical and diagonal alignments after each move.

Players can customise their avatar and piece colour before starting a game.

The game board is fully interactive: clicking a column triggers an animated drop of the piece to the available position.

The interface is responsive so the game can be played on computer, mobile or tablet.

Key features

• Connect Four playable directly in the browser
• two-player mode on the same device
• avatar and piece colour customization
• automatic win detection (horizontal, vertical, diagonal)
• piece drop animation
• responsive interface compatible with mobile and tablet
• multiple rounds between players.

Results

This project demonstrates the implementation of complete game logic in JavaScript, as well as the creation of an interactive, responsive interface.

It highlights client-side game state management, DOM manipulation and the implementation of simple algorithms to detect win conditions.