This is a multiplayer Connect 4 game built with React, Socket.IO, and Express. Two players can play the game in real-time, and additional users can spectate.
Heroku Link: https://connect-lokashrinav-146496d5537d.herokuapp.com/
(Link Might be Down Because I Am Broke and Can't Afford Hosting Fees for Too Long)
- Real-time multiplayer functionality using Socket.IO.
- Handles player turns, win conditions, and spectators.
- Automatically detects a win and resets the game on request.
- Responsive game board built using React.
- Players reconnecting to the game can resume from where the game left off.
-
Clone the repository:
git clone https://github.com/yourusername/connect4-multiplayer.git
-
Navigate to the project directory:
cd connect4-multiplayer
-
Install dependencies:
npm install
-
Start the server:
npm run dev
-
The app should now be running at:
http://localhost:5173
The application can be deployed using services like Heroku or Fly.io.
-
Make sure you've logged into your Heroku account:
heroku login
-
Create a Heroku app:
heroku create
-
Push the project to Heroku:
git push heroku main
-
The game will be hosted at your Heroku app's URL.
- Frontend: React
- Backend: Express, Socket.IO
- Deployment: Heroku
- When a user connects, they either become one of the two players or a spectator if both player slots are filled.
- Players take turns dropping discs into columns, and the game automatically switches between them.
- The server checks for win conditions (horizontal, vertical, diagonal) and notifies all players of the winner.
- The game can be reset using the reset button.
The server uses the following setup:
- CORS is enabled for the frontend at
https://connect-lokashrinav-146496d5537d.herokuapp.com
. - Game data (board state, current player, etc.) is synchronized in real-time using Socket.IO events.
fill-board
: Fills the board for a new player or spectator.player-move
: A player makes a move, updating the board.check-win
: Server checks if a player has won.reset-game
: Resets the game to the initial state.set-winner
: Broadcasts the winner.current-player
: Updates the current player's turn.
To run the game locally:
- Ensure you have Node.js installed.
- Start the backend and frontend as described above.
- Open
http://localhost:5173
in your browser to view the game.
This project is licensed under the MIT License.