Connect Four – Classic HTML5 Board Game with AI & Animations

Live Demo

Bring the timeless fun of Connect Four to the web with this modern, beautifully animated HTML5 board game. Designed for all devices and built entirely with HTML, CSS, and vanilla JavaScript, this game is lightweight, responsive, and highly customizable—perfect for personal projects, client websites, or integration into gaming platforms.

✅ Key Features

Classic Gameplay: 6×8 vertical grid with gravity-based disc placement.

Multiple Game Modes:

Player vs Player (local multiplayer)

Player vs AI (challenge an intelligent computer opponent powered by Minimax with alpha-beta pruning).

Stunning Visual Effects:

Smooth disc-drop animations

Particle-based background

Confetti victory celebrations

Glowing highlight for winning discs

Optimized for All Devices: Fully responsive, scales perfectly across desktop, tablet, and mobile.

Customizable & Developer-Friendly:

Adjust board size, colors, and game settings in script.js.

Easy theming via CSS variables.

Simple integration—just upload and play!

Interactive UI: Preloader, animated game mode selector, and on-board restart feature.

Lightweight & Fast: No external libraries required—pure JavaScript ensures blazing performance.

✅ Technical Details

Tech Stack: HTML5 Canvas, CSS3, JavaScript (no dependencies)

File Structure: Clean and organized for easy editing (index.html, assets/script.js, assets/style.css)

Audio: Procedurally generated sound effects via Web Audio API (no external audio files).

Cross-Browser Support: Works on all modern browsers including Chrome, Edge, Firefox, and Safari.

Credits & Resource – Images :

Images

https://www.flaticon.com

https://www.freepik.com