https://github.com/aaayyuusshh/dots-and-boxes
Client/Server multiplayer implementation of the dots and boxes game 🚀
https://github.com/aaayyuusshh/dots-and-boxes
multiplayer-browser-game websockets
Last synced: 12 months ago
JSON representation
Client/Server multiplayer implementation of the dots and boxes game 🚀
- Host: GitHub
- URL: https://github.com/aaayyuusshh/dots-and-boxes
- Owner: aaayyuusshh
- Created: 2022-11-09T09:06:03.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-04T06:02:52.000Z (almost 2 years ago)
- Last Synced: 2025-06-09T19:05:01.559Z (about 1 year ago)
- Topics: multiplayer-browser-game, websockets
- Language: JavaScript
- Homepage:
- Size: 2.37 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dots & Boxes Multiplayer Game
## Overview
dots-and-boxes is an online multiplayer implementation of the classic Dots and Boxes game. This project brings the traditional paper-and-pencil game to the digital world, enabling users to play with up to three players in real-time. The game leverages web sockets for seamless communication between players, ensuring an engaging and low-latency multiplayer experience.
## Screenshots
**Waiting for players:**
**Game screen of one client:**
**Gameplay with 3 clients:**
## Technologies Used
- **Frontend:** HTML, CSS, JavaScript
- **Backend:** Node.js, Express.js, Socket.io
- **Database:** MongoDB
## Game Logic and Architecture
### 1. Frontend (`main.js`)
- **Game Initialization:**
- The game starts by initializing the game board and necessary variables.
- Cells are represented using the `cell` class defined in `cell.js`.
- **Game Loop:**
* The `runGameLoop` function runs continuously, updating the game state and rendering changes on the canvas.
- **Event Listeners:**
- Event listeners are added to the canvas for mouse movements and clicks to detect player actions.
- Socket.io is used to emit and receive events related to game moves and turns.
- **Highlighting and Moves:**
- Cells are highlighted based on mouse movements, indicating potential moves.
- Players can click to make moves, and the game logic processes and updates the board accordingly.
- **Scoring and Game Over:**
- Scores are tracked for each player based on the number of squares formed.
- The game ends when all possible squares are formed, and a modal displays the winner and scores.
### 2. Backend (`server.js`)
- **Server Initialization:**
- The server is set up using Node.js and Socket.io to handle real-time communication.
- The server manages game rooms, tracks player turns, and facilitates interactions between clients.
- **Room Creation and Joining:**
- Players can create a new game, generating a unique room code.
- Existing games are joined by entering the room code.
- **Turn Switching:**
- Turns are managed on the server, ensuring synchronized gameplay.
- Players take turns, and the server emits events to activate and deactivate event listeners accordingly.
- **Real-time Communication:**
- Socket.io is employed for real-time communication between clients and the server.
- Events such as moves, highlights, and turn switches are broadcasted to all players in the same room.
## How to Play
1. **Create a New Game:**
- Click the "Create Game" button on the landing page.
- Share the generated game code with others to join.
2. **Join an Existing Game:**
- Enter the provided game code on the landing page and click "Join."
3. **Gameplay:**
- Players take turns making moves to form squares.
- Highlighting and moves made from one player is transmitted to other players through web sockets.
- Scores are updated based on the number of squares claimed.
## Miscellaneous Planning
