https://github.com/edasgh/multiplayer_tic_tac_toe
This is a multiplayer Tic-Tac-Toe game using HTML, CSS, JavaScript, and Node.js with Socket.io for real-time gaming
https://github.com/edasgh/multiplayer_tic_tac_toe
css html js nodejs socket-io
Last synced: about 1 month ago
JSON representation
This is a multiplayer Tic-Tac-Toe game using HTML, CSS, JavaScript, and Node.js with Socket.io for real-time gaming
- Host: GitHub
- URL: https://github.com/edasgh/multiplayer_tic_tac_toe
- Owner: Edasgh
- Created: 2025-02-15T14:48:16.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-22T08:23:22.000Z (over 1 year ago)
- Last Synced: 2025-05-14T12:19:31.734Z (about 1 year ago)
- Topics: css, html, js, nodejs, socket-io
- Language: JavaScript
- Homepage: https://multiplayer-tic-tac-toe-6nt4.onrender.com
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# MultiPlayer Tic-tac-toe game:
This program is a multiplayer Tic-Tac-Toe game using HTML, CSS, JavaScript, and Node.js with Socket.io for real-time communication between players. Here’s a brief explanation of how each part of the program works:
## Live Link :
https://multiplayer-tic-tac-toe-6nt4.onrender.com
## Demo Video:
https://youtu.be/7uPLD-colPw?si=3OI1_jwWnehxlCDV
### `index.html`
This file sets up the structure of the web page:
- Loads necessary scripts and stylesheets.
- Defines a form for users to enter their name and join the game.
- Displays elements for game info (user names, turn info) and the Tic-Tac-Toe grid.
- Includes the necessary scripts to handle the game logic.
### `style.css`
This file styles the HTML elements:
- Sets up basic styles for the body, headings, and buttons.
- Styles the game grid and its elements.
- Includes animations and transitions for better UX.
- Uses custom fonts from Google Fonts.
### `fonts.css`
This file defines font styles:
- Specifies different font weights and styles for the "Poppins" font.
- Provides classes for easy use of these font styles in the HTML.
### `index.js`
This file sets up the server using Node.js and Socket.io:
- Creates an HTTP server and sets up Socket.io for real-time communication.
- Serves the static files (HTML, CSS, JS) from the root directory.
- Manages game logic on the server-side, including player connections, game state, and turn handling.
#### Key functions and logic:
- **Connection Handling**: Listens for players connecting and disconnecting, and manages player matchmaking.[socket.on [socket.on(eventName,event)] is used to get the data sent via socket.emit[socket.emit(eventName,data)] function and similarly socket.emit is used to send data to the server (The eventName of socket.on event and socket.emit should be same to get data in the server)]
- **Game State Management**: Keeps track of game states (e.g., player turns, moves, game over conditions) and updates clients accordingly.
- **Real-time Updates**: Uses Socket.io to emit events to clients, keeping them in sync with the current game state.
### `scripts.js`
This file handles the client-side logic and interaction:
- Connects to the server via Socket.io.
- Manages user interactions, such as joining a game and making moves.
- Updates the UI based on the current game state received from the server.
#### Key functions and logic:
- **Event Listeners**: Sets up event listeners for form submission and grid button clicks.
- **Socket Events**: Listens for events from the server (`join_room`, `playing`, `gameOver`) and updates the UI accordingly.
- **Game Logic**: Implements the game logic, including checking for wins, handling turns, and updating the game state.
### Brief Flow of the Program
1. **User Joins the Game**:
- User enters their name and submits the form.
- Client emits a `join_room` event with the user's name.
- Server adds the user to the waiting list and matches them with another player if available.
2. **Game Starts**:
- When two players are matched, the server emits a `join_room` event with game info (players, turns, etc.) to both clients.
- Clients update their UI to show the game board and player info.
3. **Playing the Game**:
- Players take turns clicking on grid boxes.
- Each move emits a `playing` event with the move info to the server.
- Server updates the game state and checks for win conditions or a draw.
- Server emits updated game state to both clients, who update their UI accordingly.
4. **Game Over**:
- If a win or draw condition is met, the server emits a `gameOver` event.
- Clients display the game result and reset the game after a short delay.
### To run the program in the browser simply start the server using `npm run start` command and open two windows for two different players