Connect Four Game - HTML CSS JavaScript

📌 Project Description:

The Connect Four Game is a classic two-player connection board game recreated entirely using HTML, CSS, and vanilla JavaScript. Players take turns dropping red and yellow discs into a 7-column, 6-row vertically suspended grid. The goal is to be the first to form a horizontal, vertical, or diagonal line of four discs.

This project demonstrates DOM manipulation, 2D grid logic, user interaction handling, and game state management in JavaScript. It’s a fun and interactive way to build your front-end skills while recreating a timeless game.

⚙️ Key Features:

• Interactive 7x6 game board grid

• Turn-based two-player gameplay

• Win detection in all directions (horizontal, vertical, diagonal)

• Game reset functionality

• Visual indicators for current player's turn

• Fully responsive layout using CSS Grid

🕹️ How to Play:

Controls:

• 🖱️ Click on any column to drop your disc

Objective:

• Be the first player to align four discs of your color

• Lines can be horizontal, vertical, or diagonal

Game Over:

• Game ends when a player connects four in a row

• A draw is declared if the grid is completely filled

🧠 Skills You’ll Learn:

• Building a grid-based game layout with HTML/CSS

• Handling user input and turns in JavaScript

• Win condition checking using multidirectional search

• Creating dynamic visual feedback with CSS classes

• Clean code structure and modular logic for game loops