Connect 4 Game

A simple, client-side implementation of the classic Connect 4 game built entirely using native web technologies (HTML, CSS, Vanilla JavaScript).

Features

Interactive User Interface: Enjoy a straightforward setup asking for Player 1 and Player 2 names before launching into the game board.
Dynamic Grid Rendering: The game board is an accurately rendered grid updating dynamically as users continue dropping their tokens (0 and *).
Complete Game Logic Engine:
- Horizontal, vertical, and both diagonal directional checks ensuring precise winning identification.
- Draw condition verification for fully occupied boards where no winner is found.
- Proper column limit restrictions preventing tokens from exceeding board height boundaries.
Message Prompts: Real-time alerts specifying which player's turn it is or identifying mistakes such as invalid moves or completely filled columns.

HTML5: Establishes the structural baseline for player input components and the board container.
CSS3: Employs styling constraints to beautifully display the game on all screens.
Vanilla JavaScript: Manages the complete game state array, grid visualizer, event listeners, and Connect 4 rule implementations natively.

This application is purely static front-end code, meaning no complex build tools or runtime environments like Node.js are strictly necessary.

Clone this repository directly onto your local machine:

git clone https://github.com/hbhanus2/connect4.git
cd connect4

Simply open index.html directly within your preferred web browser.

Alternatively, you can initialize a local web server (e.g. using live-server or python's http.server) to access to the game via localhost!

Start by navigating to the opening screen.
Hit the "Start Game" button.
Type in the desired display names for Player 1 and Player 2.
Taking turns, players drop their respective tokens down the columns by inputting a valid column number (1 - 7).
The game concludes when a player manages to align four tokens seamlessly in any direction!